JavaScript学习笔记 7-表单 Forms
(内容来源网络，经过重新整理，可任意转摘，但请注明出处:http://www.cnblogs.com/tograce/category/157013.html)
在html中使用表单，还记得吧
一简单的表单
<body>
<form>
Your name:<input type="text" name="yourname" value='tograce'><br>
<input type="submit" value="here">
</form>
</body>
在JavaScript中，如同image一样，表单也是以 数组对象 存储的，如页面的第一个表单是这样的:
<form name="first_form">
<input type="text" name="first_text" size="40"
value="Power to the primates!">
</form>
那么，可以这样调用:
var the_form = window.document.forms[0];
表单实例:鼠标放在文字上，文本框的内容变化
<body>
<form name="first_form">
<input type="text" name="first_text" value="Are you happy?" size="40">
</form>
<a href="#" onmouseover="window.document.first_form.first_text.value='aHa,I am a happy monkey!'">Monkey</a>
<a href="#" onMouseMove="window.document.first_form.first_text.value='555,I am sad now:('">pig</a>
</body>
表单实例:鼠标放在文字上，多行文本框的内容变化
<html><head><title>form_textarea</title>
<script language="javascript">
<!--
var content_one="aHa,I am a happy monkey! I like sing and I sing everyday:)";
var content_two="en en ,I felling sad now:(";
-->
</script></head>
<body>
<form name="form_two">
<textarea name="text_text" rows="10" cols="40">Mouse over below to see what happening </textarea>
</form>
<a href="#" onmouseover="window.document.form_two.text_text.value=content_one">Monkey</a>
<a href="#" onMouseMove="window.document.form_two.text_text.value='555,I am sad now:('">pig</a>
</body>
</html>
Code
<html><head>
<title>form method focus and selcet</title></head>
<body>
<form name="form_focus">
<input type="text" name="text_focus" value="Are you webmonkey?"size="30">
</form>
<a href="#" onMouseOver="window.document.form_focus.text_focus.focus();">Mouse over to focus</a>
<!--
注意:不能写成 window.document.form_focus.text_focus.value.focus(),且 .focus()对IE不起作用
-->
<a href="#" onMouseMove="window.document.form_focus.text_focus.select();">Mouse over to select</a>
</body>
</html>
Code
<html><head>
<title>form method onfocus onblur and onchange</title>
<script language="javascript">
<!--
function writeIt(the_word)
{
var word_with_return=the_word+"\n";
window.document.first_form.the_textarea.value+=word_with_return;
}
-->
</script></head>
<body>
<form name="first_form" onSubmit="return false;">
<input type="text" name="text_focus" size="30"
onfocus="writeIt('onfocus');"
onblur="writeIt('onblue');"
onchange="writeIt('change')"><p>
<textarea name="the_textarea" rows="5" cols="10"></textarea>
</form>
</body>
</html>
Code
<html><head><title>the function of return false in form</title>
<script language="JavaScript">
<!--
function monkey_love_who()
{
var love_who=window.document.monkey_love.monkey_love.value;
love_who='The webmonkey love:'+love_who;
window.document.monkey_love.monkey_love.value=love_who;
}
-->
</script></head>
<body>
<form name="monkey_love" onSubmit="monkey_love_who();return false;">
Who does the webmonkey love?<input type="text" name="monkey_love" size="40" >
</form>
</body>
</html>
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form_checkbox</title></head>
<body>
<form name="check_box">
<input type="checkbox" name="check_check">Checkbox 1<br>
</form>
<a href="#" onClick="window.document.check_box.check_check.checked=true;return false;">Click to check checkbox 1</a><br>
<a href="#" onClick="window.document.check_box.check_check.checked=false;return false;">Click to uncheck checkbox 1</a><br>
<a href="#" onClick="alert(window.document.check_box.check_check.checked);return false;">Click to see the value of Checkbox 1</a>
<!--
将上面的三句中的 return false;去掉也行
-->
</body>
</html>
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form_checkbox_lightswitch</title>
<script language="javascript">
<!--
function switchLight()
{
var the_box=window.document.lightswitch.lightswitch;
if(the_box.checked==false)
{
document.bgColor='black';
alert("Hey! Turn that back on!");
}
else
{
document.bgColor='white';
alert("Thanks");
}
}
-->
</script>
</head>
<body>
<form name="lightswitch">
<input type="checkbox" name="lightswitch" onClick="switchLight();" checked="true"><font color="#FF0000">The Light Switch</font><br>
</form>
</body>
</html>
Code
<form name="form_radio">
<input type="radio" name="Larry" value="larry" checked="checked">Larry<br>
<input type="radio" name="Larry" value="moe">Moe<br>
<input type="radio" name="Larry" value="curly">Curly<br>
</form>
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form_Radio_lightSwitch</title>
<script language="javascript">
<!--
function lightswitch_on()
{
var box_1=window.document.form_radio.radio_1;
var box_2=window.document.form_radio.radio_2;
if(box_1.checked==true)
{
window.document.form_radio.radio_1.checked=false;
document.bgColor='white';
alert("Thanks");
}
}
function lightswitch_off()
{
var box_1=window.document.form_radio.radio_1;
var box_2=window.document.form_radio.radio_2;
if(box_2.checked==true)
{
window.document.form_radio.radio_2.checked=false;
document.bgColor='black';
alert("Hey! Turn that back");
}
}
-->
</script>
</head>
<body>
<form name="form_radio">
<input type="radio" name="radio_1" value="light_off" onClick="lightswitch_off();"><font color="red" >Light off</font> <br>
<input type="radio" name="radio_2" value="light_on" checked="checked" onClick="lightswitch_on();"><font color="#993333">Light on </font> <br>
</form>
</body>
</html>
表单控件:select
<html><head><title>form_select</title></head>
<body>
<form name="the_select">
<select name="select_one" size="1">
<option> one
<option> two
<option> three
<option> four
<option> five
</select>
</form>
<!--也可以这样
<select name="select_one">
<option> one </option>
<option> two </option>
<option> three </option>
<option> four </option>
<option> five </option>
</select>
-->
</body>
</html>
Code
<html><head><title>form_select</title>
<script language="javascript">
function add_content()
{
var the_content="*uiu*";
window.document.the_select.select_one.options[1].text=the_content;
}
</script>
</head>
<body>
<form name="the_select">
<select name="select_one" size="1">
<option> one
<option> two
<option> three
<option> four
</select>
</form>
Try it <a href="#" onClick="add_content();return false;">click here </a>to add *ooo* to the pulldown menu<br>
<a href="#" onClick="alert('The index is:'+ window.document.the_select.select_one.selectedIndex);return false;">chick here to see the selectedIndex</a>
</body>
</html>
复合选项表单
<html><head><title>form_multipy selects</title>
<script language="javascript">
<!--
function reportMultiple()
{
var the_select_result=" ";
var the_select_box=window.document.form_1.multipy_selects;
for(loop=0;loop<the_select_box.options.length;loop++)
{
if(the_select_box.options[loop].selected==true)
{
the_select_result += the_select_box.options[loop].text + " ";
}
}
alert ("you selected: "+ the_select_result );
}
-->
</script>
</head>
<body>
<form name="form_1" onSubmit="reportMultiple();return false;">
<select name="multipy_selects" size="4" multiple>
<option> red
<option> yellow
<option> blue
<option> green
<option> orange
</select><br>
<input type="submit" value="select a few,than click me">
</form>
</body>
</html>
Code
<html><head><title>form_multipy selects</title>
<script language="javascript">
<!--
var dogs=new Array("poodle","puli","greyhound");
var fish=new Array("trout","mackerel","bass");
var birds=new Array("robin","hummingbird","crow");
function test(the_arrary_name)
{
var the_array=eval(the_arrary_name);
setOptionText(window.document.the_form.the_examples,the_array);
}
function setOptionText(the_select,theArray)
{
for(loop=0;loop<the_select.options.length; loop++)
{
the_select.options[loop].text=theArray[loop];
}
}
-->
</script>
</head>
<body>
<h3>My favorite animal is
<br></h3>
<form name="the_form">
<select name="choose_category" onChange="test(window.document.the_form.choose_category.options[selectedIndex].text);">
<option selected="selected">dogs
<option>fish
<option>birds
</select>
<select name="the_examples" multiple>
<option>poodle
<option>puli
<option>greyhound
</select>
</form>
</body>
</html>
在html中使用表单，还记得吧
一简单的表单<body>
<form>
Your name:<input type="text" name="yourname" value='tograce'><br>
<input type="submit" value="here">
</form>
</body>
<form name="first_form">
<input type="text" name="first_text" size="40"
value="Power to the primates!">
</form>
那么，可以这样调用:
var the_form = window.document.forms[0];
var the_same_form = window.document.first_form;
表单实例:鼠标放在文字上，文本框的内容变化<body>
<form name="first_form">
<input type="text" name="first_text" value="Are you happy?" size="40">
</form>
<a href="#" onmouseover="window.document.first_form.first_text.value='aHa,I am a happy monkey!'">Monkey</a>
<a href="#" onMouseMove="window.document.first_form.first_text.value='555,I am sad now:('">pig</a>
</body>
再看下一实例，和上面差不多，不同的是练习 表单中的多行文本：
表单实例:鼠标放在文字上，多行文本框的内容变化<html><head><title>form_textarea</title>
<script language="javascript">
<!--
var content_one="aHa,I am a happy monkey! I like sing and I sing everyday:)";
var content_two="en en ,I felling sad now:(";
-->
</script></head>
<body>
<form name="form_two">
<textarea name="text_text" rows="10" cols="40">Mouse over below to see what happening </textarea>
</form>
<a href="#" onmouseover="window.document.form_two.text_text.value=content_one">Monkey</a>
<a href="#" onMouseMove="window.document.form_two.text_text.value='555,I am sad now:('">pig</a>
</body>
</html>
以下的实例,为了练习 focus()和secelct()
Code<html><head>
<title>form method focus and selcet</title></head>
<body>
<form name="form_focus">
<input type="text" name="text_focus" value="Are you webmonkey?"size="30">
</form>
<a href="#" onMouseOver="window.document.form_focus.text_focus.focus();">Mouse over to focus</a>
<!--
注意:不能写成 window.document.form_focus.text_focus.value.focus(),且 .focus()对IE不起作用
-->
<a href="#" onMouseMove="window.document.form_focus.text_focus.select();">Mouse over to select</a>
</body>
</html>
一个有关onfocus,onblur和onchange的实例:
Code<html><head>
<title>form method onfocus onblur and onchange</title>
<script language="javascript">
<!--
function writeIt(the_word)
{
var word_with_return=the_word+"\n";
window.document.first_form.the_textarea.value+=word_with_return;
}
-->
</script></head>
<body>
<form name="first_form" onSubmit="return false;">
<input type="text" name="text_focus" size="30"
onfocus="writeIt('onfocus');"
onblur="writeIt('onblue');"
onchange="writeIt('change')"><p>
<textarea name="the_textarea" rows="5" cols="10"></textarea>
</form>
</body>
</html>
下面一个实例是练习 return false在表单中的作用:
Code<html><head><title>the function of return false in form</title>
<script language="JavaScript">
<!--
function monkey_love_who()
{
var love_who=window.document.monkey_love.monkey_love.value;
love_who='The webmonkey love:'+love_who;
window.document.monkey_love.monkey_love.value=love_who;
}
-->
</script></head>
<body>
<form name="monkey_love" onSubmit="monkey_love_who();return false;">
Who does the webmonkey love?<input type="text" name="monkey_love" size="40" >
</form>
</body>
</html>
尝试一下将上面的代码中的return false去掉,看看有什么变化?
如果onsubmit中没有return false语句的话，执行函数monkey_love_who()会改变文字域内容，但由于同时网页内容会被刷新，从而又会将文字域的内容返回到原有的内容
checkbox
看一实例:
Code<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form_checkbox</title></head>
<body>
<form name="check_box">
<input type="checkbox" name="check_check">Checkbox 1<br>
</form>
<a href="#" onClick="window.document.check_box.check_check.checked=true;return false;">Click to check checkbox 1</a><br>
<a href="#" onClick="window.document.check_box.check_check.checked=false;return false;">Click to uncheck checkbox 1</a><br>
<a href="#" onClick="alert(window.document.check_box.check_check.checked);return false;">Click to see the value of Checkbox 1</a>
<!--
将上面的三句中的 return false;去掉也行
-->
</body>
</html>
checkbox又一实例:
Code<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form_checkbox_lightswitch</title>
<script language="javascript">
<!--
function switchLight()
{
var the_box=window.document.lightswitch.lightswitch;
if(the_box.checked==false)
{
document.bgColor='black';
alert("Hey! Turn that back on!");
}
else
{
document.bgColor='white';
alert("Thanks");
}
}
-->
</script>
</head>
<body>
<form name="lightswitch">
<input type="checkbox" name="lightswitch" onClick="switchLight();" checked="true"><font color="#FF0000">The Light Switch</font><br>
</form>
</body>
</html>
说明:因为当鼠标点选项时,就已经将checked的值切换了,所以不需要再在function中加入语句来实现切换功能.
radio
先接触其最原始的形态:
Code<form name="form_radio">
<input type="radio" name="Larry" value="larry" checked="checked">Larry<br>
<input type="radio" name="Larry" value="moe">Moe<br>
<input type="radio" name="Larry" value="curly">Curly<br>
</form>
将上面的LightSwitch用radio来实现:
Code<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form_Radio_lightSwitch</title>
<script language="javascript">
<!--
function lightswitch_on()
{
var box_1=window.document.form_radio.radio_1;
var box_2=window.document.form_radio.radio_2;
if(box_1.checked==true)
{
window.document.form_radio.radio_1.checked=false;
document.bgColor='white';
alert("Thanks");
}
}
function lightswitch_off()
{
var box_1=window.document.form_radio.radio_1;
var box_2=window.document.form_radio.radio_2;
if(box_2.checked==true)
{
window.document.form_radio.radio_2.checked=false;
document.bgColor='black';
alert("Hey! Turn that back");
}
}
-->
</script>
</head>
<body>
<form name="form_radio">
<input type="radio" name="radio_1" value="light_off" onClick="lightswitch_off();"><font color="red" >Light off</font> <br>
<input type="radio" name="radio_2" value="light_on" checked="checked" onClick="lightswitch_on();"><font color="#993333">Light on </font> <br>
</form>
</body>
</html>
select
先接触其最原始的形态:
表单控件:select<html><head><title>form_select</title></head>
<body>
<form name="the_select">
<select name="select_one" size="1">
<option> one
<option> two
<option> three
<option> four
<option> five
</select>
</form>
<!--也可以这样
<select name="select_one">
<option> one </option>
<option> two </option>
<option> three </option>
<option> four </option>
<option> five </option>
</select>
-->
</body>
</html>
将上面代码中的 size="1" 改为 size="3" 就成了列表式表单
可以这样向select添加新的选择项:
window.document.formName.selectName.options[x].text = 'new_text';
如果要查询某个选项的引索,这样:
window.document.formName.selectName.selectedIndex
来看一个实例:
Code<html><head><title>form_select</title>
<script language="javascript">
function add_content()
{
var the_content="*uiu*";
window.document.the_select.select_one.options[1].text=the_content;
}
</script>
</head>
<body>
<form name="the_select">
<select name="select_one" size="1">
<option> one
<option> two
<option> three
<option> four
</select>
</form>
Try it <a href="#" onClick="add_content();return false;">click here </a>to add *ooo* to the pulldown menu<br>
<a href="#" onClick="alert('The index is:'+ window.document.the_select.select_one.selectedIndex);return false;">chick here to see the selectedIndex</a>
</body>
</html>
复合选项的关键是加入关键词:multipy
复合选项表单<html><head><title>form_multipy selects</title>
<script language="javascript">
<!--
function reportMultiple()
{
var the_select_result=" ";
var the_select_box=window.document.form_1.multipy_selects;
for(loop=0;loop<the_select_box.options.length;loop++)
{
if(the_select_box.options[loop].selected==true)
{
the_select_result += the_select_box.options[loop].text + " ";
}
}
alert ("you selected: "+ the_select_result );
}
-->
</script>
</head>
<body>
<form name="form_1" onSubmit="reportMultiple();return false;">
<select name="multipy_selects" size="4" multiple>
<option> red
<option> yellow
<option> blue
<option> green
<option> orange
</select><br>
<input type="submit" value="select a few,than click me">
</form>
</body>
</html>
下面这个例题,是一个较复杂的:
Code<html><head><title>form_multipy selects</title>
<script language="javascript">
<!--
var dogs=new Array("poodle","puli","greyhound");
var fish=new Array("trout","mackerel","bass");
var birds=new Array("robin","hummingbird","crow");
function test(the_arrary_name)
{
var the_array=eval(the_arrary_name);
setOptionText(window.document.the_form.the_examples,the_array);
}
function setOptionText(the_select,theArray)
{
for(loop=0;loop<the_select.options.length; loop++)
{
the_select.options[loop].text=theArray[loop];
}
}
-->
</script>
</head>
<body>
<h3>My favorite animal is
<br></h3><form name="the_form">
<select name="choose_category" onChange="test(window.document.the_form.choose_category.options[selectedIndex].text);">
<option selected="selected">dogs
<option>fish
<option>birds
</select>
<select name="the_examples" multiple>
<option>poodle
<option>puli
<option>greyhound
</select>
</form>
</body>
</html>
