HTML5 form label and label Properties summary __html

Goal:
1, list all the form label
2, summarize the use of each label and the common properties of the label

PS: Forms are used primarily to collect user information
PS: Any control used to collect user information must have a Name property, some controls (such as checkbox, radio) must explicitly indicate the Value property, most controls can specify the default value, or you can not specify direct access to user input.

One, the label of the form
1, form represents HTML form
2. Input represents a control used to collect user input data, and a control that obtains different functions by setting different property values of the Type property
3. Label can bind other controls in the form through the for property to explain other control uses
4, select, option, optgroup form dropdown box combination
5, textarea represents a control that can enter multiple lines of text
6. DataList defines a set of recommended values provided to the user
7, FieldSet, legend groups the controls in the form
8, output expression calculation results
9, button buttons, you can set the type value to get reset, submit, the normal button of the three functions of the button, the control of these functions can be obtained through the input

Label usage and label properties
1, usually, the label needs to match the label properties to achieve the purpose
2, some attributes are all the tags have, some attributes are only part of the label, some attributes when a unique label of 3, the following as far as possible to list the attributes of each label, as well as a common collocation

4, Form label

<form name= "" action= "#" method= "POST" > <input type= "Submit" value=
   "submitted"/>
</form>

1), action represents the form submitted by the page
2), method to represent the form of the request, there are post and get two kinds, default got
3), enctype represents the encoding format used by the browser for data sent to the server. There are three kinds: application/x-www-form-urlencoded (default encoding, can not upload files to the server), Multipart/form-data (for uploading files to the server), Text/plain (not canonical code, Not recommended, different browsers understand different)
4), Name set form names
5), target set the location at the time of submission, _blank, _parent, _selt, _top
6), AutoComplete settings browser to remember the user input data to achieve automatic completion of the form. The default is on auto completion and set off if you do not want to do it automatically.
7), Novalidate set whether to perform client data validity check, details >>>>

5, the input label is the most frequently used label in the form label, to obtain the control of different functions by setting the value of the Type property, details >>>>

6. Labe Tags: Bind the other controls in the form through the for property, when clicked the label is equivalent to clicking on the and label binding control, the label text used to explain the control purposes, customize some form control style, label label is very useful

<section> <label for= "username" > Username:</label> <input type= "Text" class = "" "id=" username "name=" "value=" "/> </section> <sction> <label> <span> user name: </span&
      Gt <input type= "text" class= "id=" "Name=" "value=" "/> </label> </section> 

7, Drop-down box label Select, option, Optgroup
1, option, Optgroup is the child label for Select
2), optgroup tag is used to group option, and property label is used to describe the group content. Disabled is used to prohibit option selection in this group, Optgroup itself is an optional
3), the option tag is used for the content that the package presents to the user, and its Value property values are formed with the value of the Select's name attribute Name= Value is sent to the server when multiple selections: Name=value1&name=value2, it also has disabled, selected, label these optional properties
4), select for Package option, Optgroup , the required property name, when the form is submitted with the value sent to the server
4.1), disabled the Drop-down list is disabled
4.2, and from= "form_id" binds the Select and a form, and when the form is submitted, Will take this select, regardless of the select in the form or outside
4.3), the size setting does not click Select at a time to show a few options to the user to see
4.4, the multiple settings can be more than one, the attribute exists can be multiple selection, Name=value1&name=value2,name is the only
4.5), autofocus select automatically gets focus
4.6, required when the property exists, the Select must have a selection to pass the

<select name= "province" id= "province" >
  <optgroup label= "H" >
    <option value= "HN" > Henan </ option>
    <option value= "HB" > Hebei </option>
  </optgroup>
  <optgroup label= "S" >
    <option value= "sx_1" > Shanxi </option>
    <option value= "Sx_2" > Shaanxi </option>
  </ Optgroup>
</select>

8, TEXTAREA label

<textarea name= "suggest" row= "8" cols= "maxlength=" "Your Suggestion" placeholder= "wrap=" ></textarea>

8.1), name set when submitting
8.2), form will textarea and a form binding
8.3), ReadOnly set multiple lines of text read-only
8.4), disabled to disable multiple lines of text box
8.5), MaxLength set the maximum can enter the length of characters
8.6), Autofocus get focus
8.7), placeholder set the input when the prompt information
8.8), Rows set line number
8.9), cols set the number of columns
8.10), wrap set whether the text wraps when submitting the form
8.11), the required setting must enter a value, otherwise cannot pass the authentication

9, DataList must be a property ID, define a set of recommended values provided to the user, List–>id

<input id= "Mycar" list= "Cars"/> <datalist id=
"Cars" >
  <option value= "BMW" >
  <option Value= "Ford" >
  <option value= "Volvo" >
</datalist>

10, FieldSet, legend groups the controls in the form

<fieldset name= "" form= "form_id" disabled>
  <legend> This is the title </legend> ...
</fieldset>

11, Output expression calculation results

<form action= "#" method= "POST" oninput= "Res.value = Num1.valueasnumber * num2.valueasnumber" >
  <div>
    <input type= "number" name= "NUM1" id= "Num1"/> "<input" type= "number" name= "num2" id= "num2"/>
    <output for= "Num1 num2" name= "res"/>
  </div>
 <input type= "Submit" value= "Submit"/>
</form>

12, button buttons, you can set the type value to get reset, submit, normal button of the three functions of the button, when the type value is submit, there are some additional attributes. Controls for these features are available through input.