JavaScript Advanced Programming Learning Notes Chapter 14th-Forms

1. In HTML, the form is represented by the <form> element, whereas in JavaScript, the form corresponds to the htmlformelement type. Htmlformelement inherits the HtmlElement, and thus has the same default properties as other HTML elements.

Unique properties and methods of 2.HTMLFormElement:

• Acceptcharset: A character set that the server can handle, equivalent to the Accept-charset attribute in HTML.
• Action: The URL to accept the request, equivalent to the action attribute in HTML.
• Elements: A collection of all the controls in the form (htmlcollection).
• Enctype: The type of encoding requested, equivalent to the Enctype attribute in HTML.
• Length: The number of controls in the form.
• Method: The type of HTTP request to be sent, usually "get" or "post", equivalent to the method attribute of HTML.
• Name: Names of the forms, equivalent to the name attribute of the HTML.
• Reset (): Resets all form fields to their default values.
• Submit (): Submits the form.
• Target: The name of the window used to send the request and receive the response, which is equivalent to the target attribute of HTML.

3. How to get form references:

The first: Add the id attribute to it, and then use the getElementById () method to find it.
The second type: all the forms on the page can be obtained by document.forms. In this collection, a specific form can be obtained by means of a numeric index or a name value.

You can specify both the ID and the Name property for the form, but their values are not necessarily the same.

4. How the form is submitted:

• Define the Submit button:

1 <!--Universal Submit button-2 <input type= "Submit" value= "Submit Form" >3 <!--Custom Submit button--& Gt 4 <button type= "Submit" >submit form</button>5 <!--image button--6 <input Type= "image" src= "Graphic.gif" >

Submitting a form with the Define submit button triggers the Submit event, and optionally cancels the event at the appropriate time.

• Call the Submit () method:

1 var form = document.getElementById ("MyForm"); 2 // Submit Form 3 form.submit ();

Calling the Submit () method submits the form without the calligraphy submit () event.

How to reset the form:

• To create a reset button:

1 <!--Universal reset button-2 <input type= "reset" value= "Reset Form" >3 <!--custom reset button-- >4 <button type= "reset" >reset form</button>

Creating a reset button triggers the reset event.

• Call the Reset () method:

1 var form = document.getElementById ("MyForm"); 2 // Resetting the form 3 form.reset ();

Calling reset () also triggers the reset event.

form fields:

Each form has a elements property, which is a collection of all form elements (fields) in the form. This elements collection is an ordered list that contains all the fields in the form, such as <input>, <textarea>, <button>, and <fieldset>. The order of each form field in the Elements collection is the same as the order in which they appear in the tag, and can be accessed by location and name attributes. For example:

1 var form = document.getElementById ("Form1"); 2 // get the first field in a form 3 var field1 = form.elements[0]; 4 // get a field named "TextBox1" 5 var field2 = form.elements["TextBox1"]; 6 // get the number of fields contained in the form 7 var fieldcount = form.elements.length;

Common form Field Properties:

• Disabled: Boolean value that indicates whether the current field is disabled.
• Form: A pointer to the form that the current field belongs to, read-only.
• Name: The names of the current fields.
• ReadOnly: Boolean value that indicates whether the current field is read-only.
• TabIndex: Represents the Toggle (tab) Ordinal of the current field.
• Type: The types of the current field, such as "checkbox", "Radio", and so on.
• Value: The current field will be submitted to the server's values. For a file field, this property is read-only and contains the path to the file on the computer.
  
  

Common form Field methods:

• Focus (): Used to set the focus of the browser to a form field, which activates form fields so that they can respond to keyboard events.
  
  
• Blur (): Removes the focus from the element. When calling the blur () method, the focus is not shifted to a particular element; it simply removes the focus from the element that invokes the method.
  
  

Common form field events:

• Blur: Triggered when the current field loses focus.
• Change: For <input> and <textarea> elements, triggered when they lose focus and value changes, and for <select> elements, when their options change. Often used to validate data entered by a user in a field.
• Focus: triggered when the current field gets focus.

text Box script:

Two ways to represent a text box: a single-line text box that uses the <input> element, and a multiline text box that uses <textarea>.

Select (): Used to select all text in the text box. This method does not accept parameters and can be called at any time. The Select () method triggers the Select event.

Gets the selected text: SelectionStart and Selectionend Properties,

Select part of the text: Setselectionrange () method, which receives two parameters: the index of the first character to select and the character after the last character to select.

HTML5 Constraint Validation API:

Required attribute: The required attribute is specified in the form field, for example: <input type= "text" name= "username" required>

The new added value of the Type property: "Email" and "url", which the browser adds to the validation mechanism.

The range of values: number, Range, datetime, datetime-local, date, month, week, and time, and so on. You can specify the Min property (the smallest possible value), the max attribute (the maximum possible value), and the Step property (the difference between the two ticks from Min to Max), and Stepup () and Stepdown () accept one parameter, which is the value to be added or subtracted from the current value.

New Pattern Property: The value of this property is a regular expression that matches the value in the text box.

Detection effectiveness: Use the Checkvalidity () method to detect whether a field in a form is valid. The validity property will tell you why the field is valid or invalid.

Disable validation: Sets the Novalidate property, which tells the form not to validate.

Serialization of Forms:

JavaScript Advanced Programming Learning Notes Chapter 14th-Forms