转载http://www.w3school.com.cn/example/hdom_examples.asp
<html> <head> <script type="text/javascript"> function check() { document.getElementById("myCheck").checked=true } function uncheck() { document.getElementById("myCheck").checked=false } </script> </head> <body> <form> <input type="checkbox" id="myCheck" /> <input type="button" οnclick="check()" value="选定复选框" /> <input type="button" οnclick="uncheck()" value="取消选定复选框" /> </form> </body> </html>
<html> <head> <script type="text/javascript"> function createOrder() { coffee=document.forms[0].coffee txt="" for (i=0;i<coffee.length;++ i) { if (coffee[i].checked) { txt=txt + coffee[i].value + " " } } document.getElementById("order").value="您订购的咖啡带有： " + txt } </script> </head> <body> <p>你喜欢怎么喝咖啡？</p> <form> <input type="checkbox" name="coffee" value="奶油">加奶油<br /> <input type="checkbox" name="coffee" value="糖块">加糖块<br /> <br /> <input type="button" οnclick="createOrder()" value="发送订单"> <br /><br /> <input type="text" id="order" size="50"> </form> </body> </html>
<html> <head> <script type="text/javascript"> function convertToUcase() { document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase() document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase() } </script> </head> <body> <form name="form1"> 名：<input type="text" id="fname" size="20" /> <br /><br /> 姓：<input type="text" id="lname" size="20" /> <br /><br /> 转换为大写 <input type="checkBox" οnclick="if (this.checked) {convertToUcase()}"> </form> </body> </html>
<html> <head> <script type="text/javascript"> function check(browser) { document.getElementById("answer").value=browser } </script> </head> <body> <p>您喜欢哪款浏览器？</p> <form> <input type="radio" name="browser" οnclick="check(this.value)" value="Internet Explorer">Internet Explorer<br /> <input type="radio" name="browser" οnclick="check(this.value)" value="Firefox">Firefox<br /> <input type="radio" name="browser" οnclick="check(this.value)" value="Netscape">Netscape<br /> <input type="radio" name="browser" οnclick="check(this.value)" value="Opera">Opera<br /> <br /> 您喜欢的浏览器是：<input type="text" id="answer" size="20"> </form> </body> </html>
5.1重置表单
<html> <head> <script type="text/javascript"> function formReset() { document.getElementById("myForm").reset() } </script> </head> <body> <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> </body> </html>
6.1提交表单
<html> <head> <script type="text/javascript"> function formSubmit() { document.getElementById("myForm").submit() } </script> </head> <body> <p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p> <form id="myForm" action="/i/eg_smile.gif" method="get"> 名：<input type="text" name="firstname" size="20"><br /> 姓：<input type="text" name="lastname" size="20"><br /> <br /> <input type="button" οnclick="formSubmit()" value="提交"> </form> </body> </html>
7.1验证表单
<html> <head> <script type="text/javascript"> function validate() { var at=document.getElementById("email").value.indexOf("@") var age=document.getElementById("age").value var fname=document.getElementById("fname").value submitOK="true" if (fname.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 } } </script> </head> <body> <form action="/example/hdom/hdom_submitpage.html" οnsubmit="return validate()"> 名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br /> 年龄（从 1 到 100）：<input type="text" id="age" size="20"><br /> 电子邮件：<input type="text" id="email" size="20"><br /> <br /> <input type="submit" value="提交"> </form> </body> </html>
8.1设置和移开文本域上的焦点
<html> <head> <script type="text/javascript"> function setFocus() { document.getElementById('text1').focus() } function loseFocus() { document.getElementById('text1').blur() } </script> </head> <body> <form> <input type="text" id="text1" /> <br /> <input type="button" οnclick="setFocus()" value="设置焦点" /> <input type="button" οnclick="loseFocus()" value="失去焦点" /> </form> </body> </html>
9.1选取文本域中的内容
<html> <head> <script type="text/javascript"> function selText() { document.getElementById("myText").select() } </script> </head> <body> <form> <input size="25" type="text" id="myText" value="选定我吧！"> <input type="button" value="选择文本" οnclick="selText()"> </form> </body> </html>
10.1表单中的下拉列表
<html> <head> <script type="text/javascript"> function favBrowser() { var mylist=document.getElementById("myList") document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text } </script> </head> <body> <form> 请选择您喜欢的浏览器： <select id="myList" οnchange="favBrowser()"> <option>Internet Explorer</option> <option>Netscape</option> <option>Opera</option> </select> <p>您喜欢的浏览器是：<input type="text" id="favorite" size="20"></p> </form> </body> </html>
11.1另一个下拉列表
<html> <head> <script type="text/javascript"> function moveNumbers() { var no=document.getElementById("no") var option=no.options[no.selectedIndex].text var txt=document.getElementById("result").value txt=txt + option document.getElementById("result").value=txt } </script> </head> <body> <form> 请选择数字：<br /> <select id="no"> <option>0</option> <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> </select> <input type="button" οnclick="moveNumbers()" value="-->"> <input type="text" id="result" size="20"> </form> </body>
<html> <head> <script type="text/javascript"> function checkLen(x,y) { if (y.length==x.maxLength) { var next=x.tabIndex if (next<document.getElementById("myForm").length) { document.getElementById("myForm").elements[next].focus() } } } </script> </head> <body> <p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p> <form id="myForm"> <input size="3" tabindex="1" maxlength="3" οnkeyup="checkLen(this,this.value)"> <input size="2" tabindex="2" maxlength="2" οnkeyup="checkLen(this,this.value)"> <input size="3" tabindex="3" maxlength="3" οnkeyup="checkLen(this,this.value)"> </form> </body> </html>
2921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
