表单编程

最新推荐文章于 2020-06-10 01:12:03 发布

敢敢--

最新推荐文章于 2020-06-10 01:12:03 发布

阅读量410

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/yu9696/article/details/50988989

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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方式；

    <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/>

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

敢敢--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单编程

表单编程表单form必要属性为action 和 method（默认值为get）表单下面的表单元素必须有一个属性是name 表单提交方式 get和post的区别？ 1. get是从服务器上获取数据，post是向服务器传送数据。2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过H
复制链接

扫一扫

专栏目录