- 表单的基础知识
- 文本框脚本
- 选择框脚本
- 表单序列化
- 富文本编辑
表单的基础知识
用户单击提交按钮或图像按钮时，就会提交表单。使用<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 进行基本的验证：
requiredemailurl-
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属性编辑富文本内容
