表单元素除了可以运用上述所有DOM相关操作外,为了简化,还有一系列自己的属性和方法。

表单除了支持鼠标,键盘,更改和html时间之外,还支持一些表单特有的事件,如focus,change,blur等等。

一、form表单元素

1.获取表单上的form元素

1)document.getElementById()

2)document.forms 可以获得页面上所有的form元素,在这个集合中,可以通过数值索引或者表单的name属性来取得特定的表单。如:

document.forms[0],document.forms['name']

2.form独有的属性和方法:

特有属性:

action:等同于html中的aciton特性

length:表单中控件的个数

method:等同于html中的method

name:等价于html中的name

elements:表单中所有控件的集合。通常利用数值索引或者控件的name作为索引来得到控件的引用,如elements[0]或者elements['username']。这有时候比通常的dom方法要方便得多。如果多个表单空间都使用同一个name(如单选按钮),就会返回以该name命名的一个NodeList集合。

特有方法(通过这些方法可以主动触发对应时间):

a.表单提交 focus

当用户单击提交按钮或者图像按钮的时候,就会提表单,包括

<input type='submit' value='xxx'>

<button type='submit'>提交</button>

<input type-='image' src='xxx'>

用这种方式提交表单,在请求发送之前会触发表单的submit事件,阻止这个事件就可以取消表单提交。

此外,js中利用编程方式调用submit()也会提交表单而无需包含任何提交按钮,不过使用这种方法提交的时候,不会触发submit事件,因此要记得调用此方法之前先验证表单数据。

b.表单重置 reset

同样,重置也有两种方法

用户点击重置按钮,表单会被重置

<input type='reset' value='xxx'>

<button type='reset'>reset</button>

js中调用表单的reset()方法也可以重置表单,和submit()不同的是,这种方法会像点击重置按钮一样触发reset事件。

二.表单字段元素

表单的字段包括但不限于:

input(type的可选值包括:text,submit,radio,checbox),textarea,button,fieldset,select>option等。html5还增加了很多新类型,包括input(type可选值包括password,url,email等等)这里对此不再探讨。

表单中的元素字段可以利用dom方法访问,也可以利用form的elements属性,利用数值或者name属性获得具体的引用。这些表单元素的属性和方法如下:

1)共用属性

disabled:代表当前字段是否被禁用。备注:在web开发中,为了避免表单的重复提交,最常见的解决方案是,监听表单的submit事件,在该事件发生时候,设置提交按钮的disable=true.

form:指向当前字段所属的表单

readOnly:代表是否只读

tabIndex:当前字段的切换(tab)序号

form:指向当前字段所属表单的引用。

name:当前字段的名称

type:字段类型,如text,radio,checkbox,select one,select multiple等

value:当前字段将被提交至服务器端的值。对于表单字段来说,建议使用value进行属性的读取和设置,而非典型的DOM方法。

  对于<input type='text'>,<textarea></textarea>来说,用户输入的内容保存在value中。

  对于select元素,value的值由当前的选中项决定。如果没有选中项,那么为空字符串,如果有多个,则由第一个决定。

  对于input:radio/checbox,value的值根据当前元素是否checked决定。

2)表单字段的公用方法

blur():可以主动触发blur事件

focus():可以主动触发focus事件

3)表单字段的共用事件

blur:当前字段失去焦点时候触发

focus:当前字段获得焦点时出发

change:对于<input>,<textarea>等元素,在它们失去焦点并且value值改变的时候触发,对于<select>元素,在选项改变时就会触发。

 

三、input[type=text]与textarea 文本框字段

<input type="text" size="" maxlength="" value="initial value">

input[type=text]可以使用size指定文本框能够显示的字符数,可以通过maxlength限制文本框能够接受的最大字符数,可以使用value属性指定初始值

<textarea name="" id="" cols="" rows="">initial value</textarea>

textarea可以使用rows指定字符行数,cols指定字符列数。其初始值应当放在<textarea>和</textarea>之间。

文本框除了支持表单字段公共的focus,blur事件外,常用的事件还包括:

1)change:在text和textarea失去焦点并且value值改变的时候出发。

2)keypress:用于过滤输入

3)keyup:

4)select事件与select主动触发方法

select()事件用于选择文本框中的所有文本(比如当文本框包含默认值,用户就不用一个个删除),与select()方法对应的,是select事件,这个事件在用户选择文本并且释放了鼠标的时候触发。可以通过文本元素的selectionStart和selectionEnd来取得选择的文本。

html5还提供了主要触发选择部分文本的方法,这里不再赘述。

四、下拉框字段select与option

     <select name="select" id="select">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>

1)select的特有属性

select的type值不是“select-one”就是“select-multiple”,取决于html标签中是否有multiple特性。

multiple:boolen值,是否允许多选

options:所有<option>元素的HTMLCollection

selectedIndex:选中项的索引

select的value值由当前的选中项决定,规则如下:

a.如果没有选中项,则value为'';

b.如果有一个选中项,并且该项的value已经在html中指定,则value等于html中指定;‘’

2)select特有方法

add(newOption,relOption):向控件插入新的option,在relOption之前

remove(index).删除索引为index的option

3)option也有一些特有的属性,包括:

index:当前option的索引;

selected:是否被选中

text:选项的文本

value:选项的值

4)下拉框的创建操作

A。获得选中项的值

如果是单选

selectbox.options[selectbox.selectedIndex].value  

如果是多选,那么只有遍历,检测每个属性的selected属性取得了

B:设置选项

//方法一,仅针对单选
selectbox.selectedIndex=index;
//方法二
selectbox.options[index].selected=true;

C:监听value改变事件(change事件)

selectbox.addEventListener('change',function(e){
doSomething();
};false);

D:添加选项

//如果添加多项,最好还是采用innerHTML方法
//如果添加单个option,dom方法不如下面的方法简便:
var option=new Option('option text','option value');
selectBox.add(option,undefined);

E:删除选项

//可以使用dom的removeChild,也可以使用下面的方法删除单个option
selectbox.remove();

五、单选按钮 

     <div class="radio-group">
<label><input type="radio" name="sex" value="femail">男</label>
<label><input type="radio" name="sex" value="mail">女</label>
</div>

常见操作:

A:获取单选按钮对应的NodeList

//方法一
form.elements['sex']
//方法二
document.getElementsByName('sex')

B:获取单选按钮选中项的值

//没有更好的办法,只有遍历
for(var i=;i<radios.length;i++){
if(radios[i].checked){
return radios[i].value;
}
}

不过后台获取radio提交的值,貌似只用取name对应的字段属性即可

C:监听单选按钮选中项更改的事件(注意监听的是click事件,建议使用委托)

radioGroup.addEventListener('click',function(e){
if(e.target.type=='radio'){
doSomething();
}
},false);

六:复选框checkbox 

     <div class="checkbox-group">
<label for="swim"><input type="checkbox" name="sport" id="swim" value="游泳"></label>
<label for="running"><input type="checkbox" name="sport" id="runing" value="跑步"></label>
<label for="ball"><input type="checkbox" name="sport" value="羽毛球" id="ball"></label>
</div>

常见操作:

A:获取复选框列表,方法同单选框,利用getElementsByName或者form.elements][name]

B:获取复选框选中的值:方法和单选框类似,只能遍历所有值,后台获取复选框的值相对简单,name对应的是一个数组

C:监听复选框选中状态的变化,和单选框类似,也需要监听click事件

javascript操作表单的更多相关文章

  1. (转载)使用JavaScript操作表单

    (转载)http://www.blogjava.net/junglesong/archive/2008/03/02/183263.html 使用JavaScript操作表单 获取表单的引用 在开始对表 ...

  2. (转载)Javascript操作表单之间的数据传递

    (转载)http://www.aspxhome.com/javascript/skills/200710/214825.htm 今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的 ...

  3. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  4. JavaScript正则、错误处理、操作表单

    一.正则表达式:用单个字符串描述或者匹配符合特定语句规则的字符串 一些字符序列组合在一起,可以简单也可以复杂模式的,可以去搜索,可以去替换 二.语法: /表达式/修饰符(可选) var para=/i ...

  5. JQuery:各种操作表单元素方法小结

    来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...

  6. 前端 ----jQuery操作表单

    05-使用jQuery操作input的value值   表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...

  7. UIAlertController警告视图和操作表单

    //创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...

  8. 【原】React操作表单

    最近的项目中开发中都是用react,其中有用到react去操纵表单.然后自己就在每个表单元素中添加 ref,  然后再像jquery操作dom一样去操纵这个ref, 代码如下: 首先我在每个表单元素那 ...

  9. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

随机推荐

  1. django+mysql(1)

    报错误:mysqlclient 1.3.13 or newer is required; you have 0.9.3 第一种: django降到2.1.4版本就OK了 第二种(仍使用django 2 ...

  2. FFmpeg里面的时间单位

    pts单位:1/90 ms(每个单位代表1/90 ms)  RTP包头有个STAMP 对于视频 STAMP/90 就是 PTS (毫秒) 对于音频 STAMP/samplerate * 1000 才是 ...

  3. 关于spring中事务管理的几件小事

    1.Spring中的事务管理 作为企业级应用程序框架,Spring在不同的事务管理API之上定义了一个抽象层.而应用程序开发人员不必了解底层的事务管理API,就可以使用Spring的事务管理机制. S ...

  4. synchronized 底层实现原理

    线程在获取锁的时候,其指针指向的是一个monitor对象(由C++实现)的起始地址.每个对象实例都会有一个 monitor.其中monitor可以与对象一起创建.销毁:亦或者当线程试图获取对象锁时自动 ...

  5. SpringBoot--多环境部署配置文件

    在resources 下创建 application-{profile}.properties 的配置文件,其中profile是任意名字: test:测试环境 prod:线上环境 pre-prod:预 ...

  6. Android SQLiteDatabase的使用

    package com.shawn.test; import android.content.ContentValues; import android.content.Context; import ...

  7. celery最佳体验

    目录 目录 不使用数据库作为 Broker 不要过分关注任务结果 实现优先级任务 应用 Worker 并发池的动态扩展 应用任务预取数 保持任务的幂等性 应用任务超时限制 善用任务工作流 合理应用 a ...

  8. Mysql(七):视图、触发器、事务、存储过程、函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  9. Ubuntu下多个gcc版本之间的切换

    Ubuntu下多个gcc版本之间的切换 1.查看当前系统的gcc版本 gcc -v 会输出以下信息: Using built-in specs. COLLECT_GCC=gcc COLLECT_LTO ...

  10. 团队第二次作业:需求分析&系统设计

    所属课程 https://edu.cnblogs.com/campus/xnsy/Autumn2019SoftwareEngineeringFoundation/ 作业要求 https://edu.c ...