Chapter 3 form Element [bottom]-original of water

Chapter 3 form elements [bottom]-original learning points of water:

1. Other elements

2. input verification

Lecturer: Li Yanhui

This chapter mainly discusses other elements remaining in the form in HTML5, and then focuses on the input verification function of the form.

1. Other elements

The remaining elements of the form element are not explained, including the select drop-down box list, multi-line text box textarea, and output calculation result elements.

Element name	Description
Select	Generate a drop-down list and select
Optgroup	Group select elements
Option	Items in the select Element
Textarea	Generate a multi-line text box
Output	Indicates the calculation result.

1.Generate drop-down list

　　Apple 　　Orange 　　Bananas

Explanation:The drop-down list element must contain at least oneTo form a list of valid options.The element contains two child elements.Project elements andThe group element also contains some additional attributes.

Attribute name	Description
Name	Set the submission name
Disabled	Disable the drop-down list
Form	Hook the drop-down list outside the form with a form
Size	Set the height of the drop-down list
Multiple	Set whether to select multiple
Autofocus	Get focus
Required	Select verification. You must select to pass the verification.

// Set the height and select multiple

 // Default preferredOrange // Use optgroup for grouping. The label is the group name and the disabled option can disable grouping.    Apple    Orange    Bananas 2.Multi-line text boxLeave your suggestion!

Explanation: generate a variable size multi-line text box. The attributes are as follows:

Attribute name	Description
Name	Set the submission name
Form	Hook the multi-row text box outside the form with a form
Readonly	Set multi-row text box read-only
Disabled	Disable multi-line text box
Maxlength	Sets the maximum length of characters that can be entered.
Autofocus	Get focus
Placeholder	Set prompt information when input
Rows	Set the number of rows
Cols	Set the number of Columns
Wrap	Set whether to insert line breaks. There are two types: soft and hard.
Required	Set a value that must be entered; otherwise, verification fails.

// Set the Row Height and column width and insert a line break

3. Calculation Result

     
      x    
      
  
 

Explanation: output is used to calculate the value between two text boxes. In fact, it is embedded with the JavaScript function.

Ii. input verification

HTML5 provides the input verification check method for the form, but this verification is still relatively simple, and different browsers support different maturity. In most cases, you may need to use front-end libraries such as jQuery to implement rich verification functions and display effects.

// A value is required.

// Within a certain range

// Use a regular expression

// Disable Form Verification