Reading time "JavaScript Advanced Programming" seven: Forms

In HTML, the form is represented by the <form> element, and in JS the form corresponds to the htmlformelement type.

The form's own properties and methods:

　　　Get form

1. By ID document.getElementById

2. Get a Form collection by document.forms to get specific form elements by index value or name value

　　　Submit Form

Use the input or button to define the Submit button and set its type to submit.

 <  input  type  = "Submit"   = "Commit"  />  <  button  type  = "button"  >  submit </ button  >  <  input  type  = "image"   src  = "Button.png"  />  

When the form has a submit button, pressing the ENTER key when the form control has the focus can submit the form (textarea exception). And the submit event is triggered when the form is submitted.

var form = document.getElementById (' myForm '); Form.addeventlistener (function(e) {     // Block commits     E.preventdefault ();}); // Submission represents form.submit ();

　　　Resetting the form

When you click the form reset button, the form resets. Set the type of input or button to reset.

<type= "reset"  value= "reset"/><   type= "reset"> reset </button>

Resetting the form triggers the reset event.

var form = document.getElementById (' myForm '); Form.addeventlistener (function(e) {     // Cancel Reset     E.preventdefault ();}); // Reset form form.reset ();

form Fields

Each form has a elements property, which is a collection of all the elements in the form. This collection is an ordered list that contains all the fields in the form. Each field can be accessed by its location and name in the collection.

// Get Form var form = document.getElementById (' myForm '); // get the first field of a form var frist = Form.elements[0]; // get a field named Username var username = form.elements[' username '];

The form element has some common attributes:

Methods common to form elements:

function () {    //  The first element in the first form gets the focus    document.forms[0].elements[0].focus ();};

Note: If the first FORM element is an INPUT element and the type value is hidden, or if the change element is hidden by the display and visibility using CSS, focus causes an error.

text Box　　

Single-line text box: INPUT element

Multiline text box: TEXTAREA element

<!---<type= "text"  size= "25"  maxlength= " " " value=" "/>

<!---<rows= "Ten"  cols= "30"  ></textarea>

Select text

<type= "text"  value= "Oh, this is an expression." ">

 window.onload = function   () { var  input = Document.forms[0].elements[0];    Input.select (); Input.addeventlistener ( ' select ', function   () {  select What text-HTML5 API   Console.log (input.value.substring (Input.selectionstart, INP Ut.selectionend)});  

function SelectText (textbox, StartIndex, Stopindex) {    if  (textbox.setselectionrange) {        Textbox.setselectionrange (StartIndex, stopindex);     Else if (textbox.createtextrange) {        var range = textbox.createtextrange ();        Range.collapse (true);        Range.movestart ("character", StartIndex);        Range.moveend ("character", Stopindex- startIndex);        Range.Select ();                        }    Textbox.focus ();}

。。。

　

　　　

Reading time "JavaScript Advanced Programming" seven: Forms