表单

1. 表单基础

• 提交表单

<!--通用提交按钮-->
<input type="submit" value="Submit Form">
<!--自定义提交按钮-->
<button type="submit">Submit Form</button>
<!--图像按钮-->
<input type="image" src="graphic.gif">
//在相应表单控件拥有焦点的情况下，按回车键可提交表单，触发submit事件

var form = document.getElementById("myForm");
// 提交表单  
form.submit();

• Tips: 解决重复提交表单的问题的两个方法
  1）在第一次提交表单后就禁用提交按钮
  2）利用onsubmit事件处理程序取消后续的表单提交操作
• 重置表单
  单击重置按钮，表单会被重置

<!--通用重置按钮-->
<input type="reset" value="Reset Form">
<!--自定义重置按钮-->
<button type="reset">Reset Form</button>

var form = document.getElementById("myForm");
//重置表单 
 form.reset();

2. 文本框脚本

• 选择文本

select()//选择文本框中文本时触发
selectionStart//文本选区开头偏移量
selectionEnd//文本选取结尾偏移量
setSelectionRange()//接收两个参数，要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引
selectText()//接收三个参数：要操作的文本框、要选择文本中第一个字符的索引和最后一个字符之后的索引

3. 选择框
   通过<select>和<option>元素创建
   select的属性和方法

add(newOption, relOption)//向控件插入新元素，在relOption之前
multiple:布尔值，是否允许多项选择
options:控件中所有<option>
remove(index):移除指定位置的选项
selectedIndex:基于0的选中项索引，没有选择则为-1,多选则返回第一个被选中的元素
size:选择框可见行数

option属性

index:当前选项在options集合中的索引
label:当前选项的标签
selected:是否被选中
text:选项的文本
value:选项的值