Detailed explanation of new attributes of html5 form

In H5, the form can be placed anywhere on the page, and then a form attribute is specified for the element. The attribute value is the ID of the form.

 <FORM ID = TESTFORM> <input Type = Text> </Form> <Textarea Form = Testform> </Textarea>

In H4, the form of submission of forms

 <FORM ACTION = 1.jsp> </Form>

Submit the entire form

In H5, you can add the JSP page submitted to each attribute of the form

 <FORM ACTION = 1.jsp> <input Type = Submit Action = 1-1.JSP> Submit to 1 page </Form> <input Type = Submit Action = 1-2.jsp> Submit to 2 page </form> <input type = submit action = 1-3.jsp> Submit to 3 pages </form> </form>

You can specify the submission method of each element of the form

 <FORM ACTION = 1.jsp> <input Type = Submit Action = 1-1.JSP FormMethod = Post> Submit to 1 page, post submission method </form> <input type = 1-2.jsp FormmetHod = Get> Submit to 2 pages, GET submission method </form> </form>

Same as above, the role and every element, the code is slightly

Same as above, the role and every element, the code is slightly

Add the autofocus attribute to the text box, the selection box, and the button control, and the focus will be automatically obtained when the screen is opened.

 <input type = text action = 1-3.jsp autofocus> Submit to 3 pages </Form>

There is only one control on a page that has an autofocus property, which cannot be abused

It can be used in most input elements. If the input value is empty, it is not allowed to be submitted. The shower display text information indicates that the user must enter the content.

Can add a LABLS attribute to all elements of the form, the attribute value is a nodelist object, which represents a collection of label elements bound to the element.

 <script type = Text/Javascript> Window.Onload = Function () {Var Text = Document.GetelementByid ('Text'); VAR BTN = Document.GetelementByid ('B tn '); VAR FORM = DOCUMENT.GELEMENTBYID (' Form ' );; = Function () {if (text.value.trim () ==) {//alert_labels.Length) if (text.labels.Length == 1) {var label = document. CreateElement (label); label.Setattribute (for, text); form.insertBeFore (label, btn); text.labels [1] .innerhtml = Please enter the name; text.labels [1] .settattribut E (style, font-size : 9px; color: red);}} else if (text.labels.length> 1) form.removechild (text.labels [1]); For = Text> Name: </Label> <input ID = Text> <input ID = BTN Type = Button Value = Verification> </Form>

When the user does not enter any value, click the verification, and the label element will be added to the text box. The label element is to enter the name; when the user has input in the text box, the text of the text is to enter the name. Essence

You can place a table unit element inside the label and access the table element through the Control property of the tag.

 <script Type = Text/Javascript> Function SetValue () {console.log (1); VAR Label = DOCUMENT.GELEMENTBYID (label); VAR Textbox = label.control; xtbox.value = 231456} </script> <FORM> <Label ID = Label> Zip Code: <input ID = txt_zip maxlength = 6> <small> Please enter 6 digits </Small> </label> <input type = Button = set the default value onCLICLK = SETVALUE () > << /Form>

Open the page in the tourist, click Set the default value button, and 231456 will be displayed in the text box.

Enter the prompt information (gray) when the text box is in the choice state

 <input type = Text Palceholder = hahah>

Combined with the new DataList element of H5, the production prompt box

 text: <input type = text name = greeting list = greetings> <!-Use style = display: none; set the dataList element to no display-> <datalist id = display: none> option value = You are people> You are people </option> <option value = You are a pig> You are a pig </option> <option value = You are a dog> You are a dog </option> </datalist>

When you enter you in the text box, there will be three columns below to remind you that you are people, you are a pig, you are a dog. If there is no keyword

AutoComplete has three, off, (not specified). When specified, use the default value of the tourist. The method of use is as follows

 <input type = text name = greeting list = greetings autocomplete = On>

When you enter the text box if you are a person click to submit, return to the previous page, and then enter me in the text box, and you will prompt me to be a person.

It is equivalent to whether the input value of the regular expression judgment in the HTML part meets the requirements.

Please enter the content: <input type = Text Pattern = [0-9] [az] {3}>

This segment of the code requires to enter three numeric three capital letters. If the input is incorrect, please keep it consistent with the required content (Google).

For the Text and Textarea elements of INPUT, when the user selects part of the text in these two elements, you can use the element to get the choice direction.

 <script type = Text/Javascript> Function AlertSelectionDirection () {var control = document.forms [0] ['text']; VAR DIRECTION = Tion; Alert (Direction);} </script> <FORM> <input Type = Text name = Text> <input Type = Button Value = Remember me onClick = AlertSelectionDirection ()> </Form>

For the check box, in the past, only selection and non -selection status. In HTML5, the index attribute can be used in the JS in JS to indicate that the check box has not been clearly selected.

 <script> var cb = document.GetelementByid (CB); // Set the attribute of Indeterminate to true cb.indeterminate = TRUE; </script> <input Type = CHECKBOX INDETERMINATE ID = CB> Indeterminate Properties Test

• height: Specify the height of the picture in the picture button;
• width: Specify the width of the picture in the picture button;

 <input type = Image SRC = IMG/2.png Width = 23 Height = 23>

• MaxLength: Set up using an integer value to limit the number of text that can be input in the Textarea element.
• wrap: You can specify the attribute value to soft and Hard. When the attribute is Hard, when the text is not used in a row of specified range and automatically changing the line, the form will be added to the change line when submitting the form.

The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. At the same time, I also hope that more support VEVB Wulin.com!