html5 custom form_Motor node java college finishing

There are a variety of different input boxes and buttons in HTML5. It is achieved by setting the Type attribute of the INPUT element. In addition, HTML5 also supports the selection list, multi -line input box, etc. These elements have their own purpose and attributes. The following introduces one by one.

Type is a Text that the INPUT element is a single -line text box, which is the default manifestation of the INPUT element. The single -line text input box supports the following attribute settings.

The maxlength attribute sets the maximum number of characters that users can enter; the size attribute sets the number of characters that the text box can display.

 <FORM METHOD = Post Action = http:// Titan: 8080/Form> <p> <Label for = name> name: <input maxLENTH = 10 ID = name name = name/> </p> </p> P> <Label for = City> City: <input size = 10 ID = city name = City/> </p> <p> <Label for = FAVE> FRUIT: <input size = 10 maxlenth = 10 10 ID = Fave name = Fave/> </Label> </p> <Button Type = Submit> Submit Vote </Button> </Form>

Value attributes can specify a default value for the input box; the Placeholder property can set a segment of a prompt text to tell users what type of data should be input.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input Placeholder = Your name id = name name/> </p> <p> <p> <Label for = City> City: <input Placeholder = where you live id = city name = city/> </p> <p> <label for = Fave> FAVE> <input Value = Apple ID = Fave name = Fave/> </Label> </p> <Button Type = Submit> Submit Vote </Button> </Form>

The effect in chrome is as follows:

When resetting the form with Button element, the browser will restore the positioning prompts and default values ​​in the text box.

The list attribute can be set to the ID attribute value of a DataList element so that the user can choose in a list specified by the DataList element. The DataList element is newly added in HTML5 to provide a batch of value to help users enter the required data.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input Placeholder = Your name id = name name/> </p> <p> <p> <Label For = City> City: <input Placeholder = Where You Live ID = City Name = City/> </P> <p> <Label for = Fave> ST ID = Fave name = Fave/> </Label> </p> <Button Type = Submit> Submit Vote </Button> </Form> <DataList ID = FRUITLIST> <option value = Apples Label = LOVELY A pples/> < option value = oranges> Refreshing oranges </option> <option value = cherries/> </datalist>

Each Option in the DataList element represents a value that can be selected by a user. The effect in Chrome is as follows:

The readonly attribute indicates that the text box is read only, the DisableD attribute indicates that it cannot be edited, and there are differences in appearance performance.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <p> <Label for = City> City: <input value = BOSTON Readonly ID = City name = City/> </p> <p> <Label for = FAVE> FRUIT: <input Value = Apple ID = Fave name = Fave/> </Label> </p> <Button Type = Submit> Submit Vote </Button> </Form>

The effect in chrome is as follows:

The form with the Disabled property is set to gray. The user cannot edit the text in it, and the content of the form will not be submitted to the server; the form that sets the ReadOnly property will prevent the content of the user's editing text box, but it does not affect the effect The appearance, and the content will be sent to the server.

The INPUT element of the Type attribute is Password is used to enter the password. The INPUT element of this attribute supports the following attributes:

1) MaxLength: The maximum number of characters that users can enter in the password box;

2) Pattern: used to enter the regular expression of verification;

3) Placeholder: prompt on the required data type;

4) Readonly: Set the password box to read only;

5) Required: The user must enter a value, otherwise it cannot pass the input verification;

6) SIZE: Set its width through the number of characters visible in the specified password box;

7) Value: Set the initial password value.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input Value = Apples ID = FAVE NAME = FAVE/</Label> </P> <Button Type = Submit> Submit Vote </Button> </Form>

The characters entered by the user are displayed as*in the password box, but it should be noted that when submitting the form, the server receives a clear -text password. For a website and application system that is vital to be safe, you should consider using SSL/HTTPS to the browser and Communication content between the server is encrypted.

The Type property is set to Submit, Reset, and Button to generate a button like Button element.

1) Submit: generate the button for submitting forms, support attributes: FormAction, FormenCTYPE, FormMethod, FormTarget, and Formnovalidate. These attributes are the same as the same name attributes of Button elements.

2) RESET: generate the button of the fixed form;

3) Button: Generate ordinary buttons without any operation.

The description text of the button in 3 is specified through the value attribute.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input Value = Apples ID = FAVE NAME = FAVE/</Label> </P> <input Type = Submit Value = Submit Vote/> <input Type = Reset Value = Resype = B Utton value = My Button/ > </form>

The effect in chrome is as follows:

The difference between generating button and using Button element with anput element is that the latter can be used to display the text containing text. However, because each browser has the same processing method of INPUT elements, and some older browsers (such as IE6) cannot properly handle the Button element, many websites are more inclined to use INPUT elements.

The INPUT element of the Type attribute only accepts value. Support attributes include:

1) List: Specify the DataList element that provides the recommended value in the text box, and its value is the ID value of the DataList element;

2) min: set the minimum value;

3) MAX: Set the maximum value;

4) Readonly: Read only;

5) Required: It means that the user must enter a value;

6) STEP: The step of adjusting the value up and down;

7) Value: The initial value of the specified element.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input Value = Apples ID = FAVE NAME = FAVE/> </Label> </P> <p> <Label for = Price> $ Per Unit in your area: <input type = number step = 1 min = 0 max = 100 Value = 1 ID = Price name = Price/> </Label> </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

Using the INPUT element with the Type attribute to Range, users can only use it to select a numerical value within the scope specified first. This type of INPUT element supports the same as Number.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input Value = Apples ID = FAVE NAME = FAVE/</Label> </P> <p> <Label for = Price> $ Per Unit in your area: 1 <input type = Range Step = 1 min = 0 max = 100 value = 1 id = price name = price/100 </label> </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

The Type attribute is checkbox to represent the check box. The support attributes are as follows:

1) Checked: whether to choose by default;

2) Required: Indicates that the user must check the check box;

3) Value: Set the data value submitted to the server, default.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input Value = Apples ID = FAVE NAME = FAVE/</Label> </P> <p> <Label for = VEGGIE> Are You Vegetarian: <input Type = Checkbox ID = Veggie = Veggie/> Veg etarian </label> </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

Note that when using Checkbox, the check box is sent to the server only when the check box is submitted.

The INPUT element of the Type attribute can be used to generate a set of single -choice buttons. The supported attributes are the same as Checkbox. Each Radio represents an option, and the same group of Radio uses the same name. The single -selection button group is suitable for scenes with fewer options.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/> </p> <p> d> vote for your favorite FRUIT </Legend> <Label for = Apples> <input Type = Radio Check Value = Apples ID = Apples name = Fave/> Apples </label> <Label for = Orange> <input Type = Radio Value = Oranges ID = Orange name = Fave/> Orange </Label> <Label for = Cherries> <input Type = Radio Value = Cherries ID = Cherries name = Fave/> </Label> </fieldSet> </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

Type attribute value Email, Tel, and URL correspond to the email address, phone number and URL, respectively. The supported attributes include:

1) List: Specify the DataList element that provides the recommended value in the text box, and its value is the ID value of the DataList element;

2) MaxLength: the maximum number of input characters;

3) Pattern: Specify the regular expression for verifying the input;

4) Placeholder: Specify a prompt on the required data type;

5) Readonly: Read the text box and read only;

6) Required: indicates that the user must enter a value;

7) SIZE: Visible number of characters;

8) Value: The initial value of the specified element.

Email also supports Multiple attributes, indicating that multiple email addresses can be accepted.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = password> Password: <input type = password placeholder = min 6 character = password name = password/> </p> <p> <label = email = email > Email: <input Type = Email [email protected] ID = Email name = Email/> </p> <p> <p> <Label for = Tel> Tel: <input type = Tel Placeholder = (xxx) -xxx- xxxx id = tel name = tel/> </label> </p> <p> <label for = url> your homepage: <input type = url id = url name = url/> </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

Some types of input date and time are added to HTML5, including:

1) DateTime: Get the world date and time, including time zone information;

2) DateTime-Local: Get the local date and time, does not include time zone information;

3) Date: Get the local date, without time and time zone information;

4) MONTH: Get the annual and monthly information, without day, time, and time zone information;

5) Time: Get time;

6) Week: Get the current week.

The additional attributes supported by the date and time input element include:

1) List: Specify the DataList element that provides the recommended value in the text box, and its value is the ID value of the DataList element;

2) min: set the minimum value;

3) MAX: Set the maximum value;

4) Readonly: Read only;

5) Required: The user must enter a value, otherwise it cannot pass the input verification;

6) STEP: The step of adjusting the value up and down;

7) Value: The initial value of the specified element.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input value=Apples id=fave name=fave/></label></p> <p><label for=lastbuy>When did you last buy: <input type=date id=lastbuy name=lastbuy/></label > </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

At present, the date and time input box is not well supported in most browsers. Therefore, it is best to use the calendar selection tool provided by the mainstream JavaScript library.

The Type attribute is color selectioner, and the color value is represented in the format of 7 characters: starting with#, and the next three two sixteen advances, which represent the values ​​of the three primary colors of red, green, and blue, such as the value of red, green, and blue, such as the values ​​of the three primary colors of red, green, and blue, such as #Ff1234.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <p> <Label for = name> name: <input value = adam disabled id = name name/> </p> <p> <Label for = Password> Password: <input type = password Placeholder = min 6 character = password name = password/</p> <p> <p> <Label = Fave> Fruit: <input Value = Apples ID = FAVE NAME = FAVE/</Label> </P> <p> <Label for = COLOR> COLOR: <input Type = COLOR NAME = COLOR/> </p> </P. > <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

Note that most browsers have not provided special support for this INPUT element.

The Hidden -type INPUT element can be used to hide a data item and send it to the server when submitting the form (usually to use this function).

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <input Type = Hidden name = RecordId Value = 1234/<p> <Label for = name> name: <input value = Adam disabled id = name name = name/> </label> </p> <p> <Label for = password> Password: <input type = password Placeholder = min 6 charals id = password = password/> </lab El> </p> <p> <p> <Label for = Fave> FRUIT: <input value = Apples ID = FAVE NAME = FAVE/> </P> </P> <input Type = Submit Value = Submit Vote/> </Form>

The button generated by the IMAGE type input element is displayed as an icon, and the form is submitted after clicking. Support attributes include:

1) ALT: Provide element explanation text, which is useful for users who need to use the disabled assistance technology;

2) FormAction: Same button element;

3) Formeenctype: Same Button element;

4) FormMethod: Same Button element;

5) FormTarget: Same Button element;

6) Formnovalidate: Same button element;

7) Height: Set the height of images in pixels;

8) SRC: Specify the URL of the image to be displayed;

9) Width: Set the width of the image in the pixel;

 <FORM METHOD = Post Action = http: // Titan: 8080/Form> <input Type = Hidden name = RecordId Value = 1234/<p> <Label for = name> name: <input value = Adam disabled id = name name = name/> </label> </p> <p> <Label for = password> Password: <input type = password Placeholder = min 6 charals id = password = password/> </lab El> </p> <p> <p> <Label for = Fave> FRUIT: <input value = Apples ID = FAVE NAME = FAVE/> </P> </P> <input Type = Image SRC = Accept.png name = Submit/> </Form "

Click the image button to submit the form. The submitted data will contain the coordinate information of the click position. Therefore, the different areas in the image can represent different operations, and then respond accordingly according to the user's click position on the image.

The File -type INPUT element is used to upload files, and the file can be uploaded to the server when submitting the form. Support attributes include:

1) Accept: Specify the type of accept. Definition of MIME type, refer to RFC 2046 (http://tools.ies.org/html/rfc2046);

2) Multiple: Set this attribute to upload multiple files at one time;

3) Required: The user must enter a value.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form Enctype = Multipart/Form-Data> <p> <Label for = name> name: <input value = adam disabled id = name na me = name/> < /label> </p> <p> <Label for = password> password: <input type = password plants = min 6 character = password name = password/> </p> <p> <Lab el for = Fave> FRUIT: <input value = Apples ID = Fave name = Fave/> </p> <p> <input type = file name = Filedata/> </p> <input type = submit value = Submit vote/> </form>

Note that the form code type can be uploaded when Multipart/Form-Data can be uploaded. The effect in chrome is as follows:

Selet element is used to generate a list of options, which is more compact than the Radiiiiobutton -type input element and more suitable for more options. The attribute supported by this element includes:

1) name: the name of the list;

2) Disabled: Disable the drop -down list;

3) FORM: one or more forms belonging to the text area;

4) Autofocus: The text area automatically gets the focus after the page is loaded;

5) Required: must be filled;

6) SIZE: The number of options can be seen in the drop -down list;

7) Multiple: You can choose multiple options.

SELECT element default is a single -selection drop -down list

 <FORM METHOD = Post Action = http: // Titan: 8080/Form Enctype = Multipart/Form-Data> <p> <Label for = name> name: <input value = adam disabled id = name na me = name/> < /label> </p> <p> <Label for = password> password: <input type = password plants = min 6 character = password name = password/> </p> <p> <Lab el for = Fave> Favorite FRUIT: <select ID = FAVE NAME = FAVE> <Option Valu = Apples Selected Label = Apples> Apples </option> <option value = Orange = Orange > Oranges </option> <option value = Cherries Label = Cherries> Cherries </option> <option value = pears label = pears> pears> </option> </select> </p> <input type = submit value = submit vote/> m>

The effect in chrome is as follows:

After setting SIZE attributes and Multiple attributes for the list, it becomes a checkbox.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form Enctype = Multipart/Form-Data> <p> <Label for = name> name: <input value = adam disabled id = name na me = name/> < /label> </p> <p> <Label for = password> password: <input type = password plants = min 6 character = password name = password/> </p> <p> <Lab el for = Fave> Favorite FRUIT: <select ID = FAVE NAME = FAVE SIZE = 5 Multiple> <option value = Apples selectd label = Apples> Apples </option> <option> ES Label = Orange> Orange </option> <option Valu = Cherries Label = Cherries> Cherries </option> <option value = Pears Label = Pears> Pears </option> </select> </p> <input type = Submit value = Submit vote/> < /Form>

Press the CTRL key when you click the option to select multiple options. The effect in chrome is as follows:

Optgroup elements can be used to establish a certain structure in the content of the Select element. The attributes supported by this element include:

1) Label: It is used to provide a small title for the entire set of options;

2) Disabled: Any options in the group in the group.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form Enctype = Multipart/Form-Data> <p> <Label for = name> name: <input value = adam disabled id = name na me = name/> < /label> </p> <p> <Label for = password> password: <input type = password plants = min 6 character = password name = password/> </p> <p> <Lab el for = Fave> Favorite FRUIT: <select ID = FAVE NAME = FAVE> <Optgroup Label = Top Choices> <Option Valu = Apples Selected Label = Apples> Apples </option> ION VALU = ORANGES LABEL = ORANGES> Orange </option > </Optgroup> <optgroup Label = OTHERS> <Option Valu = Cherries Label = Cherries> Cherries </option> <option value = pears label = pears> pears </option> TGROUP> </Select> </label > </p> <input type = submit value = submit vote/> </form>

The effect in chrome is as follows:

Optgroup elements only play an organizational role, and users cannot choose it as an option.

Textarea element generates multi -line text boxes, and users can enter multi -line text in it. Including attributes include:

1) Autofocus: The text area automatically gets the focus after the page is loaded;

2) COLS: visible width, integer;

3) Disabled: Disable this text area;

4) FORM: one or more forms belonging to the text area;

5) MaxLength: the maximum number of characters in the text area;

6) name: the name of the text area;

7) Placeholder: a short reminder of the expected value of the text area;

8) Readonly: The text area is read only;

9) Required: The text area is necessary;

10) ROWS: The number of visible lines in the text area, integer;

11) Wrap: How to change the text in the text area, including: Soft (default). When submitting the form, the text in the text area does not change; When using this value, the COLS attribute must be specified.

 <FORM METHOD = Post Action = http: // Titan: 8080/Form Enctype = Multipart/Form-Data> <p> <Label for = name> name: <input value = adam disabled id = name na me = name/> < /label> </p> <p> <Label for = password> password: <input type = password plants = min 6 character = password name = password/> </p> <p> <Lab el for = Fave> Favorite FRUIT: <select ID = FAVE NAME = FAVE> <Optgroup Label = Top Choices> <Option Valu = Apples Selected Label = Apples> Apples </option> ION VALU = ORANGES LABEL = ORANGES> Orange </option > </Optgroup> <optgroup Label = OTHERS> <Option Valu = Cherries Label = Cherries> Cherries </option> <option value = pears label = pears> pears </option> TGROUP> </Select> </label > </p> <p> <textAREA COLS = 20 ROWS = 5 Wrap = Hard ID = Story Name = Story> Tell us why this is your favorait </textarea> </p> <input type = submit va lue = submit Vote/> </form>

The effect in chrome is as follows:

Output element represents the result of calculation. Support attributes include:

1) For: one or more elements related to the output domain, separate in the middle space;

2) FORM: one or more forms of the input field;

3) Name: The only name of the object (used when the form is submitted).

 <FORM ONSUBMIT = RETURN FALSE Onput = Res.Value = Quant.Valueasnumber * Price.valueasnumber> <FieldSet> <legend> Price Calculator </Legend> T TYPE = Number Placeholder = Quantity ID = Quant name = Quant/> <input Type = NUMBER PLACEHOLDER = Price ID = Price Name = Price/> = <Output For = Quant name name = res/> </Form>

The time system of JavaScript is used to generate a simple calculator. The effect in Chrome is as follows:

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.