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 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
Angular4 反向代理Details实践
May 30 Javascript
JavaScript中的 new 命令
May 22 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
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的一个简单加密解密代码
2014/01/14 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
简单实现python进度条脚本
2017/12/18 Python
python 自定义装饰器实例详解
2019/07/20 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
python os.listdir()乱码解决方案
2021/01/31 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
Go 语言中 20 个占位符的整理
2021/10/16 Golang
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
MySQL主从切换的超详细步骤
2022/06/28 MySQL