js第14章 表单提交

1.表单提交

• input button通过设置 type类型为submit
  浏览器将表单提交到服务器之前，form表单会触发submit事件，可以在这个事件中去验证表单，之后再去提交给服务器；

<form method="get" action="" onsubmit="return tijiao()">
    <ul>
        <li>姓名：<input name="name" id="n" type="text"/></li>
        <li><input type="submit" value="提交"/></li>
    </ul>
</form>
    var form=document.getElementsByTagName("form")[0];
    function tijiao(){
       if(form.elements[0].value)
       {
         return  true
       }
        else{
       return false
       }
    }

通过submit()方法提交，不会触发submit事件，不会验证表单，所以一般会先验证表单，为true再继续调用submit()；

<form method="get" action="" >
    <ul>
        <li>姓名：<input name="name" id="n" type="text"/></li>
        <li><input type="button" value="提交" onclick="tijiao()"/></li>
    </ul>
</form>
    var form=document.getElementsByTagName("form")[0];
    function tijiao(){
       if(form.elements[0].value)
       {
          form.submit()
       }
    }

2.表单的重置

• 通过设置type属性为reset
  会触发form表单的reset事件，可以在事件中取消表单的默认行为

<input type="reset" value="重置"/>
<button type="reset" value="重置"></button>

• 通过form表单中的reset()方法，不会触发reset事件

3.表单字段

1. 表单字段
每个form表单都有elements属性，elements是一个集合，表示表单中的每一个字段；包括 input button textarea filedset

• form.elements[0] 取表单中的第一个字段
• form.elements["name“] 取得name为name的字段，如果多个名为name的字段，则返回一个Nodelist对象，通过form.elements[‘name’][0] 取字段

2.表单字段的共有属性

• 名字：name
• 禁用：disabled
• 值：value
• 类型：type
• 只读：readOnly true/false值
• form:当前字段指向的表单指针
  js设置属性
  form.elements[0].disabled=true;

3.表单字段的共有方法

• focus() 让表单字段聚焦

• html5 新增了autofocus，表单字段自动获取焦点

• blur() 表单字段失去焦点

4.表单字段共有的事件

• blur事件 失去焦点时触发

• focus事件表单字段获得焦点时触发

• change事件 表单字段input textarea中文本发生变化，并且失去焦点触发
  select下拉菜单中，option发生变化，则触发change事件

5.input文本框

• type:text输入框

• value:文本的初始值

• size:文本框能够显示的字符

• maxlength:文本框接受最大的字符

 - <textarea> 初始值要放在里面</textarea>
   rows字符行数
   cols列数

7.selecet下拉菜单

• options：表示option集合，是一个HTMLcollection

• multiple:布尔值 是否可以选择多个值

• size:选择框中可见的行数

• value:

  如果是单选，select的值为option value的值，如果option中的value值没有设置，则为option的文本值；如果value设置为”“,则select中的value为”“
  如果设置multiple，windows按ctrl则可以进行多选，select中的value值为第一个选中的option的value值；

• add(newoption,beforeoption) 向select中添加新的option，在指定的option之前

• remove(index)删除option根据options中的索引

8.option中的属性

• index：当前option在options集合中的索引

• label:option标签

• text:当前option的文本值

• value:当前option的value值

• selected:布尔值。为true表示选中当前的option

  获取option的文本值和value

 var text=select.options[0].text
  var value=select.options[0].value 注意：onchange事件只要option发生改变就会触发该事件

9. 添加Option选项

• 使用dom方法

   var newoption=document.createElement("option");
  var newtext=document.createTextNode("篮球")
  newoption.appendchild(newtext);
  newoption.setAttribute("value",1)
  select.appendchild(newoption)

• 使用Option构造函数

var newoption=new Option("篮球"，1)； //(text文本值，value值)
select.appendchild(newoption)// select.add(要插入option,插入那个option之前)
select.add(newoption,undefined)//插入最后一个

10删除option选项

• 使用remove（）
  select.remove(0)
• select.removechild(select.options[0])
• select.options[0]=null

11.移动和重排option
重排选项：
select.insertBefore(form.elements[3].options[2],form.elements[3].options[0]);