<!DOCTYPE html>
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //改变表单的action属性 function changeAnction(){ var x = document.getElementById("myform"); alert("orignal.action" + x.action); x.action = "/htmldom/index.asp"; alert("New.action" + x.action); x.submit(); } //返回服务器发送数据的http方法 function show_method(){ var a = document.getElementById("myform"); alert(a.method); } //提示按钮的id和类型+禁用按钮 function alert(){ var txt = "Id:" + document.getElementById("mybutton").id; txt = txt + ",:type" + document.getElementById("mybutton").type; alert(txt); document.getElementById("mybutton").Disabled = true; } //选定以及不选定的checkbox function check(){ document.getElementById("mycheck()").checked = true; } function uncheck(){ document.getElementById("mycheck()").checked = false; } //一个表单中若干个checkbox function creatOrder(){ coffee = document.forms[0].coffee; txt = ""; for(var i = 0;i < coffee.length;i++){ if(coffee[i].checked){ txt = txt + coffee[i].value + ""; } } document.getElementById("order").value = "您订购的咖啡有：" + txt; } //checkbox--把文本转换成大写 function covertToUcase(){ document.getElementById("fname").value = document.getElementById("fname").value.toUpperCase(); document.getElementById("lname").value = document.getElementById("lname").value.toUpperCase(); } //使用单选按钮中的value属性 function check(browser){ document.getElementById("answer").value = browser; } //重制表单 function formReset(){ document.getElementById("myForm").reset(); } //提交表单 function formSubmit(){ document.getElementById("myForm1").submit(); } //验证表单 function validate(){ var at = document.getElementById("email").value.indexof("@"); var Xname = document.getElementById("xname").value; var age = document.getElementById("age").value; submitOK = "true"; if(Xname.length > 10){ alert("名字必须小于 10 个字符。"); submitOK = "false"; } if(isNaN(age)||age < 1&& age >100){ alert("年龄必须是 1 与 100 之间的数字。"); submitOK = "false"; } if(at == -1){ alert("不是有效的电子邮件地址。"); submitOK = "false"; } if(submitOK == false){ return false; } } //设置和移开文本域上的焦点 function setFocus(){ document.getElementById("text1").focus(); } function loseFunction(){ document.getElementById("text1").blur(); } //选定文本域中的内容 function selText(){ document.getElementById("myText").select(); } //表单中的下拉列表 function favBrowser(){ var myList = document.getElementById("myBrowser"); document.getElementById("favorite").value = myList.options[myList.selectedIndex].text; } //另一个下拉列表 function moveNum(){ var Num = document.getElementById("Num"); var options = Num.options[options.selectedIndex].text; var txt = document.getElementById("result").value; txt = txt + options; document.getElementById("result").value = txt; } //当达到文本域最大字符串时跳至下一个域 function checkLen(x,y){ if(y.length == x.maxLength){ var next = x. tabIndex; if(next < document.getElementById("myForm2").length){ document.getElementById("myForm2").elements[next].focus(); } } } //为若干表单添加快捷键 function accesskey(){ document.getElementById("myName").accessKey= "n"; document.getElementById("mypwd").accessKey= "p"; document.getElementById("ie").accessKey= "i"; document.getElementById("fx").accessKey= "f"; document.getElementById("mybutton1").accessKey= "n"; } </script></head><body οnlοad="accesskey">//为若干表单添加快捷键<form> 姓名：<input type="text" id = "myName"><br> 年龄：<input type="password" id = "mypwd"><br> <br><br> 选择你喜欢的浏览器： <input type="radio" name="browser" id = "ie" value="Internet explore">Internet explore<br> <input type="radio" name = "browser" id = "fx" value="fireFox">fireFox<br> <br> <input type="button" id = "mybutton1" value="Click me !"></form><p>（请使用 Alt + <i>accesskey</i> 为不同的表单字段赋予焦点。）</p>//当达到文本域最大字符串时跳至下一个域<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p><form id = "myForm2"> <input size="3" tabindex="1" οnkeyup="checkLen(this,this.value)" maxlength="3"> <input size="2" tabindex="2" οnkeyup="checkLen(this,this.value)" maxlength="2"> <input size="3" tabindex="3" οnkeyup="checkLen(this,this.value)" maxlength="3"></form>//另一个下拉列表<form> 请选择数字：<br> <select id="Num"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <input type="button" οnclick="moveNum()" value="-->()" > <input type="button" id = "result" size="20"></form>//表单中的下拉列表<form> 请选择你喜欢的浏览器： <select id = "myBrowser" οnchange="favBrowser"> <option>Netscape</option> <option>fireFox</option> <option>Opera</option> </select></form><p>你喜欢的浏览器是：<input type="text" size="30" id = "favorite"></p>//选定文本域中的内容<form> <input size="25" type="text" value="choose me!please" id = "myText"> <input type="button" value="选定内容" οnclick="selText()"></form>//设置和移开文本域上的焦点<form> <input type="text" id = "text1"> <br> <input type="button" value="设置焦点" οnclick="setFocus()"> <input type="button" value="lose focus" οnclick="loseFocus()"></form>//验证表单<form action="/example/htmldom/i.jpg" οnsubmit="return validate()"> Name1:（最多 10 个字符）：<input type="text" id="xname" size="20"><br /> Age:（从 1 到 100）：<input type="text" id="age" size="20"><br /> Email：<input type="text" id="email" size="20"><br /> <br /> <input type="submit" value="提交"></form>//提交表单<p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p><form id = "myForm1" method="get" action="/1/i.peg"> Name:<input type="text" size="20" name="firstname"><br> Favorite:<input type="text" name = "lastname" size="20"><br> <br> <input type="button" οnclick="formSubmit()" value="submit"></form>//重制表单<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p><form id="myForm"> 姓名：<input type="text" size="20"><br /> 年龄：<input type="text" size="20"><br /> <br /> <input type="button" οnclick="formReset()" value="重置"></form>//使用单选按钮中的value属性<p>你喜欢哪款浏览器？</p><form> <input type="radio" name = "browser" οnclick="check(this.value)" value="Opera">Opera<br> <input type="radio" name = "browser" οnclick="check(this.value)" value="Firefox">Firefox<br> <input type="radio" name = "browser" οnclick="check(this.value)" value="Internet Explore">Internet Explore<br> <input type="radio" name = "browser" οnclick="check(this.value)" value="Netscape">Netscape<br> <input type="radio" name = "browser" οnclick="check(this.value)" value="hao.123.com">hao.123.com<br> 你喜欢的浏览器是：<input type="text" id = "answer" size="20"></form>//改变表单的action属性<form id = "myform" action="/1/e.peg"> 名称：<input type="text" value="白老鼠"> <input type="button" value="改变表单的action属性并且提交表单"> //返回服务器发送数据的http方法 名称：<input type="text" value="你好"> <input type="button" value="show method" οnclick="show_method()"></form>//提示按钮的id和类型+禁用按钮<form> <input type="button" οnclick="" value="Click me!please" id="mybutton"></form>//选定以及不选定的checkbox<form> <input type="checkbox" id="mycheck"> <input type="button" οnclick="check()" value="选定复选框"> <input type="button" οnclick="uncheck()" value="没有选定复选框"></form>//一个表单中若干个checkbox<p>你喜欢怎么喝咖啡？</p><form> <input type="checkbox" name = "coffee" value="奶油">加奶油<br /> <input type="checkbox" name="coffee" value="加糖块">加糖块<br/> <br><br> <input type="button" οnclick="creatOrder()" value="发送订单"> <br><br> <input type="text" id="order" size="50"></form>//checkbox--把文本转换成大写<form id = "form1"> name:<input type="text" size="20" id="fname"> <br><br> hobby:<input type="text" size="20" id="lname"> <br><br> 转换成大写：<input type="checkbox" οnclick="if(this.checked) {(convertToUcase())}"></form></body></html>