An explanation of HTML form elements and form elements

Original

https://www.jianshu.com/p/b427daa8663d

Outline

1. Understanding the form
2. Understanding form Elements
3. Classification of form elements
4. Table element--text box
5. Table Element button
6, Table element--Single, multi-select
7, table cell element--select
8, table cell element--textarea
9. Recommended

1. Understanding the form

1. You can have multiple form forms on a page, but when submitting a form to a Web server, you can submit only one form at a time.

2, to declare a form, only need to use the form tag to indicate the beginning and end of the form, if you need to submit data to the server, you need to set the Action property in the form label (to set the location of the submission form), The method property (used to define how the browser submits information from the form to the server-side program), the target property (to specify the target window or target frame to which the server returns the results), but for client-side scripting, these properties are not required to help with the submission of form information. The meaning of the form tag is that it is convenient to make references when programming in scripts.

3. A reference to a form can take advantage of the name property of the from tag, or it can be called to the corresponding array using the forms[] array of document.

4. You can use the elements[] array of form form to traverse all elements except <input type=image > elements

5, the form form of the Submit () method is used to submit the form to the service, but when we click the Submit button, the Submit button will call the OnSubmit event handler to invoke the Form object's Submit event

6, how to use the information in the browser page, we call it "client-side scripting," and how to submit information to the Web service, and the database in the database, we are commonly referred to as "server Script Programming"

7, in the early days, all the interactive HTML elements should be placed in the HTML form, but now the definition is to submit to the Web server data must be placed in the form, but the previous way of understanding is not completely wrong, because the general can interact with HTML elements, are form elements (in the early stages), that is, the data the browser needs to process is a form element, so it needs to be placed in an HTML form.

2. Understanding form Elements

1. Most form control elements are created by the <input> tag with a type property that determines the type of form control that the <input> tag creates.,<input>

2. All single-control objects have a Name property, and the JavaScript script references a specific form control element through the value of the Name property, and this is the key value that corresponds to the value of each form control element when the form is submitted to the server.

3. Most objects have the Value property, which returns the values of the current form control.

4. All form control objects have a form property that returns the Form object that contains the current control. For a common form data checker, use this property to indicate which controls belong to which form.

5. All form element objects have the focus () and Blur () methods, and all form element objects also have onfocus and onblur event handlers.

3. Classification of form elements

Common form controls are:
1. Text Input Elements:
<input type= "Text" >, <input type= "password" >, <textarea></textarea>

2. Tick Box Elements:
<input type= "checkbox" >, <input type= "Radio" >

3. Select Elements:
<select size=1><option></option></select>, <select size=5 multiple><option> </option></select> (dropdown large box, multi-Select)

4. Button:
<input type= "button" >, <input type= "Submit" >, <input type= "Reset" >

4. Table element--text box

1, <input type= "text" > to let the browser create a text Form element object by setting text to the type of the input form element.

2. The Value property of the text object represents the values in the textbox.

3. The input tag of the text box also has the Size property, which determines how many characters the text box has, and the MaxLength property, which determines how many characters a user can enter in the text box.

4. The text object also has a select () method to select or highlight text in the text box, and when the user enters an invalid value in the text box, we can set the input focus back to the text box using the focus () method, and use the Select () method to select the text in the text box. And the cursor falls to the right of the text box.

5. The value of the text object gets all the values of the string type, even if the input is a pure number is converted to a string, but if the operation of the value is clear enough to indicate that it is numeric type data, then the background will automatically convert (such as subtraction), but if not enough obvious explanation, It is still used as a string data type (such as addition, the string also has the method of addition), so if you want to use it as a numeric data type, it is best to display it first in the converted data type instead of relying on JavaScript implicit conversion.

6. The text object has multiple event handlers:
onfocus Event handler (get Focus),
onblur Event handler (loses focus),
Onselect event Handler (selected),
OnChange event handler (when and only if the value of the text box loses focus is different from the value that gets the focus),
OnKeyDown Event Processor (keyboard pressed),
The onkeypress event handler (pressed a key),
onkeyup Event handler (keyboard lift)

7, different browser to blur event resolution is different.

8, <input type= "password" name=mypassword> password box, the only purpose of using the Password box is when the user enters the password on the page, hide the user input password string to prevent peeping, However, the password box simply uses asterisks or other symbols instead of the display, does not encrypt the password, and is still sent in clear text when the form is submitted, so it is not a safe way to use a password box to deliver important information

9, <input type= "hidden" name=myhidden> hidden fields, hidden fields can be used as text boxes to enter strings or numbers, except that hidden fields are invisible to the user. The hidden domain is for the user to avoid overly redundant form elements appearing on the page, so some form elements that need to be submitted but have already been filled in are entered and hidden, and are submitted uniformly at the time of the last commit.

5. Table Element button

1, the button element is created <input type= "button", by declaring the type to define the input element, so that the browser will create a button element corresponding to the button object.

2. The button object contains the Value property, and the Value property displays the text

3. Button object contains the OnClick event handler, onmouseup event, Nomousedown event

4, the Submit button has a specific purpose, and does not need to rely on script to achieve, when the Submit button is clicked, the data in the form of the button is automatically submitted to the server, do not need to write any script

5. When the reset button is clicked, all elements in the form where the button is located are emptied or set to the default value of the element (that is, the value that the element has when the page first loads)

6, Table element--Single, multi-select

1. Radio button type= "Radio", check box type= "checkbox" to create a corresponding form element object by setting the Type property

2, by adding the keyword checked in the input tag to set the default options, note that the Radio radio button only one can be selected, if you set multiple checked, only the last one will be implemented.

3. The Value property of the CheckBox object and the Radio object is predefined in HTML or is defined in JavaScript, which does not represent any information that the user interacts with a check box or radio button, regardless of whether the check box or radio button is selected, The value of this value property is constant, and when a form is submitted to the server, only the selected check box or radio button is submitted to the server, and unchecked is not committed.

7, table cell element--select

1. Create: Create a Select down list box object in this way

<select>
    <option><option>
    <option><option>
    ...
<select>

2. The Select object has a size (number of selected bars to show), multiple (whether multiple selection)

<!-
     To show only one radio:
->
<select>
     <option> </ option>
     <option> </ option>
     <option> </ option>
</ select>
<!-
     To display only two displayed radios:
->
<select size = 2>
     <option> </ option>
     <option> </ option>
     <option> </ option>
</ select>
<!-
     To display multiple selections with only two displays:
->
<select size = 2 multiple>
     <option> </ option>
     <option> </ option>
     <option> </ option>
</ select> 

3. The Select object has an array attribute options[], and the element of the array is the option object

4. The option object has the Index property (option in the current options[] array), Text property (returns the text caption that the current item displays in the list box), Value property (returns the value defined by the current item)

5. To add a new list item to the list box, a new option object is required, then insert the object into an empty options[] array element in the options[] array, and when a new option is inserted at an index where an option already exists, Note that the original option in the index location will be overwritten. To remove a list item from a list box, set the array element that corresponds to the option in the options[] array to null, and when you remove an option object, the options[] array is reordered, and the index of each option object that is sorted after the removed option is automatically reduced by 1 .

6. Add a new list item in IE to have its own add (), remove () method to add and draw drop-down options.

7. Drop-down list box with onblur event handler, onfocus event handler, onchange event handler

8, table cell element--textarea

1. <textarea></textarea>textarea element allows the user to enter multiple lines of text

2. The TextArea object has the Cols property (defines the width of the text area, the width of a single character), the Rows property (defines the height of the text area, the row height of a single character)

3. The TextArea object also has a wrap property, the default value is soft (automatic soft return line wrapping), hard property (auto return to line, the behavior will be the line of the place with the data upload), off (closed line)

4. The textarea tag does not contain the Value property, but the TextArea object has the Value property and its values are the contents contained in the TEXTAREA tag.

9. Recommended

Here I just elaborated my own knowledge of the form of some cognition and understanding, may not be comprehensive and specific, but still hope to help the reader, and here I recommend two I write the same about the form of knowledge, one is I encountered the form of problems in the HTML form encountered problems, Another is that I use an instance of the form to apply an HTML form to use an instance, and also hope to be helpful to the reader.

HTML form elements and form elements in a detailed