Comprehensively organize elements related to form forms!

HTML original forms and form controls

form elements

elements will not generate visual parts. You can pin core content such as id, class, style, etc., and also specify event attributes such as onclick.

In addition, it also includes action (specifies the address to which the form jumps when the button is confirmed in the stand-alone table), method (specifies what type of request is sent when submitting the form, the value can be get or post ), enctype (specify the character set used to encode the expression content), name (specify the unique name of the form), target (specify which method is applicable to open the target URL). [Recommended: HTML video tutorial]

input element

element is the most versatile among form control elements , the following are produced by several input elements:

Password input box:

<input id="password" name="password" style="password" />

Hidden field:

<input id="hidden" name="hidden" style="hidden" />

Radio button box

<input id="radio" name="radio" style="radio" />

Check box

<input id="checkbox" name="checkbox" style="checkbox" />

Image domain

<input id="image" name="image" style="image" />

File upload domain

<input id="file" name="file" style="file" />

Submit button

<input id="submit" name="submit" style="submit" />

Reset button

<input id="reset" name="reset" style="reset	" />

No action button

<input id="button" name="buton" style="button" />

Some focus attributes

checked: Set whether the radio button and check box are initially selected. .
disabled: Use this element when setting the first load.
maxlength: This attribute is a number that specifies the maximum number allowed to be entered in the text box.
readonly: The value in the specified text box is not allowed to be modified by the user (can be modified using js script). This attribute is an attribute that supports boolean values, indicating that the value of the element is read-only.
size: The value of this attribute is a number that specifies the width of the calcium element.
src: Specify the URL of the image displayed in the image field.
width: Specify the width of the image displayed in the image field.
heigeht: Specify the height of the image displayed in the image field.

label element

The label element can specify core attributes such as id, class, style, etc., and can also specify event attributes such as onclick. In addition, you can also specify a for attribute, which specifies which form control the label is associated with. The usage is for="", and the id of the related control is in the quotation marks.

Button element

element is used to define a button. You can specify core familiarity such as id, class, style, etc., and you can also define event attributes such as onclick. In addition, you can also specify the following elements.

disabled: Specifies whether to disable this button.
name: Specify a unique name for the button. The attribute name should be consistent with the id.
type: Specifies the type of button this button belongs to. The attribute value can only be one of button, reset or submit.
value: Specify the initial value of the button. Can be changed via js script.

select and option elements

elements are used to create list boxes or drop-down menus. The calcium element must be combined with the element. Each The element represents a list item or menu item.
The element can specify core attributes such as id, class, style, etc. This element can specify the onchange event attribute - when the selected option in the list box or drop-down list item changes, onchange is triggered. event.

In addition, the element can also specify the following attributes.

disabled: Set to disable the list box and drop-down menu. The value of this attribute can only be disabled or the attribute value is omitted.
multiple: Set whether the list box and drop-down menu allow multiple selections. Once set to allow multiple selections, the element will automatically generate a list box.
size: Specify how many list items the list box and drop-down menu can implement at the same time. Once set to allow multiple selections, the element will automatically generate a list box.

In the element, only the following two sub-elements can be included.

: used to define list items or menu items. This element can only contain text content as the text for this option.
: used to define list items or menu line groups. This element can only contain child elements.

The element can specify core elements such as id, class, style, etc. It can also specify event attributes such as onclick.

In addition, you can also define the following elements.

disabled: Specifies to disable this option. The value of this attribute can only be disabled.
selected: Specifies whether the initial state of the flow box is selected. The value of this attribute can only be selected.
value: Specify the request parameter value corresponding to this option.

The element can specify core attributes such as id, class, style, etc. It can also specify event response attributes such as onclick. In addition, there are the following attributes.

label: Specify the label of this option group. This attribute is required.
disabled: Set to disable all options in this option group. The attribute value can only be disabled or omitted.

HTML5 enhanced textarea

element is used to generate multi-line text areas. You can specify core elements such as id, class, style, etc., and you can also specify event attributes such as onclick. Due to the special nature of textarea, it can receive user input, and users can select text in the text area. Therefore, you can also specify two attributes, onselect and onchange, which apply to the time when the text area is selected and when the text is modified. In addition to this, this element can also specify the following elements.

cols: Specifies the width of the text field, which is required.
rows: Specifies the height of the text, which is required.
disabled: Specifies that this text field is disabled. The attribute value can only be disabled.
readonly: The specified text field is read-only. The value of this attribute can only be readonly.
maxlength: Set the maximum number of characters that can be entered in the multi-line text field.
wrap: Specify whether to add line breaks to multi-line text fields. This attribute supports two attribute values: soft and hard. If the attribute value is set to hard, the cols attribute must be specified. If the input characters exceed the width specified by cols and cause the text to wrap, then the multi-line text field will automatically add a line break at the line break when the form is submitted.

fieldset and legend elements

elements can be used to group form elements within a form. , this element can specify core elements such as id, class, style, etc., and can also specify the following three attributes.

name: Specify the name of the element.
form: The attribute value of this attribute must be an id with a valid element, which is used to specify that the element belongs to the form.
disabled: This attribute is used to disable the form element. This property is a property that supports boolean values.

HTML's new form attributes

form's form attributes

html5 has added form attributes to all form controls, so it is more flexible when defining form controls on the page , you can prevent and arrange form controls at will, which provides greater flexibility in page layout.

formaction attribute

html5 In order to deal with the problem that the same form contains both registration and login buttons, formaction can be specified for sumit, reset, and image. This attribute can dynamically change the form Submit to a different URL.

formxxxx attribute

The formxxxx attribute is similar to the formaction attribute. For sumit, reset, and image, you can specify formenctype, formmethod, formtarget and other attributes, among which:

formenctype : This attribute allows the button to dynamically change to the enctype attribute.
formmethod: This attribute allows the button to dynamically become a method attribute.
formtarget: This attribute allows the button to dynamically become the target attribute.

autofocus attribute

This is a very commonly used attribute. Its function is to automatically focus on the corresponding position when opening a web page. The usage is to add it to the corresponding code, such as: <input type="password" name="name" autofocus />The function of autofocus in this code is to automatically focus on the page when opening the web page. Password box.

placeholder attribute

This attribute is also very commonly used. Its function is to give corresponding prompts in the text box where the user inputs data, such as: <input type="text " name="username" palceholder="Please enter the user name" />;The role of the palceholder in this code is to display please enter the user name when the user has not entered data in the text box, making the page more user-friendly. .

list attribute

This attribute is also very practical. Before the html5 specification, there was no component similar to ComboBox in the html form attribute. The list attribute of html5 just makes up for this shortcoming. The value of the list attribute should be the ID of a component, which means that the list must be used in conjunction with the element.

The element is equivalent to an invisible element, used to generate a hidden drop-down menu. can contain the same child elements as the element. This element is used in conjunction with the specified element with the list attribute. When the text box of the list attribute is double-clicked, the drop-down menu generated by is displayed.

autocomplete attribute

This option is used to control whether to automatically display the previous filling history when clicking on the text box. The browser activates this function by default. This attribute supports two attribute values:

on: Turn on autocomplete, and a drop-down menu will be displayed below the text box.
off: Turn off autocomplete, the drop-down menu will not be displayed below the text box.

The control attribute of label

html5 provides a control attribute for the element, which is used to access the element associated with it in the javascript script Form elements.

The labels attribute in the form

There is a one-to-many relationship between the form element and the element, and the element obtains his association The form element applies the control attribute, and the form element obtains the element associated with it and applies the labels attribute.

The selectionDirection attribute in the text box

html5 adds a new selectionDirection read-only attribute for single-line text boxes and multi-line text fields. This attribute is used to return the text direction in the text box.

• When the user selects text in the forward direction, the return value is forward
• When the user selects text in the reverse direction, the return value is backward
• When the user does not select text, the return value is forward The value is the last selection made by the user

HTML5 new form element

Function-rich input element

HTML5 is the element The following new possible types have been added.

color: Generate a color selector, the value of value is a color value in the form #xxxxxx.
date: Generate a date picker.
time: Generate a time selector.
datetime-local: Generate a local date and time selector.
week: Generate a text box for the user to select the week.
month: Life is a month selector.
max: The maximum value of the specified date and time.
step: Specify the step size of date and time.
email: Generate an E-mail input box, and the browser will automatically check whether the entered E-mail conforms to the format.

multiple: This attribute supports boolean type. If this attribute value is specified, it means that multiple email addresses are allowed to be entered, separated by English commas.

tel: Generate a text box for entering a phone number.
ur: Generate a text box for inputting a URL, and the browser will automatically check whether the entered URL conforms to the format.
number: Generate a text box that can only enter numbers.

min: The minimum value of the specified value.
max: The maximum value of the specified value.
step: Specify the step size of the number.

range: Generate a drag bar with the following attributes:

min: The minimum value of the drag bar.
max: The maximum value of the drag bar.
step: Specify the step size of the drag bar.

search: Generate a text box specifically for entering search keywords.

output element

HTML5 adds a new form control, which is used to display output. In addition to specifying core attributes such as id, class, and style, this element can also specify the following attributes.

for: This attribute will display the value of that element or those elements when braking the element.

meter element

HTML5 also adds a new element, which represents a counting meter with known maximum and minimum values. In addition to defining core features such as id, class, style, etc., this element can also define the following attributes.

value: Specify the current value of the counting instrument. The default is 0.
min: Specifies the minimum value of the counting instrument, the default is 0.
max: Specifies the maximum value of the counting instrument. The default is 1.
low: Specifies the minimum value of the specified range of the counting instrument, which must be greater than or equal to the value of min.
high: Specify the maximum value of the specified range of the counting instrument, which must be less than or equal to the value of max.
optimum: Specify the optimal value of the effective range of the counting instrument.

progress

element is used to represent a progress bar. In addition to specifying core attributes such as id, class, and style, this element can also specify the following attributes.
max: Specifies the value when the progress bar is completed.
value: Specify the current completed progress value.

HTML5’s new client-side validation

Use validation attributes to perform validation

HTML5 adds the following validation attributes to form controls.

required: This attribute specifies that the form control must be filled in.
pattern: This attribute specifies that the value of the form control must conform to the specified regular expression.
min, max, step: These three attributes are only valid for elements of numerical type and date type. This element must be between min~max and conform to step step length.

Call the checkValidity method for verification

• If the form returns true by calling the checkValidity() method, it means that the input of all form elements in the form is valid

• If the form object calls the checkValidity() method and returns true, it means that all the form elements of the expression pass the input verification.

Turn off verification

• Add the novalidate attribute to the element, which is an attribute that supports boolean values.

• Set the formnovalidate attribute for submit and button elements. When the user submits the form through the submit button, the form will turn off the verification function.

The above is the detailed content of Comprehensively organize elements related to form forms!. For more information, please follow other related articles on the PHP Chinese website!