JavaScript 使用表单
使用表单
1.使用文本框
< form name =form1 >
< input type =text value ="information ,please" name =text1 >
</ form >
< script >
document.write( " 表单text1类型是: " + document.form1.text1.type + " <br> " )
document.write( " 表单text1名称是: " + document.form1.text1.name + " <br> " )
document.write( " 表单text1值是: " + document.form1.text1.value + " <br> " )
document.write( " 表单text1大小是: " + document.form1.text1.size + " <br> " )
</ script >
< form name =form1 >
< input type =text name =text1 value =click here
onfocus =document.form1.text1.select() >
</ form >
2.使用密码框
< form name =form1 >
< input type =password name =pw1 value =daylight >
</ form >
< script >
document.write( " 表单pw1的类型: " + document.form1.pw1.type + " <br> " )
document.write( " 表单pw1的名称: " + document.form1.pw1.name + " <br> " )
document.write( " 表单pw1的值: " + document.form1.pw1.value + " <br> " )
document.write( " 表单pw1的大小: " + document.form1.pw1.size + " <br> " )
</ script >
3.使用隐藏字段
< form name =form1 >
< input type =hidden name =hid1 value =piece of eight >
</ form >
< script >
document.write( " 表单hid1的类型: " + document.form1.hid1.type + " <br> " )
document.write( " 表单hid1的名称: " + document.form1.hid1.name + " <br> " )
document.write( " 表单hid1的值: " + document.form1.hid1.value + " <br> " )
</ script >
4.使用文本区域框
< form name =form1 >
< textarea name =ta1 > how many grains of sand are there in the sahara desert? </ textarea >
</ form >
< script >
document.write( " 表单ta1的类型: " + document.form1.ta1.type + " <br> " )
document.write( " 表单ta1的名称: " + document.form1.ta1.name + " <br> " )
document.write( " 表单ta1的值: " + document.form1.ta1.value + " <br> " )
document.write( " 表单ta1的横向宽度: " + document.form1.ta1.cols + " <br> " )
document.write( " 表单ta1的纵向宽度: " + document.form1.rows.value + " <br> " )
</ script >
< form name =form1 >
< textarea name =ta1 rows =4 onfocus ="document.form1.ta1.select()" > how many grains of sand are there in the sahara desert? </ textarea >
</ form >
5.使用按钮
< form name =form1 >
< input type =button name =button1 value =标准按钮 >
</ form >
< script >
document.write( " 表单button1的类型: " + document.form1.button1.type + " <br> " )
document.write( " 表单button1的名称: " + document.form1.button1.name + " <br> " )
document.write( " 表单button1的值: " + document.form1.button1.value + " <br> " )
</ script >
< form name =form1 >
< input type =text name =text1 size =45 >< br >
< input type =button name =button1 value =panic button onclick ="document.form1.text1.value='sittle down,count to 10 and take a deep breath'" >
</ form >
6.使用重置按钮
< form name =form1 >
< input type =reset name =reset1 value ="rest form" >
</ form >
< script >
document.write( " 表单reset1的类型: " + document.form1.reset1.type + " <br> " )
document.write( " 表单reset1的名称: " + document.form1.reset1.name + " <br> " )
document.write( " 表单reset1的值: " + document.form1.reset1.value + " <br> " )
</ script >
7.使用提交按钮
< form name =form1 >
< input type =submit name =submit1 value ="submit form" >
</ form >
< script >
document.write( " 表单submit1的类型: " + document.form1.submit1.type + " <br> " )
document.write( " 表单submit1的名称: " + document.form1.submit1.name + " <br> " )
document.write( " 表单submit1的值: " + document.form1.submit1.value + " <br> " )
</ script >
8.使用复选按钮
< form name =form1 >
< input type =checkbox name =cb1 > computer savvy?
</ form >
< script >
document.write( " 表单cb1的类型: " + document.form1.cb1.type + " <br> " )
document.write( " 表单cb1是否被选择?: " + document.form1.cb1.checked + " <br> " )
document.write( " 表单cb1的名称: " + document.form1.cb1.name + " <br> " )
</ script >
9.使用单选按钮
< form name =form1 >
< input type =radio name =radio1 > male
< input type =radio name =radio1 > female
</ form >
< script >
document.write( " 第一个按钮被选择 " + document.form1.radio1[ 0 ].checked + " <br> " )
document.write( " 第二个按钮被选择 " + document.form1.radio1[ 1 ].checked + " <br> " )
document.write( " 按钮的名称 " + document.form1.radio1[ 0 ].name + " <br> " )
document.write( " 按钮的个数 " + document.form1.radio1.length)
</ script >
10.使用选择列表
< form name =form1 >
< select name =select1 size =4 >
< option name =option1 value =lon > london,England </ option >
< option name =option2 value =dub > Dublin,Ireland </ option >
</ select >
</ form >
< script >
document.write( " 这个选择列表的名称 " + document.form1.select1.name + " <br> " )
document.write( " 这个选择列表的长度 " + document.form1.select1.length + " <br> " )
document.write( " 这个选择列表当前被选择的索引号 " + document.form1.select1.selectedIndex + " <br> " )
document.write( " 这个选择列表的尺寸 " + document.form1.select1.size + " <br> " )
</ script >
11.验证表单的有效性
< script >
function validate(){
if (document.form1.text1.value != ' 1 ' || ' 2 ' || ' 3 ' || ' 4 ' ){
alert( " 请输入1~4的整数 " )
}
}
</ script >
< form name =form1 >
请输入1~4的整数:
< input type =text name =text1 size =4 onchange =validate() >
</ form >
12.控制表单焦点
< form name =form1 >
< input type =text name =text1 value =where is you focus? >< br >
< input type =text name =text2 value =is there? >< br >
< input type =text name =text3 value =or maybe here? >< br >
< input type =button name =button1 value ="text box #1" onclick =document.form1.text1.focus() >< br >
< input type =button name =button2 value ="text box #2" onclick =document.form1.text2.focus() >< br >
< input type =button name =button3 value ="text box #3" onclick =document.form1.text3.focus() >< br >
</ form >
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did48429