CSS infrastructure markup forms, etc.

1. What is structured marking
Upgrade the div used by the layout, depending on the area of the page and the different tags provided. The effect is almost identical to the Div
Designed to build the structure of the website
2. Detailed structure marking
1.
Function: Used to define "head of Web page content", or "head in a section of information"
Grammar:
Contents of the Head area

<div id= "Aa1" >

</div>
2. <nav> Elements
Role: Used to define the "navigation links" section of the page
Grammar:<nav></nav>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
3. <section> Elements
Role: Define the sections in the document to define the content of the page body
Grammar:<section></section>
<section>
<div></div>

Plain text ....
....
</section>
4. <article> Elements
Role: Defines content that is separate from other parts of the document.
Occasions: More for forum posts, news information, blog entries, user reviews, microblogging information content
Grammar:<article></article>
<article>
<p> ..... .....</p>.
</article>
5. <footer> Elements
Function: Defines the foot (bottom) information for an area
Define some non-essential information such as copyright information, corporate identity, after-sales service, etc.
Grammar:<footer></footer>
<footer>
<ul>
<li> About Us </li>
<li> Contact Us </li>
<li> Social Recruitment </li>
</ul>
</footer>
6. <aside> Elements
Function: Most used to define the sidebar
Grammar:<aside></aside>
<aside>
<p> Publishing Information </p>
<p> View latest Release Notes </p>
</aside>
7. Note:
If there are some sites where structured markup is not enough to display the content of a Web page, use a div to control it flexibly

2. Forms
1. Forms
Function: Receives the user's data, "and submits it to the server"
1. Grammar
Define Form:<form></form>
Main properties:
1, Action: Action, the URL submitted to the server handler, the default submission to this page
2, Method: Submission method, commonly used value: Get or Post
Get: The intention is to get the data from the server side
Submission information will be displayed in the Address bar (in clear text), the maximum possible to submit 2kb of data
Post: The intention is to send data to the server to deal with,
When submitting data, the information is not displayed on the Address bar (redaction submission) and does not limit the size of the commit data

Post security will be higher, the security requirements are relatively high, such as user registration, login must use post. When the amount of data submitted is large, you also choose to use post.
3. Enctype: How to encode the form data
Note: Text submissions and file submissions will be encoded in different ways
Default is the way text is submitted: application/x-www-form-urlencoded

When submitting a file, you need to change this property value to:
Multipart/form-data
4. Name: Define the form name

2. Form elements
Also known as form controls, with visual appearance and the ability to accept user-entered data
FORM element Classification:
1. INPUT element
All elements starting with the input single mark
Syntax: <input/>
Property:
1, type: types, depending on the type value, create different input elements (text box, password box, radio button, check box)
2, Value: value, values of the current form element (default value, user-entered value)
3, Name: Names, define the name of the form element, mainly submitted to the "server" to use
4, ID: Unique identification, provided to "this page" of "JavaScript" to use
5. Disabled: Disable control
1. Text box and Password box
Text box: <input type= "text"/>
Password box: <input type= "Password"/>
Property:
MaxLength: Maximum length, limit the number of characters entered by the user
ReadOnly: Read only, can only see, can't write

Name and ID worth the value specification: start with the abbreviation of the control, followed by the function name, each word in the function name, the first character is capitalized
Text box: User name--txtusername
Password box: User Password--txtuserpwd
2. radio button and check box
radio button:
<input type= "Radio" name= ""/>
<input type= "Radio" name= ""/>
Note: The Name property, in addition to the functions described above, is also able to group radio buttons within a group, with only one selected

check box:

<input type= "checkbox" Name= "value=" "/> Text
Property: Checked
3. Button
1. Submit button
feature pinning to submit data for all form elements within a form to the server
<input type= "Submit" value= "Text on button"/>
2. Reset button
function immobilization to restore all form elements in the form to their original values. Clears the data.
<input type= "Reset" value= "The text on the button"/>
3. Normal button
There is no function to execute the client's script. (Customizable button function)
<input type= "button"/>
==>
<button> text </button>

userdo.php?txtusername=wuji.zhang&txtuserpwd=zhaomin&rdogender=female&chkhobby=eat&chkhobby= Play
4. Hidden fields and File selection boxes
1. Hidden fields
Hidden in the HTML page, not displayed to the user to see the elements, but can be submitted to the server.
<input type= "hidden" name= "value=" "/>

Userdo.php?txtusername=zhangwuji&txtuserpwd=wuji. zhang&rdogender=female&chkhobby=eat&chkhobby=drink&txtuid=1101001
2, File selection box
allows the user to open a dialog box, Select the file to upload to the server.
<input type= "file" Name= ""/>
Note:
1, to change the value of Enctype to Multipart/form-data
2, method must be post

5, HTML5 core
<input type= "email"/>
<input type= "url"/>
2, TEXTAREA element
Scientific name: Multiline Text field, multi-line text input box <textarea> Default text </textarea>
Property:
Name: Name
cols: Specify the number of columns in the Text field, how many characters can be displayed in a row
rows: Specifies the number of lines of text fields, by default Display a few rows of data, and then show the scroll bar
3, select and option
Select: Option box, drop-down list box
Syntax:
<select></select>
Property:
Name : element name
Size: The default display option box is greater than 1, or is a scrolling list
Multiple: Multiple-selection
Option: Option data in the Options box, Options
<option> text displayed </option>
Properties:
Value: Values for option
selected: Preselected
4, other elements
1, <label> Elements
Association text and form Controls
Properties:
for: Represents the The "id" value of the "control" associated with the element
Syntax: <label for= "id" > Text content </label>
2, grouping element
Syntax:
<fieldset></ Fieldset>: Grouping controls
<legend></legend>: Assigning a caption to a group

3. Other marks
1. Floating frame <iframe>
This tab allows you to embed another page in one page
Property:
1. src
2. Width
3. Height
4. Frameborder: The bounding box of the floating frame is introduced, the value is 0, then no border
Attention:
1, the IFRAME label must appear in pairs
2. Summary and details
Content that can be expanded and shrunk
Grammar:
<details>
<summary> title </summary>
Normal display content
</details>
3. Measure elements
Grammar:<meter></meter>
Property:
Min: The minimum range of current measure elements, default 0
Max: Maximum range of current measure elements, default 1
Value: measure, default = 0
4. Time Element
<time></time>
Function: The different forms of time are associated
<time datetime= "14:45" > Noon three-quarter </time>
5. Highlight the display
<mark> highlighted text </mark>

<ul type= "None" ></UL>

CSS infrastructure markup forms, etc.