Form 和 Input 对象

更改表单的 action 属性

<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>


<form id="myForm" action="/i/eg_smile.gif">
名称:<input type="text" value="米老鼠" />
<input type="button" onclick="changeAction()"
value="改变 action 属性并提交表单" />
</form>


</body>
</html>

返回向服务器发送数据的 HTTP 方法


提示按钮的 id 和 类型 + 禁用按钮

<html>
<head>
<script type="text/javascript">
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id
txt=txt + ", type: " + document.getElementById("myButton").type
alert(txt)


document.getElementById("myButton").disabled=true
}
</script>
</head>


<body>
<form>
<button id="myButton" onClick="alertId()">请点击我!</button>
</form>
</body>


</html>

选定以及不选定 checkbox

<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" onclick="check()" value="选定复选框" />
<input type="button" onclick="uncheck()" value="取消选定复选框" />
</form>
</body>


</html>

一个表单中的若干个 checkbox

<html>
<head>
<script type="text/javascript">
function createOrder()
{
coffee=document.forms[0].coffee
var 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" onclick="createOrder()" value="发送订单">
<br /><br />
<input type="text" id="order" size="100">
</form>
</body>


</html>

Checkbox - 把文本转换为大写


使用单选按钮中的 value 属性

重置表单


提交表单


验证表单


设置和移开文本域上的焦点


选取文本域中的内容


表单中的下拉列表


另一个下拉列表


当达到文本域的最大字符数时跳至下一个域


为若干表单域添加快捷键


posted @ 2014-03-17 19:12  JAVA之迷  阅读(202)  评论(0编辑  收藏  举报