javascript对表单的操作

一、获得表单引用

1>通过直接定位的方式来获取

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

2>通过集合的方式来获取引用

document.forms[下标]

document.forms["name"]

document.forms.name

3>通过name直接获取“(只适用于表单)

document.name

二、获得表单元素的引用

1>直接获取

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

2>通过集合来获取

表单对象.elements  获得表单里面所有元素的集合

表单对象.elements[下标]

表单对象.elements["name"]

表单对象.elements.name

3>直接通过name的形式

表单对象.name

三、表单元素共同的属性和方法

1>获取表单元素的值

表单元素对象.value   获取或是设置值

2>属性

disabled  获取或设置表单控件是否禁用 true false

form   指向包含本元素的表单的引用

3>方法

blur()失去焦点

focus()  获得焦点

四、表单元素

1、文本域

<input type="text" >

操作文本域的值

value 属性     设置或者获取值

2、单选按钮

checked  返回或者设置单选的选中状态

true 选中     false 未选中

value 属性 获取选中的值,必须先判断选中状态。

3、多选按钮

checked  返回或者设置单选的选中状态

true 选中     false 未选中

value 属性 获取选中的值,必须先判断选中状态。

4、下拉框

selected  设置或返回下拉框的选中状态

true 选中     false 未选中

selectedIndex  设置或返回下拉框被选中的索引号

5、文本区域

<textarea></textarea>

value 操作值

五、验证表单

1.事件

onsubmit  当表单提交的时候触发的事件

onblur

obfocus

onchange

2.return false;  阻止事件的默认行为(适用于所有事件)

六、提交方法

表单的方法

表单对象.submit()

时间: 2024-10-12 21:32:29

javascript对表单的操作的相关文章

jQuery对表单的操作

表单的组成部分:表单标签.表单域.表单按钮 <form><fieldset><legend><label><input><textarea> 1.单行文本框--获取和失去焦点改变样式 当文本框获取焦点后,它的颜色有变化:失去焦点后恢复为原来的样式,可使用css中的伪类选择符实现该功能 CSS代码: input:focus,textarea:focus{ border:;background:; } 问题:IE6不支持除了超链接元素外的

JavaScript——操作表单(验证)

用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树. 不过表单的输入框.下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容. HTML表单的输入控件主要有以下几种: 表单的目的:提交信息 文本框,对应的<input type="text">,用于输入文本: 口令框,对应的<input type="password">,用于输入口令: 单选框,对应的&l

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

JavaScript表单编程总结

要操作表单,首先我们就要先知道如何获取表单引用,可以通过下面几种方法来获得. 获取表单的引用 在开始对表单进行编程前,必须先获取表单<form>的引用.有以下方法可以来完成这一操作.1)采用典型的DOM树中的定位元素的方法getElementById(),只要传入表单的id即可获得表单的引用:var vform=document.getElementByIdx(“form1”); 2)还可以用document的forms集合,并通过表单在form集合中的位置或者表单的name特性来进行引用:v

JavaScript表单处理(上)

为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面.  发文不易,转载请亲注明出处,谢谢! 一.表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法: HTMLFormElement属性和方法 属性或方法 说明 acceptCharse

如何使用AngularJS对表单提交内容进行验证

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

JavaScript表单处理(下)

内容提纲: 1.文本框脚本 2.选择框脚本 发文不易,转载请亲注明链接出处,谢谢!   一.文本框脚本 在HTML中,有两种方式来表现文本框: 一种是单行文本框<input type="text">: 一种是多行文本框<textarea>. 虽然在HTML中<input>有value值,而<textarea>却没有,但在JS中都可以通过value获取他们的值. var textField = fm.elements[0]; var are

JavaScript表单序列化的方法详解

本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单的序列. 首先,我们来了解下在表单提交期间,浏览器是怎样将数据发送给服务器的.对表单字段的名称和值进行URL编码,使用和号(&)分割.不发送禁用的表单字段.只发送勾选的复选框和单选按钮.不发送type为"reset"和"button"的按钮.多选择框中的每个选中

Javascript 设计模式 单例

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30490955 一直很喜欢Js,,,今天写一个Js的单例模式实现以及用法. 1.单例模式的写法 单例模式写法相当简单: var singleTon = { m1: "memeber first ", m2: "memeber second ", f1: function () { console.log("fun1 "); } }