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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
利用python分析access日志的方法
Oct 26 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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代码包装修正版
2008/03/15 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python continue语句用法实例
2014/03/11 Python
Python pickle模块用法实例分析
2015/05/27 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python实现自动重启本程序的方法
2015/07/09 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python数据结构之翻转链表
2017/02/25 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python语言中有算法吗
2020/06/16 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
环保项目建议书
2014/08/26 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
催款律师函范文
2015/05/27 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Django框架中模型的用法
2022/06/10 Python