表单的知识点总结

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。
在HTML中，表单是由<from>元素表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其他HTML有相同的默认属性，bugHTMLFormElement也有自己独有的属性和方法：
例如：acceptCharset、action、element、enctype、length、method、name、reset、submit、target等。
一、取得form元素的引用方法有2种：
1. 通过ID获得
var form = document.getElementById(‘form1’);
2. document.forms 可以取得页面中所有的表单，在这个集合中，可以通过索引值取得特定的表单
var form = document.forms[0];//通过索引取得
var form = document.forms[“form1”];//通过表单名称获得，不推荐
二、提交表单
3种方式：
1. 通用按钮提交

 <input type = "submit" value = "Submit From" />

1. 自定义按钮提交

 <button type = "submit">Submit Value </button>

1. 图像按钮

<input type = "image" src = "smile.jpg" />

组织表单提交可以使用preventDefault()方法，在前几篇详细讲解过该方法的使用
通过js来提交表单

var form = document.getElementById(‘form1’);
form.submit();

三、重置表单
重置表单按钮的type的2种方式
1. 通用按钮提交

 <input type = "reset" value = "reset From" />

1. 自定义按钮提交

 <button type = "reset">reset Form</button>

通过js来重置表单

var form = document.getElementById(‘form1’);
form.reset();
四、表单字段
每个表单元素都有一个elements属性，该属性表示表单中所有表单元素（字段）的集合。
上面讲了获取到表单，现在讲获取表单内的内容
var form = document.getElementById(‘form1’);
//取得表单中的第一个字段(元素)
var filed1 = form.elements[0];

//取得名为textbox1的字段
var filed1 = form.elements[“textbox1”];

//获得表单中包含字段的数量

var filed1 = form.elements.length;

如果表单的多个控件都使用相同的 name，则返回一个NodeList。
4.1共有的表单字段属性
除了<fieldset>元素外，所以表单字段都有相同的一组属性。
例如以下属性
disabled \ form\ name \ readOnly \ tabIndex \ type \ value
除了form属性外。可以通过js来动态修改其他任何属性
var form = document.getElementById(‘form1’);
var field1 = form.elements[0];

//修改value属性
field1 .value = “new Value”;

//检查form属性的值
alert(field1 .form == form); //true;

//把焦点设到当前字段
field1.focus();

//禁用当前字段
field1.disabled = true;

为了避免多次提交表单，可以在提交按钮一次后就禁用提交按钮。

4.2共有的表单字段方法
每个表单字段都有两个方法：focus() 聚焦 和blur()失焦
如果表单字段是一个input元素，但其type为hidden，那么就不能使用focus()方法。
autofocus属性，只要元素设置了该属性，就不用使用js中的focus方法了。

blur()方法和focus()使用方法一样

4.3共有的表单字段事件
在介绍了共有的表单事件属性，方法后，现在是事件
除了支持鼠标、键盘、更改和HTML事件之外，所有的表单字段都支持以下三个事件
focus\blur\change
当元素失去（获得）焦点时，就会触发blur（focus）事件
change:对于input和textarea元素，它们是在失去焦点并且value值改变才会触发该事件；select元素，在其选项改变时触发

五、文本框脚本
在HTML中两种方式表现文本框<input>元素的单行文本框和<textarea>元素多行文本框
使用分别如下

input<input type = "text" size = "25"  maxLength = "50" value = "initial value">size : 显示25个字符；maxLength 最多输入50个字符textarea<textarea rows = "25" cols = "5" >initial value</textarea>

rows为行数，cols为字符列数（与input中的size类似）不能为在 HTML中为textarea设置最大字符数

5.1选择文本
上述的两个文本框都支持select()方法，用于选择文本框中所有的文本，大多数浏览器在使用select()方法时，都会将焦点设置到文本框中（除oprea）这个方法不接受参数。

在文本框获得焦点时选择其所有文本是一种常见的做法，特别是在文本框包含默认值的时候，就不必一个个删除文本了。

EventUtil.addHandler(textbox,"focus", function(event){    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    target.select();});

取得选择的文本

通过selectionStart和selectionEnd这两个属性可以取得选择的文本

function getSelectedText(textbox){    return textbox.value.substring(textbox.selectionStart textbox.selectionEnd);}

选择部分文本

1。setSelectionRange(),所有文本框都具有的方法，接受两个参数，类似于substring方法的两个参数。

//选择所有文本
textbox.setSelectionRange(0, textbox.value.length);

//选择三个字符
textbox.setSelectionRange(4, 7);

2。在IE8及更早的版本中取得部分文本

var range = textbox.createTextRange();

//选择所有文本
range.collapse(true);
range.moveStart(“character”, 0);
range.moveEnd(“character”, textbox.value.length);
range.select();

//选择第4到第6个字符
range.collapse(true);
range.moveStart(“character”, 4);
range.moveEnd(“character”,3);
range.select();

3。selectText()接受三个参数

textbox.value = “Hello World”;

//选择所有文本
selecteText(textbox, 0, textbox.value.length );

//选择第4到第6个字符
selecteText(textbox, 4, 7 );