form details

One, form

1. The form tag is used to create an HTML form for user input

2. The form can contain input elements, such as text fields, check boxes, radio buttons, submit buttons and so on.

3. The form can also contain menus, textarea, fieldset, legend and label elements.

4. The form is used to transmit data to the server.

Two, form attributes

(A) action attribute

The action attribute specifies where to send the form data when the form is submitted

Property value: url link address

(Two) name attribute

The name attribute specifies the name of the form. The name attribute provides a way to reference the form in the script.

(Three) method attribute

The method attribute specifies the HTTP method (GET or POST) used when submitting the form

1. When to use GET?

The default value of the method attribute is GET, if the submission of the form is passive (such as search engine query) and there is no sensitive information;

When using GET, the form data is submitted to the address bar of the page.

2. When to use post?

The data that can be stored in the address bar is limited. If you want to store more data, you need to use post to store data more securely.

The form is updating data, or contains sensitive information (such as password), preferably post;

Post is more secure, because the data submitted in the address bar of the page is invisible (if you upload more data or upload pictures, you must use post).

(Four) legend element

The element defines the label for the element

Labels can group related elements in the form, and can also draw borders around related form elements.

<form>
 <fieldset>
  <legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
 </fieldset>
</form>

The input element must add a name attribute to define a name, and the background will receive the input data normally;

Third, the use of form description tags

Define annotations for input elements

<label for="wenzi">文字</label>
<input type="text" id='wenz'>

The label element does not present any special effects to the user. However, it improves usability for mouse users.

If you click on the text inside the label element, this control will be triggered, giving the control the focus. When the user selects the label, the browser will automatically turn the focus to the form control related to the label.

The for attribute of the tag should be the same as the id attribute of the related element.

In order to achieve the same effect, there will be another way of writing: for and id attributes are not required;

<label>文字 <input type="text">
</label>

Four, form constraint attributes

(1) required attribute

The required attribute is a boolean attribute, which stipulates that the input field must be filled in before submitting the form. (Required is a new attribute of H5)

Note: The required attribute is applicable to the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.

(Two) placeholder attribute

The placeholder attribute specifies a short prompt message that can describe the expected value of the input field (the prompt text in the input box, the content will not be submitted), such as a sample value or a short description in the expected format.

The prompt defined by the placeholder will be displayed in the input field before the user enters the value.

Note: The placeholder attribute is applicable to the following input types: text, search, url, tel, email, and password.

(Three) value attribute

The value attribute sets the value for the input element. For different input types, the usage of the value attribute is different.

The type types are button, reset, and submit . Define the text displayed on the button ;

The type type is text, password, hidden . Define the initial value (default value ) of the input field ;

The type type is checkbox, radio, image . Define the value associated with the input ;

Note: The value attribute must be set in and.

Note: The value attribute cannot be used together.

(Four) maxlength attribute

The maxlength attribute specifies the maximum length of the input field, calculated as the number of characters.

The maxlength attribute is used in conjunction with or (with input length)

(5) size attribute

The size attribute specifies the visible width of the element in characters.

size limits the length of the form (not recommended, use CSS to set it better)

5. Form access restriction (form disabled)

(1) readonly attribute

The readonly attribute stipulates that the input field is read-only and cannot be entered. You can use the value to set the default value, which can be submitted to the background, but the user cannot modify it.

The read-only field cannot be modified, but the user can still use the tab key to switch to the field, and can also select or copy its text.

The readonly attribute prevents users from modifying the value until certain conditions are met (for example, a check box is selected). Then, you need to use JavaScript to eliminate the readonly value and switch the input field to an editable state.

The readonly attribute can be used with or.

(Two) disabled attribute

The disabled attribute defines that the input element should be disabled (only for viewing, not for submitting to the background)

Disabled input elements are neither available nor clickable. You can set the disabled attribute until some other conditions are met (for example, a check box is selected, etc.). Then, you need to delete the disabled value through JavaScript and switch the value of the input element to available.

Note : The disabled attribute cannot be use together.

Six, commonly used field extension types

value	description
button	Define a clickable button (used to launch a script via JavaScript in most cases).
checkbox	Define the check box.
file	Define input fields and "browse" buttons for file upload.
hidden	Define a hidden input field, although it is hidden, it still exists.
image	Define the image as the submit button.
password	Define the password field. The characters in this field are masked.
radio	Define radio buttons.
reset	Define the reset button. The reset button will clear all data in the form.
submit	Define the submit button. The submit button will send the form data to the server.
text	Define a single-line input field in which the user can enter text. The default width is 20 characters.

H5 new label

value	description
color	Define the color picker
date	Define date control (including year, month, day, excluding time)
datetime	Define date and time controls (including year, month, day, hour, minute, second, fraction of a second, based on UTC time zone)
datetime-local	Define date and time controls (including year, month, day, hour, minute, second, fraction of a second, without time zone)
email	Define fields for e-mail address
month	Define month and year controls (without time zone)
number	Define fields for entering numbers
range	Define controls for entering numbers where the precise value is not important (such as slider controls)
search	Define the text field for entering the search string
tel	Define fields for entering phone numbers
time	Define the control used to enter the time (without time zone)
url	Define the field for entering the URL
week	Define week and year controls (without time zone)

Seven, a large amount of text and lists

(1) Text field

The textarea tag defines a multi-line text input control

An unlimited amount of text can be accommodated in the text field, and the default font of the text is monospaced font (Courier)

The default value in the text area should be placed in a pair of textarea tags

You can use the cols and rows properties to specify the size of the textarea, but a better way is to use the CSS height and width properties

(Two) list box

The select element can create a single selection or multiple selection menu.

The option tag is used to define the available options in the list, that is, list items;

The optgroup tag defines the grouping of list items

 1 <select>
 2   <optgroup label="Swedish Cars">
 3     <option value="volvo">Volvo</option>
 4     <option value="saab">Saab</option>
 5   </optgroup>
 6   <optgroup label="German Cars">
 7     <option value="mercedes">Mercedes</option>
 8     <option value="audi">Audi</option>
 9   </optgroup>
10 </select>

(Three) multiple attributes

The multiple attribute defines multiple selections. The multiple attribute can be set or return whether multiple options can be selected.

Usage of multiple:

Set multiple attribute

selectObject.multiple=true|false

Return multiple attributes

selectObject.multiple

8. Standard opening method of option box

(1) Radio type

Radio radio button, when the user clicks a radio button, the button will become selected, and all other buttons will become unselected.

<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" />
<br /> 女性： <input type="radio" name="Sex" value="female" />
</form>

(2) Checkbox type

<input type="checkbox">A check box is defined. The user needs to select one or several options from a number of given options, and multiple options can be selected at the same time.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car </form>

(Three) checked attribute

The checked attribute is a boolean attribute.

The checked attribute specifies which elements should be pre-selected when the page loads.

The checked attribute applies to and.

Nine, file upload

(1) File type

The file type defines the input field and the "browse" button for file upload

(Two) enctype attribute

The enctype attribute defined in the form tag specifies how the form data should be encoded before being sent to the server.

By default, the form data will be encoded as "application/x-www-form-urlencoded".

In other words, before sending to the server, all characters will be encoded (spaces are converted to "+" plus signs, and special symbols are converted to ASCII HEX values)

Property value:

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

multipart/form-data does not encode characters. This value must be used when using a form that contains a file upload control!

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

<form action="demo-post_enctype.php" method="post" enctype="multipart/form-data"><input type="file" name="fname"><br>
  <input type="submit" value="提交">
</form>

(Three) accept attribute

accept specifies the type of uploaded file, if multiple types can be separated by commas, for example: accept="image/png,image/jpg" (this can upload pictures of png type)

The accept attribute can only be used in conjunction with it. It specifies the types of files that can be submitted through file upload.

Note : Please avoid using this attribute. The file upload should be verified on the server side .

(4) Multiple attributes

File file upload can upload multiple files with multiple attribute;

The multiple attribute specifies that the input field can select multiple values.

If this attribute is used, the field can accept multiple values.

Note : The multiple attribute uses the Champions League and the following types: email and file

10. The use of date in the form

(1) Date type

date Get the date, including year, month and day.

1. Use mix and max to define the start and end time, such as: min=“2030-02-02”

2. You can also use the step attribute to set the step size (you can select it only after a few days)

<input type="date" max='2030-02-02' min='2019-01-01' step='5'>

(Two) datetime type

Define date and time controls to obtain the date and time, including year, month, day, hour, minute, second, and fraction of a second.

(Three) time type

Get the time and define the control used to enter the time (without time zone).

(4) Week type

The week type gets the year and week number

(5) Month type

month type gets year and month

(6) Datetime-local type

datetime-local year month day hour minute second

11. Search form and datalist data list

(1) Search type

The search type can define the search box, but it requires input type=search to have a form with action attribute on the top layer.

(Two) datalist label

The label specifies a list of possible options for the element.

Provide the'auto-complete' feature for the input element. The user can see a drop-down list with pre-defined content. These contents will be the data entered by the user.

Add id to the datalist element, other input elements point to the id of the datalist through the list attribute, thereby binding the datalist element

A pair of option tags is a prompt text, if you don’t want to have a prompt text, you can turn the option into a single tag

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">兼容性不好</option>> <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

Twelve, the form history data automatically prompts autocomplete

autocomplete attribute

There are many default styles and behaviors for type=search. The drop-down box will display historical search records by default, and the display effect will be different on different browsers or devices.

The autocomplete attribute specifies whether the form should enable autocomplete .

Auto-complete allows the browser to predict the input to the field. When the user starts typing in the field, the browser displays the options filled in the field based on the history of the previous input.

Note: Except Opera, other mainstream browsers all support the autocomplete attribute

Note: autocomplete " on " applies to forms , " off " applies to specific input fields, and vice versa.