2015/12/17--from,input对象
<!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 onload="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" onkeyup="checkLen(this,this.value)" maxlength="3">
<input size="2" tabindex="2" onkeyup="checkLen(this,this.value)" maxlength="2">
<input size="3" tabindex="3" onkeyup="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" onclick="moveNum()" value="-->()" >
<input type="button" id = "result" size="20">
</form>
//表单中的下拉列表
<form>
请选择你喜欢的浏览器：
<select id = "myBrowser" onchange="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="选定内容" onclick="selText()">
</form>
//设置和移开文本域上的焦点
<form>
<input type="text" id = "text1">
<br>
<input type="button" value="设置焦点" onclick="setFocus()">
<input type="button" value="lose focus" onclick="loseFocus()">
</form>
//验证表单
<form action="/example/htmldom/i.jpg" onsubmit="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" onclick="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" onclick="formReset()" value="重置">
</form>
//使用单选按钮中的value属性
<p>你喜欢哪款浏览器？</p>
<form>
<input type="radio" name = "browser" onclick="check(this.value)" value="Opera">Opera<br>
<input type="radio" name = "browser" onclick="check(this.value)" value="Firefox">Firefox<br>
<input type="radio" name = "browser" onclick="check(this.value)" value="Internet Explore">Internet Explore<br>
<input type="radio" name = "browser" onclick="check(this.value)" value="Netscape">Netscape<br>
<input type="radio" name = "browser" onclick="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" onclick="show_method()">
</form>
//提示按钮的id和类型+禁用按钮
<form>
<input type="button" onclick="" value="Click me!please" id="mybutton">
</form>
//选定以及不选定的checkbox
<form>
<input type="checkbox" id="mycheck">
<input type="button" onclick="check()" value="选定复选框">
<input type="button" onclick="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" onclick="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" onclick="if(this.checked) {(convertToUcase())}">
</form>
</body>
</html>
浙公网安备 33010602011771号