Form input label Type property detailed

Goal: Detailed form input label Type property common property values

One, the input tag and its type attribute
The Ps:input element can be used to generate a simple text box for the user to enter data. By default, what data can be entered. You can limit what you enter by using a different type property value.

Second, summary
1, text a single-line text box, default property value
2. Password Password box for hidden characters
3, search box, in some browsers to enter the content will appear the fork Mark
4. Submit, Reset, Button are: Submit button, reset button, Normal button
5, number, range is: can only enter the value of the box, can only enter in a specified range of Value box
6, CheckBox, Radio is: check box, a set of check boxes (the Name property value is the same) the user can check multiple, radio buttons, a group of radio buttons (the Name property value is the same) the user can only select a
7, image, color is: Picture button, colour code button
8, email, tel, url in order: Detect e-mail, number, URL text box
9. Hidden generates a hidden control
10. File generates an upload control
11. Get all kinds of dates, time data, month, date, week, DateTime, datatime-local

Third, detailed
1, type= "text"
1.1), list specifies the DataList element that provides the suggested value for the text box, whose value is the ID value of the DataList element
1.2), MaxLength set text maximum character length
1.3), pattern regular expression for input validation
1.4), placeholder input the text of the prompt, when the user input content will automatically disappear
1.5), readonly text box is in read-only state
1.6), Disabled text box in disabled state
1.7), size to set the width of the text box
1.8), Value sets the text box initial value, will appear in the text box, the display priority is higher than placeholder, the form submits when the user enters the content preferentially, if the user does not have the input to submit the default value
1.9), required indicates that the user must enter a value, otherwise cannot be verified by the input

2, type= "password", and type= "text" when the additional properties of the basic consistent, less a list property

3, type= "search", and type= "text" all use of the additional attribute values consistent

4, when type is submit, reset, button, submit form, reset form, Normal button
4.1), if it is submit, it also provides the same additional attributes as the element: FormAction, Formenctype, FormMethod, Formtarget, and Formnovalidate.

5. When type is number, range
5.1), type= "number" can only enter a numeric text box
5.2), type= "range" generates a regulator with drag-and-drop adjustment
Additional properties:
5.3), min set acceptable minimum value
5.4), Max set the acceptable maximum value
5.5), value specifies the initial value
5.6), step specify the step of the upper and lower adjustment value
5.7), required indicates that the user must enter a value, otherwise cannot be verified by the input
5.8), ReadOnly set text box content read-only

6. When type is checkbox, radio
6.1), regardless of type equals checkbox or radio, must have attribute name and value
6.2), they also have optional properties checked, required
PS: Checkboxes and radio buttons are present in a group of groups, with the same name value being a group, a set of check boxes can be selected at the same time, and a group of radio buttons can only select one

<section>
  <label for= "C" >C</label>            <input type= "checkbox" Id= "C" name= "hobby" value= "C "/>
  <label for=" python ">python</label>   <input type=" checkbox "id=" python "name=" hobby " value= "python"/>
  <label for= "java" >java</label>       <input type= "checkbox" Id= "java" name= " Hobby "  value=" java "/>
</section>
<section>
  <label for=" Apple ">apple</ label>     <input type= "checkbox" id= "Apple" name= "eat" value= "apple"/>
  <label for= "Orange" > orange</label>  <input type= "checkbox" id= "Orange" name= "eat" value= "orange"/>
  <label for= " Pear ">pear</label>      <input type=" checkbox "id=" pear "name=" eat "  value=" pear "/>
</ Section>

  Data format at commit: Hobby=c&hobby=python&eat=orange&eat=pear

<section>
  <label for= "men" > Male </label> <input type= "Radio" id= "Man" name= "Sex" value= "mans"/ >
  <label for= "men" > Women </label> <input type= "Radio" id= "Men" name= "Sex" value= "men"/>
< /section>

  Data format at commit: Sex=man

7. When type is image, color
7.1), when type= "image", functionally and type= "submit", the former is a picture as a button, of course, the latter can achieve the same effect
Additional properties:
7.2), SRC specifies the URL to display the image
7.3), Alt provides a text description of the picture, the text is displayed when the picture is not found
7.4), Width image length, note that this is a label property, not a style property
7.5), height of the picture, note the above
7.6), additional attributes FormAction, Formenctype, FormMethod, Formtarget, and formnovalidate upon submission.

8. When type is email, tel, url
8.1), email format for e-mail
8.2), tel for phone format
8.3), URL is URL format
8.4), additional attributes and text are consistent. For these types, however, browser support is different. Email support is better, now the browser supports format verification; tel is basically not supported; URL support Generally, some browsers just detect http://To pass.

9, type= "hidden"
9.1), generate a hidden control, generally used for form submission when the associated primary key ID commit, and this data as a hidden existence

10, type= "file"
10.1), generate a file upload control for file upload.
Additional properties:
10.2), required indicates that the user must provide a value, otherwise it cannot be verified
10.3), accept specifies the MIME type received for example: accept= "Image/gif, Image/jpeg, Image/png"
PS: When you need to upload a file, the Enctype property of the form tag must be set to Multipart/form-data

11, when the type for data, month, time, week, DateTime, datatime-local, for various reasons or with jquery and other front-end library to write it ...