泉州浮桥网页设计培训班实例笔记HTML DOM 实例(四)-Form 和 Input 对象

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 方法

<html><head>

<script type=”text/javascript”>

function showMethod() {

var x=document.getElementById(“myForm”)

alert(x.method)

}

</script>

</head>

<body>

<form id=”myForm” method=”post”>

名称:<input type=”text” value=”米老鼠” />

<input type=”button” onclick=”showMethod()” value=”显示 method” />

</form>

</body></html>

提示按钮的 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

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=”50″>

</form>

</body>

</html>

Checkbox – 把文本转换为大写

<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” onclick=”if (this.checked) {convertToUcase()}”>

</form>

</body></html>

使用单选按钮中的 value 属性

<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” onclick=”check(this.value)” value=”Internet Explorer”>Internet Explorer<br />

<input type=”radio” name=”browser” onclick=”check(this.value)” value=”Firefox”>Firefox<br />

<input type=”radio” name=”browser” onclick=”check(this.value)” value=”Netscape”>Netscape<br />

<input type=”radio” name=”browser” onclick=”check(this.value)” value=”Opera”>Opera<br />

<br />

您喜欢的浏览器是:<input type=”text” id=”answer” size=”20″>

</form>

</body></html>

重置表单

<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” onclick=”formReset()” value=”重置”>

</form>

</body></html>

提交表单

<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” onclick=”formSubmit()” value=”提交”>

</form>

</body>

</html>

验证表单

<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” onsubmit=”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>

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

<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” onclick=”setFocus()” value=”设置焦点” />

<input type=”button” onclick=”loseFocus()” value=”失去焦点” />

</form>

 

</body>

</html>

选取文本域中的内容

<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=”选择文本” onclick=”selText()”>

</form>

</body>

 

</html>

表单中的下拉列表

<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” onchange=”favBrowser()”>

<option>Internet Explorer</option>

<option>Netscape</option>

<option>Opera</option>

</select>

<p>您喜欢的浏览器是:<input type=”text” id=”favorite” size=”20″></p>

</form>

</body>

 

</html>

另一个下拉列表

<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” onclick=”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″ onkeyup=”checkLen(this,this.value)”>

<input size=”2″ tabindex=”2″ maxlength=”2″ onkeyup=”checkLen(this,this.value)”>

<input size=”3″ tabindex=”3″ maxlength=”3″ onkeyup=”checkLen(this,this.value)”>

</form>

</body>

 

</html>

为若干表单域添加快捷键

<html><head>

<script type=”text/javascript”>

function access(){

document.getElementById(‘myName’).accessKey=”n”

document.getElementById(‘myPwd’).accessKey=”p”

document.getElementById(‘ie’).accessKey=”i”

document.getElementById(‘fx’).accessKey=”f”

document.getElementById(‘myButton’).accessKey=”b”

}

</script>

</head>

 

<body onload=”access()”>

<form>

姓名:<input id=”myName” type=”text” />

<br />

密码:<input id=”myPwd” type=”password” />

<br /><br />

选择您喜欢的浏览器:

<br />

<input type=”radio” name=”browser” id=”ie” value=”Internet Explorer”>Internet Explorer<br />

<input type=”radio” name=”browser” id=”fx” value=”Firefox”>Firefox

<br /><br />

<input type=”button” value=”点击我!” id=”myButton” />

</form>

<p>(请使用 Alt + <i>accesskey</i> 为不同的表单字段赋予焦点。)

</p>

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注