New elements for forms and forms

New elements for forms and forms

To better use the form, you need to know more about the elements and attributes of the Form. First, let's take a look at the basic understanding of the form.

Basic understanding of forms

<Form> elements are used to collect user input data.

<Input> elements are the most important form elements,There are many types. <input type = "submit"> is the button used to submit a form to the form handler.

<Select> element <option> The element definesDrop-down listOption,

<Textarea> The element defines the text area.

<Button> The element defines the clickable button.

Form attributes

1: Action attributes

The role of the action attribute is to declare where to send form data when a form is submitted. Where to send form data. If this attribute is omitted, the form data is sent to the current webpage.

2: Method Property
The method attribute specifies the HTTP method (GET or POST) used when the form is submitted ):

It is more secure to use post when submitting form data. Because get puts the form data in the URL and submits it. Therefore, do not use get to transmit sensitive information such as passwords. I think post is used to submit data and get data.

3: Name attribute
To be submitted correctly, a name attribute must be set for each input field. Because only the form elements with the name attribute set can pass their values when submitting the form.

4: target attributes

The target attribute specifies where the action URL is opened.

 

New Element attributes of a form allow us to write code more efficiently and conveniently.

New elements and attributes of a form

1: form attributes of elements in a form

In HTML5, you can write the subordinate element in the form anywhere on the page, and specify a form attribute for the element. The attribute value is the id of the form, in this way, you can specify this element to the corresponding form.

<form id="form1"> <input type="text"></form><textarea form="form1"></textarea>

This facilitates writing styles.

2: formaction attribute of elements in the form

In HTML5, The formaction attribute overwrites the action attribute of the form element. Add the formaction attribute for different submit buttons so that the form can be submitted to different pages when you click them. This attribute applies to type = "submit" and type = "image ".

<form action="dizhi.asp">  <input type="submit" formaction="dizhi1.asp" value="dizhi1" />   <input type="submit" formaction="dizhi2.asp" value="dizhi2" /></form>

3: formmethod attribute of elements in the form

In HTML5, you can use the formmethod attribute to specify different submission methods for different form elements.

<form action="dizhi.asp">  <input type="text" name="name"/>  <input type="submit" formaction="dizhi1.asp"  formmethod="post"/>   <input type="submit" formaction="dizhi2.asp"  formmethod="get"/></form>

 

4: formenctype attribute of elements in the form

In HTML5, you can use the formenctype attribute to specify different encoding methods for different form elements.

 

5: formtarget attribute of elements in the form

In HTML5, you can use the formtarget attribute to specify where to open the page to be loaded after the form is submitted.

 

6. autofocus attribute of elements in the form

The cursor focus is automatically obtained when the screen is opened. Only one control on a page can have this attribute.

 

7. required attribute of form elements

The new required attribute in HTML5 can be applied to most input elements. When submitting a form, if the form is empty, submission is not allowed.

 

8: labels attributes of elements in a form

In HTML5, you can define a labels attribute for the form elements that can use tags. The attribute value is a NodeList object, which represents the set of tag elements bound to the element.

<Script type = "text/javascript"> function fun () {var txt = document. getElementById ("txt_name"); var button = document. getElementById ("btn"); var form = document. getElementById ("id1"); if (txt. value. trim () = "") {if (txt. labels. length = 1) {var label = document. createElement ("label"); label. setAttribute ("for", "txt_name"); form. insertBefore (label, button); txt. labels [1]. innerHTML = "Enter name"; txtName, labels [1]. setAttribute ("style", "font-size: 9px; color: # fff");} else if (txt. labels. length> 1) form. removeChild (txt. labels [1]) ;}}</script> <form id = "id1"> <label for = "txt_name"> Name: </label> <input id = "txt_name"> <input type = "button" id = "btn" value = "verify" onClick = "fun () "/> </form>

9: Label control attributes

In HTML5, you can place a form element inside a label and access the form element through the control attribute of the label.

<Script type = "text/javascript"> function set () {var lbl = document. getElementById ("lbl"); var txt = lbl. control; txt. value = "0556 ";} </script> <form> <label id = "lbl"> <input id = "txt" maxlength = "4"> </label> <input type = "button" value = "Restore Default Value" onClick = "set () "> </form>

10: placeholder attribute of the text box

Placeholder indicates the input prompt displayed when the text box is in the unentered status. When the text box is in the unentered status and does not obtain the cursor focus, the entered prompt text is displayed in a fuzzy manner. You can also use css to control the text style.

Input:-webkit-input-placeholder {color: #0F0;} <input type = "text" placeholder = "input prompt">

 

 

11: list attribute of the text box

In HTML5, set a list attribute for the required input tag, place a pair of datalist labels in any location, and give the datalist tag an id, which is consistent with the list property value I.

Place the list items under the datalist label, and each list item is represented by the option meta tag. In this way, you can create a drop-down box. When the value you need is not in the drop-down list, you can enter it by yourself. The content of the datalist label is not displayed. The following list is displayed only when the focus is obtained in the text box.

<Form action = ""> <input type = "text" list = "list1" name = "text" autocomplete = "on"/> <input type = "submit"/> </form> <datalist id = "list1"> <option value = "exercise"> exercise </option> <option value = "Exercise 1"> Exercise 1 </option> <option value = "Exercise 2"> Exercise 2 </option> </datalist>

12: autocomplete attribute of the text box

Auxiliary input attributes. autocomplete has three values: "on", "off", and "default" (not specified ). If this parameter is not specified, the default value of the browser is used.

The usage is as follows. When you enter "A paragraph" in the text box and click "Submit", if "A" is entered in the text box again, a message "A paragraph" is displayed ".

 

13: patten attribute of the text box

It is equal to using regular expressions in the html section to determine whether the value input meets the requirements.
<Input type = "text" pattern = "^ [0-9] * $">

 

14: selectionDirection attribute of the text box

For the input and textarea elements, you can obtain whether the selected elements are positively or reversely selected. Forward selection value or not selected as forward, reverse is backward.

 

15: indeterminate attribute of the check box

In H5, you can use the indeterminate attribute for this element in js to indicate the "not explicitly selected" Status of the check box. Assign values to this attribute using Boolean values in js. When judging the status selected by the check box in js Code, you must first determine the indeterminate attribute and then determine the checked attribute value.

 

16. The height and width attributes of the image submit button

Image button for form submission

<Input type = "image" src = "../Photo/New Folder/t0148fb99e9bb5edfc2.jpg" width = "25" height = "25">

 

17. maxlength and wrap attributes of the textarea Element

Maxlength: specifies the maximum input value of the textarea element.
Wrap: the attribute values are soft and hard. When the attribute is hard, when the row is automatically changed because the text is out of the specified range without the Enter key, a line break is added when the form is submitted. Soft does not add line breaks when submitting.

 

18: added many types of input in HTML5.

For example, the URL type and email type require a certain format during input, and the system automatically determines whether the input conforms to the format.

Date type, time type, is used to input time.

The datetime-local type is used to check the local date and time, and the validity of the input date is checked during submission.

The text box for months.

The week type is used to enter the text box for weeks.

Number type.

Range is a text box that allows you to enter only a number in a range.

The search type is a text box specifically used to enter keywords for search.

The Tel type is used to enter the professional text box of the phone.

The color type is used to select a color. The color selector is automatically displayed.

 

 

 

19: attribute step attribute of newly added elements of the date and time type, valueAsDate attribute

Step attribute: it is a limitation on the selection of the specified property value. The stride in which the value of the control element is increased or decreased.

ValueAsDate attribute: Used to set or obtain the UTC date and time.

 

 

-- Refer to the authoritative guide for HTML5 and css3

Hope to make progress together.