什么是表格？

一个表单有三个基本组成部分：表单标签，它包含了用于处理表单数据的CGI程序的URL，以及向服务器提交数据的方法。表单域：包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、文件上传框。表单按钮：包括提交按钮、重置按钮和通用按钮；用于将数据传输到服务器上的CGI脚本或取消输入，还可以使用表单按钮来控制定义处理脚本的其他处理任务。

javascript与表单的关系：JS最初是用来分担服务器处理表单的责任，打破依赖服务器的局面。尽管web和javascript发展迅速，但web表单仍然不能为许多常见任务提供现成的解决方案。许多开发人员不仅会在验证表单时使用JavaScript，还会增强一些标准表单控件的默认行为。

一，表格的基本知识

在HTML中，表单是按表单标记的。在javascript中，表单对应于HTMLFormElement类型，它继承了HTMLElement类型。它们都具有与其他Element元素相同的默认属性，也有自己的属性和方法：

AcceptCharset:服务器可以处理的字符集；相当于HTML中的accept-charset特性。

操作：接受请求的网址；相当于HTML中的动作属性。

元素：窗体中所有控件的集合(HTMLCollection)。

Enctype:请求的编码类型；相当于HTML中的enctype属性。

长度：窗体中控件的数量。

方法：要发送的HTTP请求的类型，通常是“get”或“post”；相当于HTML的方法属性。

名称：表单的名称；相当于HTML的名称属性。

Reset():将所有表单域重置为默认值。

Submit():提交表单。

目标：用于发送请求和接收响应的窗口名称；相当于HTML的目标属性。

获取表单元素的方法有：varform=document . getelementbyid(' form 1 ')；//按id获取表单元素

var First FORm=document . FORms[0]；//通过document.forms获取页面中的所有表单元素，并通过索引值“0”获取第一个表单元素

var form 2=document . forms[' form 2 ']；//通过document.forms获取页面中的所有表单元素，通过name值获取特定的表单元素

提交表格：

！-常规提交按钮-输入类型='提交'值='提交表单'！-自定义提交按钮-按钮类型='提交'提交表单/按钮！-image button-input type=' image ' src=' http : graphic . gif '以这种方式提交表单时，浏览器将在向服务器发送请求之前触发submit事件。这样，我们就有机会验证表单数据，并决定是否允许提交表单。通过阻止此事件的默认行为，您可以取消表单提交

在JS中，我们还可以通过编程方式调用submit()方法来提交表单：

var form=document . getelementbyid(' my form ')；//提交表单form . submit()；阻止表单提交(阻止默认事件):

var form=document . getelementbyid(' my form ')；Eventul.addhandler(表单，‘submit’，函数(事件){//获取事件对象event=EventUtil.getEvent(事件)；//阻止默认事件EventUtil.preventDefault(事件)；});当表单数据无效并且无法发送到服务器时，可以使用这种技术

重置表单：

！-通用重置按钮-输入类型='重置'值='重置表单'！-自定义重置按钮-按钮类型=' reset' resetform/button重置表单时，所有表单字段将恢复到页面刚加载时的初始值。

使用JS方法重置表单：

var form=document . getelementbyid(' my form ')；//重置窗体form . reset()；防止重置表单的默认操作：

var form=document . getelementbyid(' my form ')；Eventul.addhandler (form，‘reset’，function(event){//get event对象event=eventutil . getevent(event)；//防止窗体重置EventUtil.preventDefault(事件)；});表单域：

每个表单都有一个Element属性，它是表单中所有表单元素(字段)的集合。这是一个有序列表。每个表单域都以与标记相同的顺序出现在元素集中。您可以通过位置和名称值来访问它们。常见的表单字段包括输入、选择和字段集。要获取表单中的表单字段：

var form=document . getelementbyid(' form 1 ')；//获取表单中的第一个字段var field 1=form . elements[0]；//获取名为“textbox1”的字段varfield 2=form . elements[“textbox 1”；//获取表单中包含的字段数。var field count=form . elements . length；常见表单域属性：

已禁用：指示当前字段是否已禁用的布尔值。

窗体：指向当前字段所属窗体的指针；只读。

名称：当前字段的名称。

只读：指示当前字段是否为只读的布尔值。

TabIndex:表示当前字段的标签序号。

类型：当前字段的类型，如“复选框”、“单选”等。

值：当前字段将提交给服务器的值。对于文件字段，此属性是只读的，包含计算机中文件的路径

除了表单属性之外，任何其他属性都可以通过JavaScript动态修改。

动态修改表单字段属性的能力意味着我们可以随时以任何方式动态操作表单。

用户可以重复点击表单的提交按钮。说到信用卡消费，这是一个问题：它会使成本翻倍。

因此，最常见的解决方案是在第一次单击后禁用提交按钮。只需聆听提交事件，并在事件发生时禁用提交按钮：

//避免提交表单eventutil.addhandler(表单，‘submit’，函数(事件){event=eventutil.getevent(事件)；var target=EventUtil.getTarget(事件)；//获取提交按钮varbtn=target . elements[' submit-BTN ']；//禁用它btn.disabled=true});除了fieldset，所有表单域都有type属性。对于输入元素，该值等于HTML属性类型的值。对于其他元素，下表列出了此类型属性的值。

常见的表单域方法：

每个表单域都有两种方法：focus()和blur()。使用focus()方法，您可以将用户的注意力吸引到页面的某个部分。例如，加载页面后，将焦点转移到表单中的第一个字段。

Eventuil。addhandler (window，' load '，function (event) {/*将一个监听事件绑定到window，把页面放进去加载，光标会自动对准指定的表单域*/document.forms [0]。元素[0]。焦点()；});HTML5在表单字段中添加了自动对焦属性。在支持此属性的浏览器中，只要设置此属性，就可以自动将焦点移动到相应的字段，而无需JavaScript。

例如：

输入类型=“文本”自动对焦

与focus()方法相对的是blur()方法，它从元素中移除焦点：

document.forms[0]。元素[0]。blur()；

Change事件：对于input和textarea元素，当它们失去焦点且值改变时触发；关于

选择元素，当它的选项改变时被触发。

二、文本框脚本

在HTML中，有两种方式来表示文本框：一种是使用输入元素的单行文本框，另一种是使用文本区域的多行文本框。

选择文本：

获得焦点时选择文本框的所有文本是非常常见的做法。实现代码如下：

EventUtil.addHandler(textbox，' focus '，function(event){ event=eventutil . getevent(event)；var target=EventUtil.getTarget(事件)；target . select()；});获取所选文本：

虽然我们可以知道用户通过select事件选择文本的时间，但我们仍然不知道用户选择了什么文本。HTML5通过一些扩展方案解决了这个问题，从而让选中的文本更加流畅。本规范采用的方法是添加两个属性：selectionStart和selectionEnd。

函数getSelectedText(textbox){ return textbox . value . substring(textbox . selectionstart，textbox . selectionned)；}IE9、火狐、Safari、Chrome和Opera都支持这两个属性。IE8和更早的版本不支持这两个属性，但提供了另一种解决方案。IE8和更早版本中有一个document.selection对象，它保存用户在整个文档范围内选择的文本信息

函数getSelectedText(textbox){ if(type of textbox . selectionstart==' number '){ return textbox . value . substring(textbox . selectionstart，textbox . selectionned)；} else if(document . selection){ return document . selection . create range()。文本；}}过滤输入：

我们经常要求用户在文本框中输入特定的数据或者以特定的格式输入数据。

EventUtil.addHandler(textbox，' keypress '，function(event){ event=eventutil . getevent(event)；var target=EventUtil.getTarget(事件)；//获取字符代码var charcode=eventutil。输入键的getcharcode(事件);if(！/ d/。测试(字符串。from charcode(charcode)){//将字符编码转换为字符，并使用正则表达式检查其是否与Eventul匹配。preventdefault(事件)；}});以上代码控制表单字段中输入的数据，只允许输入数字

有时候我们想屏蔽非数字键，不像基本键和按ctrl键。

自动切换焦点：

使用JavaScript可以在很多方面增强表单域的可用性。其中，最常见的方式是当用户填写当前字段时，自动将焦点切换到下一个字段。为了提高易用性并加快数据输入速度，您可以在前一个文本框中达到最大字符数后，自动将焦点切换到下一个文本框。

例如，对于以下表单域：

输入类型=' text ' name=' tel1 ' id=' txt tel1 ' maxlength=' 3 '输入类型=' text ' name=' tel2 ' id=' txt tel2 ' maxlength=' 3 '输入类型=' text ' name=' tel3 ' id=' txt tel3 ' maxlength

(function(){ function tab forward(event){ event=eventutil . getevent(event)；var target=EventUtil.getTarget(事件)；//获取事件源if (target。价值。长度==目标。maxlength){//检查输入字符是否达到最大字符要求var form=target.form//获取该字段所在的表单(var I=0，len=form . elements . length；我透镜；I) {//遍历表单字段if (form。elements[I]==target){//遍历到当前目标字段时，关注下一个表单字段if (form。元素[I 1]){表单。元素[I 1]。焦点()；}返回；} } } } var text box 1=document . getelementbyid(' Txtel 1 ')；//获取目标vartextbox 2=document . getelementbyid(' txttel 2 ')；var textbox 3=document . getelementbyid(' Txtet L3 ')；EventUtil.addHandler(textbox1，' keyup '，TabForward)；//绑定事件eventutil。addhandler (textbox2，' keyup '，tab forward)；EventUtil.addHandler(textbox3，' keyup '，TabForward)；})();HTML5约束验证API

为了在向服务器提交表单之前验证数据，HTML5增加了一些新功能。

必填字段：必填，例如：输入类型=“文本”名称=“用户名”必填

Type属性：“email”类型要求输入文本必须符合电子邮件地址的模式，而“url”类型要求输入文本必须符合URL的模式。

模式属性：该属性的值是一个正则表达式，用于匹配文本框中的值。示例：输入类型=' text '模式=' d '名称=' count '

禁用验证：通过设置novalidate属性，可以告诉表单不要验证。例如：

form method=' post ' action=' registration . PHP ' novalidate！-在此插入表单元素-/表单三，选择框脚本

选择框是通过选择和选项元素创建的。该类型还提供以下属性和方法：

Add(newOption，relOption):在控件中插入一个新的选项元素，该元素位于相关项(relOption)之前。

Multiple:指示是否允许多选的布尔值；相当于HTML中的多重属性。

Options:控件中所有选项元素的HTMl集合。

移除(索引):移除给定位置的选项。

SelectedIndex:基于0的所选项目的索引；如果没有选定的项目，则该值为-1。对于支持多选的控件，仅保存选定项中第一项的索引。

Size:选择框中可见行数；相当于HTML中的大小属性。

选择框的类型属性是“选择一个”或“选择多个”，这取决于HTML代码中是否有多个属性。选择框的值属性由当前选中的项目决定，相应的规则如下。

如果没有选定的项目，选择框的value属性将保存一个空字符串。

如果有一个选定的项，并且其value属性已在HTML中指定，则选择框的value属性等于选定项的value属性。即使value属性的值是空字符串，也遵循此规则。

如果有选定的项目，但其值属性未在HTML中指定，则选择框的值属性等于项目的文本。

如果有多个选择项，选择框的value属性将根据前两个规则获取第一个选择项的值。

选择选项：

对于只允许选择一个项目的选择框，访问选定项目的最简单方法是使用选择框的selectedIndex属性。例如：

var selectedOption=selectbox . options[selectbox . selectedindex]；

添加选项：

您可以使用JavaScript动态创建选项并将它们添加到选择框中。

第一种方法是使用DOM方法，如下所示：

var NewOption=document . create element(' option ')；new Option . appendchild(document . createtextnode(' Option text '))；newOption.setAttribute('值'，'选项值')；selectbox . appendchild(new option)；第二种方法是使用选项构造函数创建一个新的选项：

var newOption=新选项(“选项文本”、“选项值”)；selectbox . appendchild(new option)；添加新选项的第三种方法是使用选择框的add()方法。DOM规定这个方法接受两个参数，一个是要添加的新选项，另一个是跟随新选项的选项：

var newOption=新选项(“选项文本”、“选项值”)；//selectbox.add(newOption，未定义)；//最佳计划，向列表中添加新选项，最后删除选项：

DOM的removeChild()方法，将为其传递要移除的选项，如下例所示：

selectbox . remove child(selectbox . options[0])；//删除第一个选项

其次，可以使用选择框的remove()方法：

select box . remove(0)；//删除第一个选项

最后一种方法是将相应的选项设置为null:

selectbox . options[0]=null；//删除第一个选项

要清除选择框中的所有项目，您需要遍历所有选项并逐个删除它们：

函数clearSelectbox(selectbox){ for(var I=0，len=selectbox . options . length；我透镜；I){ select box . remove(0)；}}此功能一次仅删除选择框中的第一个选项。由于删除第一个选项后，所有后续选项将自动上移一个位置，因此您可以通过重复删除第一个选项来删除所有选项。

移动和重新排列选项：

如果文档中存在的元素被传递给appendChild()方法，它将从元素的父节点中移除，然后被添加到指定位置：

var selectbox 1=document . getelementbyid(' sell locations 1 ')；//每个子节点只有一个父节点，所以前面位置的节点var select box 2=document . getelementbyid(' sell locations 2 ')会先被删除；selectbox 2 . appendchild(selectbox 1 . options[0])；重新排序选项的过程非常相似，最好的方法仍然是使用DOM方法。要将选择框中的项目移动到特定位置，最合适的DOM方法是insert before()；

var option to ve=selectbox . options[1]；select box . insert before(option to ve，select box . options[option to ve . index-1])；//若要在选择框中向前移动一个选项，请序列化表单：

表单序列化只是以名称-值对的形式对每个表单字段进行url编码。

表单序列化有以下规则：

URL-对表单域的名称和值进行编码，并用&符号()分隔它们。

不要发送禁用的表单域。

仅发送复选框和单选按钮。

不要发送“重置”和“按钮”类型的按钮。

多重选择框中的每个选定值都有一个条目。

当您单击“提交”按钮提交表单时，也将发送“提交”按钮。否则，不发送提交按钮。它还包括一个类型为“图像”的输入元素。

选择元素的值是所选选项元素的值属性的值。如果选项元素没有值属性，则它是选项元素的文本值。

第四，富文本编辑

这项技术的本质是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，可以编辑这个空白的HTML页面，编辑对象是页面主体元素的HTML代码。designMode属性有两个可能的值：“关”(默认值)和“开”。当设置为“开”时，整个文档将变为可编辑状态(显示插入符号)，然后可以像使用文字处理软件一样通过键盘对文本内容进行加粗、斜体等操作。编辑富文本内容的另一种方法是使用名为contenteditable的特殊属性，这也是IE首先实现的。您可以将contenteditable属性应用于页面中的任何元素，然后用户可以立即编辑该元素。

以上基于JavaScript的表单脚本(详解)是边肖分享给大家的全部内容，希望能给大家一个参考和支持。