HTML5: Custom forms
HTML5 contains a variety of input boxes and buttons, which are implemented by setting the type attribute of the input element. In addition, HTML5 also supports selection of lists and multiple input boxes, these elements have their own purposes and attributes, which are described in the following sections.
Single line text input box
If type is text, 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.
Set 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.
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.
The effect in chrome is as follows:
When the form is reset with the button element, the browser restores the placeholder prompt and default value in the text box.
Use 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.
Refreshing Oranges
Each option in the datalist element represents a user-selectable value. The effect in chrome is as follows:
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.
The effect in chrome is as follows:
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.
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.
The characters entered by the user are displayed as "*" in the password box. However, when submitting a form, the server receives the plaintext password, which is critical to security for websites and application systems, you should consider using SSL/HTTPS to encrypt the communication content between the browser and the server.
Button
When the type attribute is set to submit, reset, And button, a button similar to the button element is generated.
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.
The effect in chrome is as follows:
Vc/movie + PC9kaXY + movie/yPGJyIC8 + PC9oMT48aDI + yv3X1srkyOu/8 jxiciAvPjwvaDI + movie/movie + movie/paper + movie/movie "brush: java; ">The effect in chrome is as follows:
Range selector
You can only use an input element whose type attribute is range to select a value within the specified range. This type of input element supports the same attributes as number.
The effect in chrome is as follows:
Check box
If the type attribute is checkbox, it indicates the check box. The supported attributes are as follows:
1) checked: whether to select it by default;
2) required: indicates that you must check this check box;
3) value: Set the data value submitted to the server. The default value is on.
The effect in chrome is as follows:
Note that when using checkbox, only the checked check box will be sent to the server when the form is submitted.
Radio button group
The input element whose type attribute is radio can be used to generate a set of radio buttons. The supported attributes are the same as those in the checkbox. Each radio represents an option, and the same group of radio uses the same name. Single-choice button groups are applicable to scenarios with fewer options.
The effect in chrome is as follows:
Limited format input box
The type attribute values email, tel, and url correspond to the email address, phone number, and URL respectively. The 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) maxlength: the maximum number of input characters;
3) pattern: Specifies the regular expression used to verify the input;
4) placeholder: Specifies the prompt about the required data type;
5) readonly: indicates that the text box is read-only;
6) required: indicates that the user must enter a value;
7) size: number of visible characters;
8) value: Specifies the initial value of an element.
Email also supports the multiple attribute, indicating that multiple email addresses can be accepted.
The effect in chrome is as follows:
Time and date input box
HTML5 adds some input date and time types, including:
1) datetime: Obtain the date and time of the universal time, including the time zone information;
2) datetime-local: Get the local date and time, excluding the time zone information;
3) date: Get the local date, excluding the time and time zone information;
4) month: obtains the year and month, excluding the day, time, and time zone information;
5) time: Get time;
6) week: Obtain the current week.
Additional attributes supported by the input element of date and time 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: the user must enter a value; otherwise, the verification fails;
6) step: the step of the up and down adjustment value;
7) value: Specifies the initial value of an element.
The effect in chrome is as follows:
Currently, date and time input boxes are not supported in most browsers. Therefore, it is best to use the calendar selection tool provided by mainstream JavaScript libraries.
Color input box
If the type attribute is color, it indicates the color selector. The color value is expressed in the format of 7 characters: starting with #, followed by three two hexadecimal numbers, represent the values of red, green, and blue colors, for example, # FF1234.
The effect in chrome is as follows:
Note that most browsers do not yet provide special support for such input elements.
Hidden input box
The hidden input element can be used to hide a data item and send it to the server when submitting a form (usually to use this function ).
Image button
The button generated by the input element of the image type is displayed as an icon. Click it and submit the form. Supported attributes include:
1) alt: provides instructions on elements, which are useful to users who need to use disability assistance technologies;
2) formaction: Same as the button element;
3) formenctype: Same as the button element;
4) formmethod: Same as the button element;
5) formtarget: Same as the button element;
6) formnovalidate: Same as the button element;
7) height: sets the Image height in pixels;
8) src: Specifies the URL of the image to be displayed;
9) width: Set the image width in pixels;
Click the image button to submit the form. The submitted data contains the coordinate information of the click position. Therefore, different regions in the image can represent different operations, then, the system responds to the user's click position on the image.
Upload File button
The file-type input element is used to upload files. You can upload files to the server when submitting a form. Supported attributes include:
1) accept: Specifies the accepted MIME type. MIME Type Definition, refer to RFC 2046 (http://tools.ietf.org/html/rfc2046 );
2) multiple: set this attribute to upload multiple files at a time;
3) required: You must enter a value.
Note that only files can be uploaded when the form encoding type is multipart/form-data. The effect in chrome is as follows:
Option List
The selet element is used to generate a list of options, which is more compact than the radiiobutton input element and more suitable for scenarios with more options. Attributes supported by this element include:
1) name: name of the list;
2) disabled: Disable the drop-down list;
3) form: one or more forms to which the text area belongs;
4) autofocus: automatically obtains the focus in the text area after the page is loaded;
5) required: required;
6) size: the number of visible options in the drop-down list;
7) multiple: You can select multiple options.
Single-choice drop-down list
The select element is a single-choice drop-down list by default.
The effect in chrome is as follows:
Check box
After setting the size attribute and multiple attribute for the list, it becomes a check box.
When you click an option, press Ctrl to select multiple options. The effect in chrome is as follows:
List with Structure
The optgroup element can be used to create a certain structure in the content of the select element. The supported attributes of this element include:
1) label: used to provide a title for the entire set of options;
2) disabled: Any options in the group are grayed out.
The effect in Chrome is as follows:
The optgroup element only acts as an organizational unit and cannot be selected as an option.
Multi-line input box
The textarea element generates a multi-line text box in which you can enter multiple lines of text. The following attributes are contained:
1) autofocus: automatically obtains the focus in the text area after the page is loaded;
2) cols: visible width in the text area, an integer;
3) disabled: Disable the region;
4) form: one or more forms to which the partition belongs;
5) maxlength: the maximum number of characters in the Upper Area;
6) name: name of the region;
7) placeholder: A Short prompt for the expected value of the text area;
8) readonly: The reading area is read-only;
9) required: The region is required;
10) rows: number of visible lines in the rows area, integer type;
11) wrap: how to wrap text in the border area, including soft (default). When a form is submitted, the text in the border area does not wrap; hard, when a form is submitted, the text line feed (including line breaks) in the character area. When this value is used, the cols attribute must be specified.
The effect in Chrome is as follows:
Result Display Area
The output element indicates the calculation result. Supported attributes include:
1) for: one or more elements related to the output field, separated by spaces;
2) form: one or more forms to which the input field belongs;
3) name: Unique name of the object (used when the form is submitted ).
The above uses the JavaScript time system to generate a simple calculator. The effect in Chrome is as follows:
