表单脚本

表单的基础知识
文本框脚本
选择框脚本
表单序列化
富文本编辑

表单的基础知识

用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为"submit"即可，图像按钮将<input>的type特性值设置为"image"来定义。

    <input type="submit" value="Submit Form">

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

    <input src="image" src="graphic.gif">

以这种方式提交表单，浏览器会在将请求发送服务器之前触发submit事件，可以验证表单数据，并决定是否允许表单提交。在JavaScript中，以编程方式调用submit()方法可以提交表单，这种方式无需表单包含提交按钮，此时不会触发submit事件，使用reset()方法可以重置表单。一般在第一次提交表单后使用disabled 属性禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。

var form = document.getElementById("myForm")
form.submit()

一些共有的表单字段属性：

disabled 表示当前字段是否被禁用
form 指向当前字段所属表单的指针，只读
name 当前字段的名称
readOnly 当前字段是否只读
type 当前字段的类型，如checkbox，radio等
value 当前字段被提交给服务器的值
change 在文本框从获得焦点到失去焦点且 value 发生变化时触发

文本框脚本

<input>
<textarea>

使用target.select()在文本框获得焦点时选择其所有文本，在文本框包含默认值的时候可以让用户不必一个一个删除文本。

HTML5约束验证API 进行基本的验证：

required
email
url
pattern 正则属性
checkValidity() 检测表单中的字段是否有效
novalidate 告诉表单不进行验证

选择框脚本

选择框是通过<select>和<option>创建，包括一下属性

add 向控件中插入新option元素
multiple 表示是否允许多项选择
options 控件中所有<option>元素的HTMLCollection
remove 移除给定位置的选项
selectedIndex 基于 0 的选中项索引
size 选中框中可见的行数
index 当前选项在options集合中的索引
label 当前选项的标签
selected 表示当前选项是否被选中
text 选项的文本
value 选项的值

表单序列化

随着Ajax的出现，表单序列化已经成为一种常见需求。在 JavaScript 中，可以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。

富文本编辑

富文本编辑的本质是在页面中嵌入一个包含空HTML页面的iframe，通过设置designMode属性，可以对空白页面的HTML代码中的<body>元素进行编辑。

使用contenteditable属性编辑富文本内容