JavaScript之表单

• 表单基础知识（<form>是HTMLFormElement类型）

  ①表单下面独有的属性/方法：
  action(接受请求的URL)
elements(控件集合)
length(控件数量)
method(发送HTTP请求类型)
name(表单名称)
target(窗口) ||
reset()->重置
submit()->提交表单

  ②提交表单：
  A.HTML页面内-><input type='submit' value='提交'/> || <button type='submit'>提交</button> || <input type='image' src='' />

  B.js控制-> obj.submit() 这里不会触发submit事件，但是要记得验证表单

  解决重复提交表单方法：
  I.第一次提交表单后禁用提交按钮 btn.disabled=true
  II.利用onsubmit事件处理程序取消后续操作

  ③重置表单：
  A.HTML页面内->
  <input type='reset' value='重置' />
<button type='reset'>重置</button>
  B.js控制->obj.reset() 这里使用会触发reset事件
  注意要慎用重置表单：可以用一个取消按钮替代其功能

  ④表单字段（每个表单都有elements属性 它是表单中所有元素的集合，可以按位置index和name属性来访问）
  A.公共的表单字段属性 ->
  disabled(是否禁用) || name(字段名称) || type(字段类型) || value(交给服务器的值)
  B.公共的表单字段方法 ->
  .focus()-获取焦点 || .blur()-失去焦点
  C.公共的表单字段事件 ->
  blur（当前字段失去焦点时触发）
change(失去焦点且value值改变/下拉选项更改是也可触发)
focus(当前字段获得焦点时触发)

• 文本框脚本（单行文本框<input> || 多行文本框<textarea>）

  ①单行文本框 -> <input type='text' size='25' maxlength='50' value='lijiaxin'/>
  ②多行文本框 -> <textarea rows='4' cols='5'></textarea>
  ③选择文本 ->
  A.js方法： obj.select()
  B.利用”选择”事件
  C.获取“选择”的文本值(HTML5扩展)：
  obj.value.substring(obj.selectionStart,obj.selectionEnd)
  D.选取部分文本值: .setSelectionRange()方法

  ④H5约束性API ->
  A.必填字段 ： required属性
  B.输入类型： email || url || 日期 || number || range || search || tel
  C.数值范围类型：number || date || range || month || datetime || week || datetime-local || time==>（自带属性min || max || step）
  D.输入模式 : 正则表达式 pattern属性
  E.检查有效性 ： .checkValidity()方法
  F.禁用验证： novalidate/formnovalidate 属性

• 选择框脚本(<select>与<option>)

  ①<select> ->
  .add(new,old) - 添加新选择
.remove(index) - 删除选项
options - <option>集合
selectedIndex - 索引
size - 行数
multiple - 是否允许多项选择

  ②<option> ->
  index - 当前选项索引
selected - 是否被选中
value - 选项的值
text - 选项文本

  ③添加选项的操作方法 - >
  A.DOM操作 ： .createElement('')/.appendChild()
  B.构造函数：new Option()
  C..add(new,old)方法

  ④移除选项的操作方法 ->
  A.DOM操作：.removeChild()
  B..remove()方法
  C.指定相应选项为null

  ⑤移动和重排选项的操作方法 ->
  A.DOM操作 .insertBefore()