<h1>表单编程</h1>
表单form必要属性为action 和 method(默认值为get) <br/>
表单下面的表单元素必须有一个属性是name <br/>
表单提交方式 get和post的区别?
1. get是从服务器上获取数据,post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。
post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。
用户看不到这个过程。
3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,
服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
但理论上,IIS4中最大量为80KB,IIS5中为100KB。
5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。 建议: 1、get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式; 2、在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;
<br/>
<form action="myjs_hw1.html" method="post" id="myform" name="myform">
姓名: <input type="text" name="username" />
<br/>
<div>123456</div>
<select name="sel" id="sel"></select>
<input type="password" name="" id=""/>
<input type="submit" value="提交"/>
</form>
<script>
//获取表单form
var myform;
//dom方式的id属性
myform=document.getElementById("myform");
// alert(myform.nodeName);
//bom下面的document所特有的表单集合
myform=window.document.forms;
// alert(myform.length);
// alert(myform[0])
// alert(myform["myform"]);
//document下面可以直接使用name属性的名称来获取对应的元素
myform = document.myform;
// alert(myform);
//获取表单中的具体书写内容的表单元素
var e;
//表单下面的所有表单元素(其它元素不包含)
e=myform.elements;
// alert(e.length);
// alert(e[0].type);
// alert(e["username"].type);
//通过表单下面的表单元素name属性去获取
e=myform.username;
// alert(e.type);
</script>
2.表单编程二
表单元素input--》type=image可以替代提交按钮功能 <br/>
可以用普通按钮来编程实现提交按钮功能,使用js函数submit() <br/>
提交按钮或者图片提交按钮会触发表单的submit事件,而手动调用submit函数则不触发 <br/>
submit事件代码中,如果有返回值且返回值为TRUE,代表通过验证,提交数据; 反之,返回FALSE,验证未通过,不提交 <br/>
<form action="myjs_hw1.html" id="uform" name="uform" οnsubmit="return false/*alert('提交表单操作')*/">
姓名: <input type="text" name="username"/>
<br/>
密码: <input type="password" name="userpwd"/>
<br/>
<input type="submit" value="提交"/>
<input type="image" src="images/ad1.jpg" alt="提交" width="100"/>
<input type="button" value="我也可以提交表单" οnclick="mysubmit()" />
</form>
<script>
function mysubmit(){
document.uform.submit();
}
</script>
《注:能用到元素自己的属性的尽量用,比如maxlength!!!》
3.表单编程三
<body>
disabled代表不可用,不能写入,也无法进行数据提交 <br/>
readonly代表只读,不能写入数据,但是可以将已有数据提交 <br/>
change事件 指代修改了内容并失去焦点后触发;blur仅仅只是失去焦点后触发 <br/>
有change事件必定有blur事件,同时blur事件的代码在change事件之后执行 <br/>
select事件代表元素中有文字内容被选中了(思考查询:如何获取被选中的文字) <br/>
<form action="myjs_hw1.html" id="uform" name="uform">
姓名: <input value="" οnchange="/*alert('触发了change事件======')*/" οnblur="/*alert('触发了blur事件+++++')*/"
οnselect="alert('选中了文字')" οnfοcus="this.select()"
type="text" name="username"/>
<br/>
密码: <input value="" style="width: 200px;" type="password" name="userpwd"/>
<br/>
说明: <textarea style="resize: none;width: 200px;" name="desc" id="desc">请输入个人说明信息</textarea>
<br/>
<input type="submit" value="提交"/>
<input type="button" value="获取多行文本框中的内容" οnclick="getinfo()"/>
</form>
</body>
<script>
function getinfo(){
alert(document.uform.desc.value);
// alert(document.uform.desc.innerHTML);
}
</script>
4.表单编程四
单选按钮组radio通常使用同一个name属性,必须有一个被选中才能正常提交 <br/>
单选按钮如果没有value属性,则传递时默认值为on <br/>
因此,为了满足上述条件,需要给单选按钮设置value,同时要有一个默认被选中 <br/>
<form action="#" id="myform" name="myform">
<input type="radio" value="吃饭" checked name="test" id="t1"/>吃饭
<input type="radio" value="睡觉" name="test" id="t2"/>睡觉
<input type="radio" value="打豆豆" name="test" id="t3"/>打豆豆
<input type="radio" value="无聊" name="test" id="t4"/>无聊
<input type="radio" value="发呆" name="test" id="t5"/>发呆
<input type="radio" value="WC" name="test" id="t6"/>WC
<br/>
<input type="checkbox" value="music" name="chk" id="chk1"/>音乐
<input type="checkbox" value="reading" name="chk" id="chk2"/>读书
<input type="checkbox" value="sport" name="chk" id="chk3"/>运动
<input type="checkbox" value="gaming" name="chk" id="chk4"/>游戏
<input type="checkbox" value="goinginternet" name="chk" id="chk5"/>上网
<br/>
<input type="submit" value="提交"/>
<br/>
<input type="button" value="操作单选按钮" οnclick="getradio()"/>
</form>
<script>
function getradio(){
var t=document.myform.test;
alert(t[0].value);
}
</script>