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 相关文章推荐
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
JavaScript 异步调用
Oct 25 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue中render函数的使用详解
Oct 12 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
使用Python对MySQL数据操作
2017/04/06 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Django分组聚合查询实例分享
2020/04/29 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
python里glob模块知识点总结
2021/01/05 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
什么是会话Bean
2015/05/14 面试题
出生公证书样本
2014/04/04 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server