Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the html5 form elements". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what html5 form elements are.

Html5 form elements include the basic controls: 1, single-line text input box; 2, password input box; 3, multi-line text input box (text field); 4, drop-down list; 5, radio box; 6, check box; 7, submit button; 8, reset button; 9, fieldest control; 10, legend control, etc.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Form Overview

Forms are generally used to collect user information, allowing users to fill in, select, and submit relevant information; in web pages, we also need to interact with users and collect user data, and we also need forms; HTML forms for user input are created through tags

In HTML, a complete form usually consists of three parts: form controls (form elements), prompt messages, and form fields.

Form control

Contains specific form function items, such as: single-line text input box, password input box, radio box, check box, submit button, reset button, etc.

Prompt information

A form usually contains illustrative text that prompts the user to fill in and manipulate it.

Form field

Equivalent to a container for all form controls and prompts, you can define the url address of the program used to process the form data and the method of submitting the data to the server through the form field; if the form field is not defined, the data in the form cannot be transferred to the background server

The complete form contains the following elements

Form is used to create HTML forms

Input control, single label, can be used to set input boxes, checkboxes, check boxes, upload files, submit buttons, etc.

Label defines an annotation for the corresponding input tag (can be thought of as a tag or description); if it is marked in the input box, click the label content time mark to automatically focus in the input box

Textarea control for creating multiline text input boxes (text fields)

Select is used to define the drop-down list and needs to be used in conjunction with the option tag. When using select, you need to set the name property to identify the form data submitted to the server.

Option defines the items in the drop-down list. Only one item can be selected by default. You need to set the value property when you use it, and the corresponding option value will be submitted to the server when the form is submitted.

Fieldest groups related form elements, usually in conjunction with legend tags

Legend defines a title for the grouping elements of fieldest

Button defines a button, which is used in the form to have the function of submitting the form; usually in the form, the button for submitting the form is set through the type attribute of the input tag

Common attribute tags for each tag

Name sets the name of the form

The submission action of the action form, indicating where the form will be submitted; the value is URL, which can be a relative address or an absolute address

Method form submission method, which HTTP method is used to submit the form; the general values are get or post

Enctype sets the encoding mode of the form data encoding; the server will decode the submitted data according to the set encoding method

There are three kinds of value:

Application/x-www-form-urlencoded encodes all characters before sending (default)

Multipart/form-data does not encode characters; you must use this value when using a form that contains file upload controls

Text/plain spaces are converted to "+" plus signs, but special characters are not encoded

Label

Name defines the name of the input element; this attribute needs to be set when submitting data in the current tag to the server

Value sets the value of the input element

The value attribute is also used differently for different input types:

For text, password, hidden types, used to define the initial (default) value in the input box

For checkbox, radio, image types, to define the value associated with the input element, which is sent to the action URL of the form when the form is submitted

For button, reset, submit types, used to define the text content displayed on the button

Note: when the input type is checkbox and radio, the value property must be set

Maxlength sets the maximum number of characters in the input tag. The value is numeric, and the part exceeding the maximum number of characters will not be entered. It is generally used in the input box.

Autofocus sets this property to focus automatically when the page is loaded, and the attribute value can not be written; a form can only have one input tag to set this attribute, which is mostly used in the input box.

Placeholder is used to set short prompt text; it is mostly used in the input box, and the prompt information disappears automatically when you enter the content

An option for checked setting is selected by default; the attribute value is checked, which can be omitted; this attribute is valid only for type= "checkbox" or type= "radio".

Accept sets the type of file submitted, which is valid only for type= "file". After clicking the "Select File" button, only matching file types are displayed in the pop-up explorer.

Property values are:

Audio/* all audio files

Video/* all video files

Image/* all picture files

Src sets the location of the image displayed as a submit button with a value of url;. This property is used with type= "image".

Alternate text if the picture of the alt picture button cannot be displayed; this property can only be used with type= "image"

Type is used to determine the display type of input tags; there are many corresponding attribute values, and different attribute values correspond to different types. The default is text type.

Corresponding attribute values:

Hidden is used to define hidden fields, which are not visible to the user

Submit is used to define the submit button; clicking this button will submit the form; you can set the text displayed by the button through the value property, and default to "submit" when the value is not set.

React setting reset button; clicking this button will reset the form (the content filled in the form will be emptied)

User name: password:

Text single-line text input box, width defaults to 20 English characters

Auto focus:

Set the default value:

Set the maximum number of characters:

Set the prompt message:

Password password input box, the input content will be displayed in the form of dots; with text, you can also set value, maxlength, etc.

For radio radio buttons, only one option can be selected; when using a set of radio buttons, multiple input tags should set the name attribute and the attribute value of name should be the same; to use this type of tag, you must set the value attribute to tell the server the value of the selected item

Men and women

The setting is selected by default:

Men and women

Checkbox is used to define check boxes, and you can select one or more of them in a set of options. You also need to set the name property, and the value of the name property is the same. You must set value;. If more than one is selected, send multiple values to the server when submitting the form.

Charming, soft, lovely and enchanting

Multiple settings are selected by default:

Charming, soft, lovely and enchanting

File is used to select files for upload. Files to be uploaded need to be manually selected.

Image uses the picture as the submit button

Button sets the clickable button; through the value property sets the text displayed by the button, you can create a click event through the onclick property

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.