HTML5: Basic use, HTML5: Use

HTML5: Basic use, HTML5: Use
The single-line text input box type is text, indicating that the input element is a single-line text box, which is the default expression of the input element. The single-line text input box supports the following attribute settings. A: Set the element size. The maxlength attribute sets the maximum number of characters that can be entered by the user. The size attribute sets the number of characters that can be displayed in the text box. <Form method = "post" action = "http://www.cnblogs.com/89526cyh/">

<P> <label for = "name"> Name: <input maxlenth = "10" id = "name" name = "name"/> </label> </p>

<P> <label for = "city"> City: <input size = "10" id = "city" name = "city"/> </label> </p>

<P> <label for = "fave"> Fruit: <input size = "10" maxlenth = "10" id = "fave" name = "fave"/> </label> </p>

<Button type = "submit"> Submit Vote </button>

</Form>

B: Set the initial value and placeholder prompt

The value attribute can specify a default value for the input box. The placeholder attribute can set a text prompt to indicate the type of data to be entered.

<Form method = "post" action = "http://www.cnblogs.com/89526cyh/">
<P> <label for = "name"> Name: <input placeholder = "Your name" id = "name" name = "name"/> </label> </p>
<P> <label for = "city"> City: <input placeholder = "Where you live" id = "city" name = "city"/> </label> </p>
<P> <label for = "fave"> Fruit: <input value = "Apple" id = "fave" name = "fave"/> </label> </p>
<Button type = "submit"> Submit Vote </button>
</Form>

Note: When the form is reset with the button element, the browser restores the placeholder prompt and default value in the text box.

The effect in chrome is as follows:

C: use the data list

The list attribute can be set to the id attribute value of a datalist element, so that you can select from the list specified by the datalist element. The datalist element is added in HTML5 to provide a batch of values to help users enter the required data.

 

<Form method = "post" action = "http://www.cnblogs.com/89526cyh/">
<P> <label for = "name"> Name: <input placeholder = "Your name" id = "name" name = "name"/> </label> </p>
<P> <label for = "city"> City: <input placeholder = "Where you live" id = "city" name = "city"/> </label> </p>
<P> <label for = "fave"> Fruit: <input list = "fruitlist" id = "fave" name = "fave"/> </label> </p>
<Button type = "submit"> Submit Vote </button>
</Form>
<Datalist id = "fruitlist">
<Option value = "Apples" label = "Lovely Apples"/>
<Option value = "Oranges"> Refreshing Oranges </option>
<Option value = "Cherries"/>
</Datalist>

Each option in the datalist element represents a user-selectable value.

The effect in chrome is as follows:

 

D: generate a read-only or disabled text box

The readonly attribute indicates that the text box is read-only, and the disabled attribute indicates that it cannot be edited, which has different appearances.

<Form method = "post" action = "http: // titan: 8080/form">
<P> <label for = "name"> Name: <input value = "Adam" disabled id = "name" name = "name"/> </label> </p>
<P> <label for = "city"> City: <input value = "Boston" readonly id = "city" name = "city"/> </label> </p>
<P> <label for = "fave"> Fruit: <input value = "Apple" id = "fave" name = "fave"/> </label> </p>
<Button type = "submit"> Submit Vote </button>
</Form>

Note: the form with the disabled attribute set is set to Gray. You cannot edit the text in the form and the content of the form is not submitted to the server; the form with the readonly attribute is used to prevent users from editing the content in the text box without affecting the appearance and sending the content to the server.

The effect in chrome is as follows:

 

E: password input box

The input element whose type attribute is password is used to enter the password. The input element of this attribute supports the following attributes:
1) maxlength: the maximum number of characters that can be entered in the password box;
2) pattern: Enter the regular expression for verification;
3) placeholder: prompts about the required data types;
4) readonly: Set the password to read-only;
5) required: the user must enter a value; otherwise, the verification fails;
6) size: specify the number of characters visible in the password box to set its width;
7) value: Set the initial password value.

<Form method = "post" action = "http: // titan: 8080/form">
<P> <label for = "password"> Password: <input type = "password" placeholder = "Min 6 characters" id = "password" name = "password"/> </label> </p>
<Button type = "submit"> Submit Vote </button>
</Form>

 

Note: The characters entered by the user are displayed as "*" in the password box. Note that when submitting the form, the server receives the plaintext password, for websites and application systems that are critical to security, you should consider using SSL/HTTPS to encrypt the communication content between the browser and the server.

The effect in chrome is as follows:

 

F: Set the button type attribute to 1) submit: indicates that the button is used to submit a form (default );
2) reset: indicates that the button is used to reset the form;
3) button: indicates that the button has no specific semantics. 1) submit: generate the button for submitting the form. attributes are supported: formaction, formenctype, formmethod, formtarget, and formnovalidate. These attributes are used in the same way as those of button elements with the same name. For details, refer to here;
2) reset: generate the reset form button;
3) button: generate a normal button without any operation.
3. the description text of the button is specified by the value attribute. There are three types of buttons, which are set through the type attribute of the button:

Set the type attribute of the button to submit (default action), and press the button to submit a form containing it. In this way, you can also set the following attributes:
1) form: Specifies the form associated with the button;
2) formaction: overwrite the action attribute of the form element and specify the URL to which the form will be submitted;
3) formenctype: overwrite the enctype attribute of the form element, and specify the form encoding method separately;
4) formmethod: overwrite the method attribute of the form element;
5) formtarget: overwrite the target attribute of the form element;
6) formnovalidate: overwrite the novalidate attribute of the form element, indicating whether the client data validity check should be performed.
These attributes are newly added to html5. they are mainly used to overwrite or supplement the settings on the form element.

<Form method = "post" action = "http: // titan: 8080/form">
<P> <label for = "name"> Name: <input value = "Adam" disabled id = "name" name = "name"/> </label> </p>
<P> <label for = "password"> Password: <input type = "password" placeholder = "Min 6 characters" id = "password" name = "password"/> </label> </p>
<P> <label for = "fave"> Fruit: <input value = "Apples" id = "fave" name = "fave"/> </label> </p>
<Input type = "submit" value = "Submit Vote"/>
<Input type = "reset" value = "Reset"/>
<Input type = "button" value = "My Button"/>
</Form>

Note: The difference between generating a button using an input element and using a button element is that the latter can be used to display markup-containing text. However, because each browser has the same processing method for the input elements, and some older browsers (such as IE6) cannot correctly process the button elements, many websites prefer to use the input element.

 

J: only numeric values are allowed for input elements whose type attribute is "number. Supported attributes include:
1) list: Specifies the datalist element that provides the recommended value for the text box. Its value is the id value of the datalist element;
2) min: set the minimum value;
3) max: set the maximum value;
4) readonly: Read-only;
5) required: indicates that the user must enter a value;
6) step: the step of the up and down adjustment value;
7) value: Specifies the initial value of an element.