About Form Summary induction (NetEase discussion area reprint

First of all, I would like to say that the teacher of this section is very good, although I did not understand what the first time, but I made up some information, come back to listen again, I think the teacher must carefully prepare the lesson, to the form this section how complex, speak of the coherence so strong, praise!

The main content of this section: Create a form that can be submitted general steps: 1, build the form, 2, server processing, 3, configuration form

Main points of knowledge: 1, form related elements; 2. form verification; 3. form submission

One: form-related elements

1. Form

   Property: Name Target action method length elements Aotocomplete

   Method: Submit () Reset ()

   Extract form: Document.forms[index] document.form[name]

   Extract form elements: Formname[index] Formname[naem] formname.elements[index] formname.elements[name]

   Form elements belonging to the elements large family: button filedset input keygen object Output Select textarea

   Form elements that can be reset: input keygen Select output textarea

2. Label

Properties: For control (property values are automatically configured by the browser) from (read-only property, property values are automatically configured by the browser)

Action: Can associate a control to excite its behavior

Elements that can be associated with: button input (except hidden) Keygen meter output progess Select Textare

3. Input

Property: Type

4. Select

Property: Name Value multiple options (Dynamic collection) selectedoptions (Dynamic collection) SelectedIndex

Method: Add (element, [reference]) remove (index)

Option

Property: Disabled Label Value text Index selected defalultselected

Create options

Dom method: createelement (' option ')

Constructor: New option (Text,value) returns an OPTION element

Add options

Dom method: AppendChild ()//IE8 and below do not support

InsertBefore ()

API:select.add ();

Delete option

Dom method: RemoveChild ()

API Select.remove (Index)

5. TextArea

Property: Name Value SelectionStart selectionend selectiondirection (apply keyboard action) selection

Method: Select ()//full selection, trigger Select Event SelectionRange (start,end)

Setrangetext (Replacement,[start],[end],[mode]

Summary: Common attributes for form elements

Disabled form name ReadOnly tabIndex type value Aotofocus (HTML5 introduced, compatibility issues exist)

Common methods for form elements

Focus () blur ()

Common events for form elements

Blur Change Focus

Second: Verify

Verifiable element: Button input Select textarea

Element validation properties and methods: Willvalidate checkvalidity () (failed validation to trigger invalid event)

Validity (store validation results, validate to point, all ture, returns True)

Setcustomvalidity (message) (modify require hint text)

HTML5 provides the authentication method:

1. Required (verify required attributes)

2, some values of the type attribute of input comes with simple verification function, such as: Email,url ...

3, Pattery property, with a regular attribute value to verify

Its three: submit

1. Implicit submission

There is a non-disabled submit button in the form, press ENTER to submit

2, Submit () method submission, the submission will not trigger the submit event, so need to verify in advance

3. Elements that can be submitted: button input Keygen object Select textarea

Summary, the form of the API, elements, attributes and so on, the knowledge point is particularly cumbersome, so I personally think you can master a probably, in the later practice in slowly refinement.

About Form Summary induction (NetEase discussion area reprint