Home > Developer > JavaScript
To collect information from users on the Web site, use a form.
A form can contain most common graphic interface elements, including input fields, single-choice buttons, check boxes, pop-up menus, and input lists. In addition, HTML forms can contain password fields, which can hide user input to avoid being peeked at by others.
After entering the form, click the Submit button on the menu to send the form information to the Web server. on the server, the CGI program (Common Gateway Interface, which is a script running on the Web server) the data is interpreted and operated. Then, data is often stored in the database for future use. Before using data on the server, make sure that the data entered by the user is in an accurate (correct) format.
JavaScript is a good way to check data. This technology is called form validation ). Although CGI can complete verification (and should be used as a precaution because some users disable the JavaScript function in the browser), it is much faster to verify it when the client uses JavaScript, in addition, user operations are more efficient.
Summary of the form:
Get form
[Javascript]
Var form = document. forms ["form1"];
Var form = document. fors [0];
Form object event
Onsubmit is triggered before the form is submitted.
Onreset is triggered before the form is reset.
Reference Form Elements
[Javascript]
Var element = tForm. elements [idex];
Var element = tForm. elements [elementName];
Traverse all form fields in a form
[Javascript]
For (var I = 0; I <tForm. elements. length; I ++ ){
//
}
Common attributes of form fields
1) create a read-only (unavailable) form field
Element. disabled = true;
Element. disabled = false;
2) obtain the value of the form field
Value
Common method of form field
1) form field focus: focus ()
2) The form field loses focus: blur ()
Common events in form fields
OnFocus: this event is generated when the focus is obtained.
OnBlur: this event is generated when the focus is lost.
Onselect: this file is generated after the text is highlighted (selected ).
Onchange: when the value of the form field changes
Onclick: click on the keyboard
Onkeydown: press the keyboard
Onkeyup: Release the keyboard
Onkeypress: Press and release the keyboard.
Onmouseover: move the mouse up
Onmouseout: move the mouse out
Onmousedown: press the mouse
Onmouseup: Release the mouse
Text Field, check box, single-choice button, drop-down list box, form verification, etc.
Dynamically change menu
You often need to provide users with the opportunity to input through the pop-up menu, and you want to change one or more pop-up menu content based on the user's choice in another pop-up menu, the following example is used to select a month, fill in the second pop-up menu based on the number of days of the selected month:
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Dynamic Menus </title>
<Script type = "text/javascript" src = "script. js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<Form action = "#">
<Select id = "months">
<Option value = ""> Month </option>
<Option value = "0"> January </option>
<Option value = "1"> February </option>
<Option value = "2"> March </option>
<Option value = "3"> option L </option>
<Option value = "4"> May </option>
<Option value = "5"> June </option>
<Option value = "6"> July </option>
<Option value = "7"> August </option>
<Option value = "8"> September </option>
<Option value = "9"> October </option>
<Option value = "10"> November </option>
<Option value = "11"> December </option>
</Select>
<Select id = "days">
<Option> Day </option>
</Select>
</Form>
</Body>
</Html>
Select a value in the pop-up menu, and then you can create the content of the second pop-up menu.
[Javascript]
/**
* Dynamically change the menu
*/
Window. onload = initForm;
Function initForm (){
Document. getElementById ("months"). selectedIndex = 0;
Document. getElementById ("months"). onchange = populateDay;
}
Function populateDay (){
Var monthDays = new Array (, 30, 31, 30, 31 );
Var monthStr = this. options [this. selectedIndex]. value;
// Use this (the month selected in the first menu) to obtain the value from the menu and store it in monthStr
If (monthStr! = ""){
Var theMonth = parseInt (monthStr );
Document. getElementById ("days"). options. length = 0;
For (var I = 0; I <monthDays [theMonth]; I ++ ){
Document. getElementById ("days"). options [I] = new Option (I + 1 );
}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
