www.baike369.com
百科369 > JS教程 > JavaScript表单(Form)对象

JavaScript表单(Form)对象



JavaScript表单(Form)对象

Document对象的forms属性可以返回一个数组,数组中的元素都是Form对象。Form对象又称为表单对象,它代表了HTML文档中的表单,可以让用户实现输入文字、选择选项和提交数据等功能。
    由于HTML中的表单会由很多表单元素组成,因此Form对象也会包含很多子对象。

JavaScript表单(Form)对象(forms[]数组)介绍

在HTML文档中有可能会出现多个表单,也就是说,一个HTML文档中有可能出现多个<form>标签。

JavaScript表单(Form)对象(forms[]数组)的属性

表单(Form)对象的属性大多与form元素的属性相关。

JavaScript访问表单(Form)对象的属性

在JavaScript中,可以访问表单对象的属性。

JavaScript表单(Form)对象(forms[]数组)的方法

表单(Form)对象的方法并不多,只有reset()和submit()两个方法,这两个方法类似于单击了“重置”按钮和“提交”按钮。

JavaScript表单(Form)对象(forms[]数组)的事件

Form对象的事件与Form对象的方法相似,也与表单的提交和重置相关。


JavaScript表单(Form)对象的应用

利用Form对象的属性、方法和事件可以实现很多动态效果。

JavaScript访问表单

表单的表单域如下:在扫描检测与操作表单域之前,首先应该确定可以访问表单。

JavaScript使用表单(Form)对象(forms[]数组)进行表单验证

在表单(Form)对象中使用得比较多的就是表单验证。

JavaScript使用表单(Form)对象(elements[]数组)进行循环验证表单

使用表单(Form)对象的elements属性可以返回表单中的所有元素。

JavaScript为<input>标签创建的隐藏域进行表单验证

在JavaScript中验证表单时。

JavaScript使用onchange事件对表单域进行验证

要验证一个表单域,不必等到表单提交后再进行验证。

JavaScript使用表单(Form)对象设置表单的提交方式

在表单填写完毕之后,可以将表单提交到一个接收表单内容的地方。

JavaScript使用表单(Form)对象重置表单的提示

在默认情况下,如果用户单击了重置表单按钮,浏览器窗口就会马上将表单中的所有元素的值设置为初始状态。

JavaScript的Form对象(submit()方法)中不使用提交按钮提交表单的方法

通常在表单中,都是使用单击“提交”按钮的方法来提交表单。

JavaScript使用onsubmit事件处理器验证表单输入内容是否为空

通常,表单验证发生在内容输入结束,表单提交之前。

JavaScript使用focus事件和onload事件设置HTML表单的起始焦点

用户打开一个页面后,希望能立即进行数据的输入。

JavaScript将<label>标签的焦点移到表单内与其相关的域中

在JavaScript中,使用<label>标签可以有效聚合表单内容,也可以使用JavaScript提升表单可用性。

JavaScript屏蔽表单域

屏蔽的表单域不能接受用户的输入,也不是页面标记序列的一部分,更不能进行提交操作。


JavaScript表单元素

Form表单中可以存在很多表单元素,通常在浏览器窗口中,看不到Form元素,但是可以看到这些表单元素。

JavaScript表单元素

在HTML中定义的表单元素有很多。

JavaScript表单元素(elements[]数组)的命名

我们知道,<form>标签与</form>标签之间可以存在很多表单元素。

JavaScript使用表单元素的名称访问表单的文本域

Form对象的elements[]数组中存储了表单中不同的域,包括:复选框、单选按钮、选择菜单、文本区、文本域、密码域、复位按钮、提交按钮、普通按钮甚至隐藏域。


JavaScript文本框

在HTML中,文本框包括单行文本框和多行文本框两种。密码框可以看成是一种特殊的单行文本框,在密码框中输入的文字将会以掩码形式出现。

JavaScript文本框的创建方式

在HTML代码中,可以创建单行文本框、密码框或多行文本框等。

JavaScript文本框的属性

代表文本框的对象称为Text对象、代表多行文本框的对象称为Textarea对象、代表密码框的对象称为Password对象。

JavaScript文本框的方法

无论是Text对象、Textarea对象,还是Password对象,所拥有的方法都是相同的。

JavaScript文本框的事件

无论是Text对象、Textarea对象,还是Password对象,可以响应的事件都是相同的。

JavaScript文本域、文本框与文本区

文本输入域有3种形式:单行文本框:也称为单行文本框。

JavaScript为<input>标签创建的单行文本框添加属性与方法

在这篇文章中,使用了单行文本域的属性与方法,包括对其值的读取与设置等。

JavaScript为<textarea>标签创建的多行文本框设置大小及属性

多行文本框称为“文本区”或“文本域”,使用<textarea>标签创建。

JavaScript使用onchange事件限制<textarea>文本域的输入长度

使用<textarea>标签并不能限制文本域的输入内容的长度,使用JavaScript则可以轻松做到。

JavaScript在输入文字时判断文本框中输入的字数

在很多种情况下,都要求用户在文本框中输入的文字数量不能超过一定数量。

JavaScript在提交数据时判断文本框中输入的字数

在JavaScript中,利用文本框的keypress事件可以让用户在输入文字时判断字数是否已经超过限制。

JavaScript在失去焦点时判断文本框中输入的字数

在JavaScript中,还可以使用blur事件来判断文本框中输入的字数,只要焦点离开文本框,就能马上判断出文本框中的文字数是否超过限制。

JavaScript在鼠标经过文本框时自动选择文本

在JavaScript中,使用文本框的select()方法与mouseover事件相结合,可以在鼠标经过文本框时自动选中其中的内容。

JavaScript在鼠标经过文本框时自动清除文本

在JavaScript中,还可以让用户将鼠标从文本框中经过时,既选择了文本框中的文字,又将文本框中的文字清除掉,这样更方便用户的输入。


JavaScript按钮

在HTML中,按钮分为3种,分别为:普通按钮(Button对象)、提交按钮(Submit对象)和重置按钮(Reset对象)。从功能上看起来,普通按钮主要作用是用来激活函数;提交按钮的主要作用是提交表单;重置按钮的主要作用是重置表单。虽然3种按钮的功能有所不同,但是这3种按钮的属性、方法和事件几乎都是完全相同的。

JavaScript使用button元素创建按钮

在HTML 4.0.1标准中,可以使用button元素创建按钮。

JavaScript使用input元素创建按钮

在HTML 4.0.1中,可以使用input元素创建按钮。

JavaScript按钮的属性

无论是Submit对象、Reset对象还是Button对象,所拥有的属性都是相同的。

JavaScript按钮的方法

无论是Submit对象、Reset对象还是Button对象,所拥有的方法都是相同的。

JavaScript按钮的事件

无论是Submit对象、Reset对象还是Button对象,可以响应的事件都是相同的。

JavaScript给<input>标签创建的按钮添加方法与事件

在DOM中,所有<input>标签都用HTMLInputElement对象来表示。

JavaScript制作网页调色板程序

在设计网页时,常常需要设计网页的前景色和背景色。

JavaScript改变多行文本框大小

多行文本框中通常可以输入很多文字,如果文字内容比较多,多行文本框会自动产生滚动条,此时可以加大多行文本框的宽度或高度来浏览其中的文字,就会更加方便一些。


JavaScript单选框和复选框

单选框(Radio对象)与复选框(Checkbox对象),看上去好像是两个完全不同的对象。但事实上,这两个对象除了一个能单选、一个可以多选之外,其属性、方法和事件几乎是完全相同的。
    单选框组与复选框组中每一个选项都是Form对象的一个子对象。

JavaScript限制复选框的选项数

虽然在复选框组中允许用户可以选择多个选项,但是在某些时候可能要求用户只能选取其中的几项。

JavaScript创建单选框和复选框

在HTML中使用input元素同样可以创建单选框与复选框。

JavaScript单选框和复选框的属性

无论是Radio对象还是Checkbox对象,所拥有的属性都是相同的。

JavaScript单选框和复选框的方法

无论是Radio对象还是Checkbox对象,所拥有的方法都是相同的。

JavaScript单选框和复选框的事件

无论是Radio对象还是Checkbox对象,可以响应的事件都是相同的。

JavaScript设置单选框组和复选框组

只有在少数情况下单选框或复选框会单独使用,大多数单选框与复选框都会以组的方式出现。

JavaScript设置单选框与复选框的默认选项

在单选框与复选框当中,都可以使用checked属性来设置默认的选项。

JavaScript使用<input>标签创建的单选按钮和复选框的用法

与文本域相比,复选框和单选按钮的功能要有限得多。

JavaScript复选框与单选按钮的组合使用(onclick)

当将表单的复选框和单选框组合起来使用时,可以通过onclick将每个单选按钮与相应的事件处理器函数相连。

JavaScript使用elements[]数组设置复选框和单选按钮的组合使用

使用elements[]数组,可以在表单的复选框上建立循环。

JavaScript使用onclick事件选择单选按钮

在JavaScript中,可以使用<input>标签创建单选框,并将其type属性设置为radio,然后通过给每一个单选按钮起相同的名字。

JavaScript关于Form对象、Radio对象与Checkbox对象

虽然单选框与复选框经常以组的形式出现,但是在一个组中每个选项都是一个独立的单选框或复选框。

JavaScript使用onclick事件选择复选框

在JavaScript中,可以使用<input>标签创建复选框,并将其type属性设置为checkbox,然后为每个复选框起一个名字。


JavaScript下拉列表框

下拉列表框(Select对象)可以显示单项或多项选择。下拉列表框整体是Form对象的一个子对象。下拉列表框中的选项(Option对象)只是下拉列表框的子对象。

JavaScript创建下拉列表框

创建下拉列表框需要用到两个元素:select元素:用于标记下拉列表框开始。

JavaScript下拉列表框的属性

与其它Form对象的子对象相同,Select对象也拥有一些属于自己的属性。

JavaScript下拉列表框的方法

Select对象的方法并不多。

JavaScript下拉列表框的事件

Select对象中的事件大多与其它input对象的事件相同。

JavaScript下拉列表框中的选项对象(options[]数组)

创建下拉列表框必须要使用两个HTML元素,其中select元素用于声明下拉列表框,option元素用于创建下拉列表框中的选项。

JavaScript下拉列表框中的选项对象(options[]数组)属性

Option对象虽然是Select对象的子对象,但该对象也拥有属于自己的属性。

JavaScript创建同时显示多行的下拉列表框

在HTML4.0.1中,可以创建同时显示多行的下拉列表框。

JavaScript创建可以同时选择多个选项的下拉列表框

在默认情况下,一个下拉列表框只能有一个选项被选中,此时与单选框组类似。

JavaScript使用onchange事件和options[]数组选择多项下拉列表

如果在<seclet>标签中加入multiple属性,选择控件就可以支持多项选择。

JavaScript使用onchange事件和options[]数组选择级联下拉列表

在网络中经常见到这样一种选择:多个选择控件相互关联,选择第一个后,也就限定了第二个的可选内容。

JavaScript利用下拉列表框翻页

在下拉列表框中,可以将选项值设置为要跳转的URL,通过Select对象的value属性值可以得到该跳转的URL。

JavaScript使用onchange选择单项下拉列表

在JavaScript中,使用onchange可以在下拉列表中选择任意一个选项。


JavaScript文件上传框

JavaScript创建文件上传框

在HTML代码中,可以使用input元素来创建文本上传框。

JavaScript文件上传框的属性

FileUpload对象拥有自己的属性。

JavaScript文件上传框的方法

FileUpload对象拥有属于自己的方法。

JavaScript文件上传框的事件

FileUpload对象拥有自己的事件。

JavaScript使用文件上传框的注意事项

文件上传框比较简单,但使用FileUpload对象时需要注意下面几点:由于文件上传框通常用于上传文件。


JavaScript隐藏域

JavaScript创建隐藏域

在HTML中可以使用input元素创建隐藏域。

JavaScript隐藏域的属性

因为Hidden对象在浏览器窗口中并没有任何显示,因此,该对象不会产生任何事件,也就不会有任何事件处理程序。

JavaScript关于隐藏域的输入提示

使用隐藏域可以记录一些不希望被用户看到的信息。


JavaScript Fieldset元素

JavaScript使用fieldset元素创建表单分组

fieldset元素可以产生视觉上的效果。

JavaScript使用legend元素描述表单的分组信息

在HTML 4.0.1中有一个legend元素可以用于描述表单的组信息。


JavaScript设置菜单

JavaScript制作的一个简单的友情链接

最简单的下拉菜单使用<select>标签建立一个下拉列表,然后将<select>的onchange事件绑定在一个函数上,通过函数响应用户的选择。

JavaScript制作的需要确认的友情链接

使用<select>标签建立一个友情链接以后,经过用户的选择,还需进一步确认方可访问相应的站点。

JavaScript制作模拟系统菜单

一个基于JavaScript的菜单系统一般会使用CSS的适当样式来实现。

JavaScript制作远程控制菜单

远程控制菜单是一个弹出窗口,可以对主浏览器窗口进行控制。

JavaScript通过DIV制作滑动菜单

滑动菜单的效果也是常见的一种菜单效果。

Copyright© 2011-2016 www.baike369.com All Rights Reserved