Understand JavaScript form operations and form fields

1. How to obtain forms

()

[index];

[form_name]

.form_name

function testGetForm() {
var frm = ("regForm"); // Commonly used(frm);
frm = [0];
(frm);
frm = ["aaform"];
(frm);
frm = ; // Commonly used, only forms can be obtained through the name attribute(frm);
}

2. Properties of form objects

action: The address of the form submission

method: form submission method: get (default), post

The difference between get method and post method

The method will place the submitted data after the url with (?name1=value1&name2=value2...)
The post method will place the data in the "request entity" as (name1=value1&name2=value2...)

After putting the data in the url, since the url has a length and the url is visible, the get method is not suitable for sending some sensitive data.
The post method puts data in the "request entity", which is theoretically unlimited, and the post method is suitable for sending some sensitive data.

There will be a cache for the method request
Post requests will not be cached

.enctype //Form encoding method application/x-www-form-urlencoded

Differences in enctype values

/x-www-form-urlencoded (default, and commonly used)
Regardless of whether it is submitted by post or get, the form data is organized by (name1=value1&name2=value2...)

/form-data (when the form uploads the file)
1) Get method, the form organizes data with (name1=value1&name2=value2...)
2) Post method, form data will be placed in the middle of a string similar to "-----WebKitFormBoundaryGSF0lHBAvwWyAcuV".

/plain
1) Get method, the form organizes data with (name1=value1&name2=value2...)
2) Post method, form data will be named name1=value2, name2=value2, and there is no connection symbol between the data.

.elements //Return an array of all form fields (input button select textarea) objects in the form.
.length //Return the number of form field objects in the form

function testFormField() {
// Get the formvar frm = ;
();
();
//The address of the form submission(); 
//Form submission method: get (default), post(); 
//How to encode the form();
//Return an array of all form fields (input button select textarea) objects in the form(); 
//Return the number of form field objects in the form();
}

3. Methods of form objects

(); //Submit the form

(); //Reset the form

4. Events of form objects

1. For the submission and reset buttons set in the form, the onsubmit event and onreset event will be triggered.

2. Submitting a form through submit() outside the form will not trigger the onsubmit event

3. Resetting the form outside the form by reset() will trigger the onreset event

4. We can prevent the execution of the event by returning a false event to the onsubmit event and onreset event.

onreset="return testFormEvent2();"
onsubmit="return testFormEvent1();"

function testFormMethod(){
var frm = ;
// (); //Submit the form(); //Reset the form}
function testFormEvent1(){
alert("The form is submitted!")
//Write the code for the verification formreturn true;
}
function testFormEvent2(){
alert("The form has been reset!")
return false;
}
<form  name="aaform" action="" onreset="return testFormEvent2();" onsubmit="return testFormEvent1();">

5. Properties of form field objects

1) Input object: readonly="readonly" is set, then the form field is read-only (user cannot modify its value attribute), but can submit it
2) Add "read-only" attribute to the input object through js, and should be added through "Object.readOnly = true"
3) readonly="readonly" can only be used in <input type='text'> and <textaread> tags

1) Input object If disabled="disabled" is set, the form field is unavailable (user cannot modify its value attribute) and cannot submit
2) Add "unavailable" attribute to the input object through js, and should be added through "Object.disabled = true"
3) disabled="disabled" can invalidate all form fields

1) Used to obtain the form field
2) Only the form field with the name attribute set can be submitted

1) The content entered by the user is value, and the form will submit the value of the attribute
2) The value value of the select tag is the value value of the currently selected option
3) Textarea has no value attribute, and the text value in the middle of the tag is submitted when submitting

Used to get the form object where the form field is located

The browsing will show different form fields according to the value of the type

1) For <input type="radio"> and <input type="checkbox">, checked="checked" means that the option is selected by default.
2)<input type="radio"> Only add checked="checked" to one of the same group
3)<input type="checkbox"> You can add checked="checked" to all the same group
4) Add the "default selected" attribute to the object through js, and should be added through "Object.checked = true"

Properties of tags

1) SelectedIndex represents the index of the currently selected option
2) options represent an array of all option tag objects
3) length means how many drop-down list items are right

Properties of tags

1) value is the value of the option, and the value of the attribute will be submitted when submitting.
2) text is the text value in the middle of the option tag, similar to innerText
3) selected="selected" indicates the default option when the page is loaded

<script type="application/javascript">
/**
 * 1. Get form field object
 * ()
 * [index]
 * [formarea_name]
 *.formarea_name
 */
function getFormArea(){
var obj = ("nickid"); //Commonly used(obj)
var formObj = 
obj = [2];
(obj);
obj = ["nickname"];
(obj);
obj = ; //Commonly used(obj);
(); // A tag is not a form field}
//Set disabledfunction testReadonly(){
var formareaobj = ;
 = true;
}
//Cursor Focusfunction testMethod(){
var formareaobj = ;
// Get focus and place the cursor in that position// ();
// Lost focus and the cursor disappears from this position// ();
var cityobj = ("cityid");
();
}
function testEvent(){
var formareaobj = ;
// Dynamically add events to form domain objects = function(){
("I've got the focus!")
}
}
function testSelect(){
var sel = ("cityid");
()
();
();
();
var optionobj = [];
()
();
}
</script>
<body>
<button onclick="getFormArea()">Get the form field object</button>
<button onclick="testReadonly()">readonly</button>
<button onclick="testMethod()">Methods to test form field objects</button>
<button onclick="testEvent()">Testing the event of a form field object</button>
<button onclick="testSelect()">Test form field object-select</button>
<hr/>
<form  name="aaform" action="">
username：<input  type="text" name="username" value="admin" ><br/>
password：<input type="password" name="password"><br/>
Nick name：<input  type="text" name="nickname" value="famous" abcd="1234" ><br />
gender：male<input type="radio" name="gender" value="nan">  
female<input type="radio" name="gender" value="nv"><br/>
Hobby：dog<input type="checkbox" name="fav" value="dog">
cat<input type="checkbox" name="fav" value="cat">
Alpaca<input type="checkbox" name="fav" value="yt"><br/>
City<select  name="city" >
<option value="1">Guangzhou</option>
<option value="2" selected="selected">Dongguan</option>
<option value="3">Shenzhen</option>
<option value="4">Zhongshan</option>
</select><br/>
<textarea name="inc">This guy is lazy,Nothing left behind...</textarea><br/>
<input type="submit" value="register">
<input type="reset" value="Reset">
<button type="submit" disabled="disabled">This is a button</button>
<a href="" name="aaa">baidu</a>
</form>
</body>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.