表单编程
2016-03-26 21:30
316 查看
<h1>表单编程</h1>
表单form必要属性为action 和 method（默认值为get） <br/>
表单下面的表单元素必须有一个属性是name <br/>
表单提交方式 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" onsubmit="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="我也可以提交表单" onclick="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="" onchange="/*alert('触发了change事件======')*/" onblur="/*alert('触发了blur事件+++++')*/"
onselect="alert('选中了文字')" onfocus="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="获取多行文本框中的内容" onclick="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="操作单选按钮" onclick="getradio()"/>
</form>
<script>
function getradio(){
var t=document.myform.test;
alert(t[0].value);
}
</script>
<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" onsubmit="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="我也可以提交表单" onclick="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="" onchange="/*alert('触发了change事件======')*/" onblur="/*alert('触发了blur事件+++++')*/"
onselect="alert('选中了文字')" onfocus="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="获取多行文本框中的内容" onclick="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="操作单选按钮" onclick="getradio()"/>
</form>
<script>
function getradio(){
var t=document.myform.test;
alert(t[0].value);
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- VB.Net文本框提示及一次性清空
- SpringMVC 基于注解的Controller详解
- eventlet引发的学习－python协程：eventlet[待续]
- 据廖雪峰python3教程----python学习第六天
- 我用Python写自动刷代理服务IP的经过
- implement of deep neural network --- python
- java 复杂链表的复制
- php数组合并
- java中子类与父类的同名变量覆盖问题
- 20145229吴姗珊 《Java程序设计》第4周学习总结
- PHP文件属性相关函数
- C# WindowsAPI
- MyEclipse或Eclipse安装aptana插件
- [024] 11大Java开源中文分词器的使用方法和分词效果对比
- [面试] C/C++语法（三）—— 字符串
- 探讨下c++中的多态
- 简短的汉字统计代码
- 从机器学习实战代码3-5，窥探Python函数属性问题
- python回调函数
- c++中模板函数和非模板函数的重载