Form script

Time:2021-11-26

Form basis

Basic properties and methods

1、action
The URL of the request (the default is the current URL)
2、elments
Htmlcollection of form fields
3、method
Request mode (default value: get)
4、name
The name of the form can be obtained through document.forms [name]
5、reset
Resetting the form will trigger the reset event of the form. Button and input of type rest can also realize the rest function and trigger the reset event
6、submit
If the form is submitted manually, the submit event will not be triggered
7、enctype
Requested context type

Submit Form

There are two ways to submit a form
1. Button and input of type submit or input of type image
2. Call the form.submit method

1. The form will submit the value value of the non button form field with name and not disabled
2. Multiple check boxes and check boxes will submit multiple values with the same key

form field

The elements of the form contains references to all fields in the form, including all input, textarea, button, select and fieldset elements

Public properties of form fields

disabled
Boolean indicating whether the field is enabled
form
Pointer to the corresponding form, read-only
name
The name of the field
readOnly
Read only, valid only for input and textarea
tabIndex
Value, tab key to switch the order
type
Indicates the field type, such as radio and checkbox
value
The value of the field

Public methods for form fields

1. focus
2. blur

Public events for form fields

1. blur
2. change
3. focus

Text box programming (input, textarea)

Basic properties of input

1、size
Specifies the width of the text box, which is calculated in characters
2、value
The value of the text box
3、maxLength
The maximum number of characters in a text box

Basic properties of textarea

1、rows
Height of textarea
2、cols
Width of textarea
Textarea does not support MaxLength

Select text

The select () of the text box element selects all the text in the text box

Select event

When a text selection operation appears in the text box, the select event will be triggered

Gets the selected text

The text box has two properties, selectionstart and selectionend, which represent the start and end of the selection

Partially selected text

The text box provides the setselectionrange method to select text, and provides two parameters, the selected start point and end point

HTML5 constraint validation API

Mandatory Field

Add the required attribute to the form field, and confirm the value when submitting

Input type

The input type supports URL and email restricted submission. It will not prevent users from invalid input, but will not allow form submission

Numerical range

For input of type number, min, Max and step are provided to limit the range of values,
It will not prevent users from invalid input, but will not allow form submission

<input type="number" min="0" max="100" step="5">
//Only multiples of 5 from 0 to 100 are allowed

Input mode

HTML5 provides the pattern attribute for the input of text to restrict submission

<input type="text" pattern="\d+">
//Only numbers are allowed

Pattern has ^ and $by default

Test effectiveness

Use checkvalidity () to check whether any given field in the form is valid. This method can be used on all form elements

Form. Elements [0]. Checkvalidity() // check whether the field is valid
Form. Checkvalidity() // check whether the whole form is valid

The validity attribute of the form field can also detect whether the field is valid

Disable field validation

Adding the novalidate attribute to the form disables field validation for the entire form
You can also add the formnovalidate attribute on the submit button to specify that the submission through the button does not require form verification

Selection box programming (select)

Basic properties and methods of select

1、add(newOption,relIndex)
Add a new option before the reloption corresponding to relindex. Relindex is optional. If it is not passed, it will be added at the end
2、multiple
Boolean value indicating whether multiple selection is supported
3、options
Select the htmlcollection for all option elements in the box
4、remove(index)
Removes the option for the specified index
5、selectedIndex
The index of the selected item. When multiple options are selected, only the index of the first selected option is returned
6、size
Number of visible rows in the check box
7、value
Select the value of option. If no value is specified, it is the text of option
When selecting multiple options, only the value of the first selected option is returned

Basic properties of option

1、index
The index of the option in the options collection
2、selected
Is the option selected
3、text
Option text
4、value
The value of the option

Option processing

The following three methods can modify the value of select

1. Modify selectedindex of select
2. Modify the selected of option
3. Directly modify the value of the select

Add options

var option = new Option("label","value")
Select. Add (option, undefined) // Add option on the last side