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分页代码(当前页码居中)
Sep 20 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
JS实现纸牌发牌动画
Jan 19 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 receiveMail实现收邮件功能
2018/04/25 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
javascript静态的url如何传递
2007/05/03 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
js实现小星星游戏
2020/03/23 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue实现登录功能
2020/12/31 Vue.js
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
详解python的super()的作用和原理
2020/10/29 Python
浅析Python的命名空间与作用域
2020/11/25 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
《梅花魂》教学反思
2016/02/18 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技