HTML tags: form tags
*Form:
*Concept: Used to collect data entered by the user.Used to interact with the server.
* form: Used to define a form.You can define a range that represents the range in which user data is collected
*Attributes:
* action: Specify the URL to submit data
* method: Specify submission method
*Category: 7 in total, 2 more common
* get:
1. Request parameters are displayed in the address bar.It is encapsulated in the request line (explained after the HTTP protocol).
2. Request parameter size is limited.
3.Not very safe.
* post:
2. Request parameters will no longer appear in the address bar.Will be encapsulated in the request body (explained after HTTP protocol)
2. There is no limit on the size of the request parameters.
3. Safer.
* Data in a form item must have its name attribute specified in order to be submitted
*Form item label:
* input: You can change the way elements are presented by using the type attribute value
* Typee property:
* text: Text input box, default
* placeholder: Specifies the prompt information for the input box, which is automatically emptied when the content of the input box changes
* password: Password input box
* radio: Radio box
*Note:
1. In order for multiple radio boxes to achieve the effect of radio selection, the name attribute values of multiple radio boxes must be the same.
2. Each radio box is typically given a value attribute that specifies the value it submits when it is selected
3. checked property, which allows you to specify default values
* checkbox: check box
*Note:
1. Each radio box is typically given a value attribute that specifies the value it will submit when it is selected
2. checked property, you can specify a default value
* file: File Selection Box
* hidden: Hidden field, used to submit some information.
*Button:
* submit: submit button.Can submit form
* button: normal button
* image: picture submit button
* src property specifies the path of the picture
* label: Text description of the specified entry
*Note:
* The for attribute of label generally corresponds to the id attribute value of input.If so, clicking on the label area will give the input input box focus.
* select:drop-down list
*Child element: option, specify list item
* textarea: Text field
* cols: Specifies the number of columns, how many characters per line
* rows: Default number of rows.
CSS: Page Beautification and Layout Control
1. Concepts: Cascading Style Sheets Cascade Style Sheets
*Cascade: Multiple styles can be applied to the same html element, all at once
2. Benefits:
1. Powerful
2. Separate content presentation from style control
*Decrease coupling.decoupling
*Make division of labor and collaboration easier
*Improve development efficiency
3. Use of CSS: How CSS works with html
1. Inline Styles
*Specify css code within a label using the style attribute
*For example: <div style="color:red;">hello css</div>
2. Internal Style
* stay head Inside the label, define style Label, style The contents of the label body are css Code
* For example:
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3. External Styles
1. Definition css Resource file.
2. stay head Inside the label, define link Tags, introducing external resource files
* For example:
* a.css Files:
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
* Be careful:
* 1,2,3 Various ways css Increasing scope
* 1 Mode is not common, later common 2,3
* 3 The format can be written as:
<style>
@import "css/a.css";
</style>
4. css syntax:
*Format:
Selector {
Attribute name 1: Attribute value 1;
Attribute name 2: Attribute value 2;
...
}
*Selector: Filter elements with similar characteristics
*Note:
* Each pair of attributes needs to be used; separated, the last pair of attributes may not be added;
5. Selector: Filter elements with similar characteristics
*Category:
1. Basic selector
1. id selector: Select elements with specific id attribute values. It is recommended that the id values be unique in an html page
*Syntax: #id attribute value {}
2. Element selector: Select elements with the same label name
*Syntax: Label name {}
*Note: id selector takes precedence over element selector
3. Class selector: Select elements with the same class attribute value.
*Syntax:.class attribute value {}
*Note: Class selector priority is higher than element selector
2. Extension selector:
1. Select all elements:
*Syntax: *{}
2. Union selector:
*Selector 1, selector 2{}
3. Subselector: Filter selector 2 elements under selector 1 element
*Syntax: Selector 1 Selector 2{}
4. Parent selector: Parent element selector 1 of filter selector 2
*Syntax: Selector 1 > Selector 2{}
5. Attribute selector: Select element name, attribute name = attribute value
*Syntax: Element Name [Attribute Name="Attribute Value"]{}
6. Pseudo Class Selector: Select the states that some elements have
*Syntax: Element: State {}
*e.g. <a>
*Status:
* link: Initialized state
* visited: Visited status
* active: Accessing status
* hover: mouse hover state
6. Properties
1. Font, Text
* font-size: font size
* color: Text color
* text-align: how it is done
* line-height: line height
2. Background
* background:
3. Borders
* border: Set the border to match the properties
4. Size
* width: width
* height: height
5. Box Model: Control Layout
* margin: outer margin
* padding: inside margin
*By default, the inner margin affects the size of the entire box
* box-sizing: border-box; set the properties of the box so that width and height are the final box size
* float: floating
* left
* right
Case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Page</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*Center div horizontally*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*Set Border Corner*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>New user registration</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--Define Form form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">User name</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="enter one user name"></td>
</tr>
<tr>
<td class="td_left"><label for="password">Password</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="Please input a password"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="Please enter your mailbox"></td>
</tr>
<tr>
<td class="td_left"><label for="name">Full name</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="Please enter your name"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">Cell-phone number</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="Please enter your mobile number"></td>
</tr>
<tr>
<td class="td_left"><label>Gender</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> male
<input type="radio" name="gender" value="female"> female
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">Date of birth</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="Please enter the date of birth"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >Verification Code</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="Please enter the verification code">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="register"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>Existing account?<a href="#">Log on now</a></p>
</div>
</div>
</body>
</html>
