DOM基础教程之使用DOM控制表单


Posted in Javascript onJanuary 20, 2015

1.表单简介

表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法
javascript中可以很方便的操作表单,例如获得表单数据进行有效验证,自动给表单域赋值,处理表单事件等。
此时每个form都解析为一个对象,即form对象,可以通过document.forms集合来引用这些对象,例如一个nama属性为form1的表单可以使用

document.forms["form1"]

不仅如此,还可以通过表单在文档中的索引来引用表单对象。例如

document.forms[1]

表示引用文档中的第二个表单对象

DOM基础教程之使用DOM控制表单

以下为一个包含多种form元素,每个元素都有label标记,绑定在元素上,这样通过点击文字就能定为和选择到表格,提高了用户体验。

<form method="post" name="myForm1" action="addInfo.aspx">

<p><label for="name">请输入您的姓名:</label><br><input type="text" name="name" id="name"></p>

<p><label for="passwd">请输入您的密码:</label><br><input type="password" name="passwd" id="passwd"></p>

<p><label for="color">请选择你最喜欢的颜色:</label><br>

<select name="color" id="color">

    <option value="red">红</option>

    <option value="green">绿</option>

    <option value="blue">蓝</option>

    <option value="yellow">黄</option>

    <option value="cyan">青</option>

    <option value="purple">紫</option>

</select></p>

<p>请选择你的性别:<br>

    <input type="radio" name="sex" id="male" value="male"><label for="male">男</label><br>

    <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p>

<p>你喜欢做些什么:<br>

    <input type="checkbox" name="hobby" id="book" value="book"><label for="book">看书</label>

    <input type="checkbox" name="hobby" id="net" value="net"><label for="net">上网</label>

    <input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡觉</label></p>

<p><label for="comments">我要留言:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>

<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">

<input type="reset" name="btnReset" id="btnReset" value="Reset"></p>

</form>

通常每个表单元素应该有name和id属性,name用于交给服务器,id用于绑定和功能筛选。

2.访问表单中的元素

表单中的元素,无论文本框、单选按钮、下拉按钮、下拉列表框或者其他的内容,都包含在form的elements集合中,可以利用元素在集合中的位置或元素的name属性来获得该元素的引用。

var oForm = document.forms["form1"]//获取表单

        var otextForm = oForm.elements[0]; //获取第一个元素

        var otextPasswd = oForm.elements["passwd"] //获取name属性为passwd的元素

使用效果最高,最直观的方法引用:

var otextcomments = oForm.elements.comments; //获取name属性为comments的元素

3.公共属性与方法

所有表单中的元素(除了隐藏元素)都有一些共同的属性、方法。这里将一些常用的罗列

DOM基础教程之使用DOM控制表单

var oForm = document.forms["form1"]; //获取表单

            var otextcomments = oForm.elements.comments; //获取name属性为comments的元素

            alert(oForm.type); //查看元素类型

            var otextPasswd = oForm.elements["passwd"]; //获取name属性为passwd的元素

            otextPasswd.focus(); //聚焦到特定的元素上

4.表单的提交

form中的提交通过按钮或者具备按钮功能的图片来完成

<input type="submit" name="btnsubmit" id="btnSubmit" value="Submit">

        <input type="image" name="picSubmit" id="picSSubmit" src="Submit.jpg">

当用户按回车键或者单击其中一个按钮时,就可以完成表单的提交,无需其他代码。可以通过form中的action属性来检测是否提交。

<form method="post" name="form1" action="javascript:alert('submited')"></form>

用户在提交表单的过程中可能因为网速过慢而反复单击提交按钮,这对服务器而言是很大的负担,可以通过使用disabled属性来禁止这种行为。例如:

<input type="button" value="Submit" />
Javascript 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
DOM基础教程之使用DOM控制表格
Jan 20 #Javascript
jQuery实现tag便签去重效果的方法
Jan 20 #Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 #Javascript
DOM基础教程之事件类型
Jan 20 #Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 #Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
You might like
php 表单数据的获取代码
2009/03/10 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue实现评价星星功能
2020/06/30 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python把转列表为集合的方法
2019/06/28 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
Java语言的优势
2015/01/10 面试题
博士生入学考试推荐信
2013/11/17 职场文书
挂职思想汇报
2013/12/31 职场文书
40岁生日感言
2014/02/15 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
匿名信格式范文
2015/05/27 职场文书
学生病假条范文
2015/08/17 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis