This article will collect some of the control form operation functions commonly used in front-end WEB development for your reference.
. Automatically select text when the mouse passes
Code:
Mouse Selection: <input type = "text" value = "Default value" onMouseOver = "this. focus ();" onfucus = "this. seelct ()"/>
2. Set the radio button
Code:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
<Title> js operation form </title>
<Script language = "javascript">
Function getChoice (){
Var oForm = document. forms ["myForm1"];
Var aChoice = oForm. camera;
For (I = 0; I <aChoice. length; I ++)
If (aChoice [I]. checked)
Break;
Alert ("the brand of your camera is:" + aChoice [I]. value );
}
Function setChoice (iNum ){
Var oForm = document. forms ["myForm1"];
OForm. camera [iNum]. checked = true;
}
</Script>
</Head>
<Body>
<Form method = "post" name = "myForm1" action = "">
<P> the brand of the camera you are using </p>
<P>
<Input type = "radio" name = "camera" id = "canon" value = "Canon">
<Label for = "canon"> Canon </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "nikon" value = "Nikon">
<Label for = "nikon"> Nikon </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "sony" value = "Sony">
<Label for = "sony"> Sony </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "pentax" value = "Tentax">
<Label for = "pentax"> Tentax </label>
</P>
<P>
<Input type = "button" value = "Check the selected object" onClick = "getChoice ();">
<Input type = "button" value = "set to Canon" onClick = "setChoice (0);">
</P>
</Form>
</Body>
</Html>
3. Set the check box
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
<Title> js operation form </title>
<Script language = "javascript">
Function changeBoxes (action ){
Var oForm = document. forms ["myForm1"];
Var oCheckBox = oForm. holobby;
For (var I = 0; I <oCheckBox. length; I ++) // traverse each option
If (action <0) // reselect
OCheckBox [I]. checked =! OCheckBox [I]. checked;
Else
OCheckBox [I]. checked = action;
}
</Script>
</Head>
<Body>
<Form method = "post" name = "myForm1" action = "">
<P>
<Input type = "checkbox" name = "holobby" id = "ball" value = "ball">
<Label for = "ball"> ball </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "TV" value = "TV">
<Label for = "TV"> watch TV </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "net" value = "net">
<Label for = "net"> surfing the Internet </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "book" value = "book">
<Label for = "book"> reading </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "run" value = "run">
<Label for = "run"> running </label>
</P>
<P>
<Input type = "button" value = "select all" onClick = "changeBoxes (1);">
<Input type = "button" value = "NONE" onClick = "changeBoxes (0);"/>
<Input type = "button" value = "invert" onClick = "changeBoxes (-1);"/>
</P>
</Form>
</Body>
</Html>
4. Set the drop-down menu
The most important thing in the drop-down menu is to access the user-selected options. For a single-choice drop-down menu, you can easily access the options through the selectedIndex attribute.
Code:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
<Title> js operation form </title>
<Script language = "javascript">
Function checkSingle (){
Var oForm = document. forms ["myForm1"];
Var oSelectBox = oForm. constellation;
Var iChoice = oSelectBox. selectedIndex; // obtain the selected item
Alert ("You selected:" + oSelectBox. options [iChoice]. text );
}
</Script>
</Head>
<Body>
<Form method = "post" name = "myForm1" action = "">
<P>
<Select id = "constellation" name = "constellation">
<Option value = "Aries" selected = "selected"> Aries </option>
<Option value = "Taurus"> Taurus </option>
<Option value = "Gemin"> Gemini </option>
<Option value = "Leo"> Leo </option>
<Option value = "Virgo"> virgins </option>
</Select>
</P>
<P>
<Input type = "button" value = "view option" onClick = "checkSingle ();"/>
</P>
</Form>
</Body>
</Html>
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
