Form表单常用操作笔记

常用的表单类型:

  1,button:按钮。

  2,checkbox:复选按钮。

  3,file:文件选取。

  4,hidden:隐藏域。

  5,password:密码输入框。

  6,radio:单选按钮。

  7,reset:重置按钮。

  8,select:下拉列表。

  9,submit:提交按钮。

  10,text:文本按钮。

  11,textarea:多行文本输入域。

选取表单元素的方法:

  1,普通的元素获取方式:getElementById,document.querySelector等。

  2,document对象的forms属性获取:该属性值为页面中所有的form表单组成的HTMLCollection对象,可以

    通过数字下标或者表单的name或id属性获取,例如,当一个表单设置了name属性,它的值为address,

    可以通过document.forms.address获取。也可以通过elements属性获取。获取form表单内的表单组成时

    也可以通过表单组成的name和id获取,也可以通过elements属性获取,结果一样:

    document.forms.address.elements.***.

表单属性和方法:

  属性:

    1,action:表单数据发送的URL。

    2,encoding:编码方式。

    3,method:表单提交方式,GET或POST。

    4,target:在何处打开action属性指定的URL。

    5,type(表单元素的属性):表单元素类型,对于<input>便签定义的表单,返回的就是其元素属性type。其他表单元素,像<select>,<textarea>定义的表单通常值就是便签名。

    6,form(表单元素的属性):表单元素的Form对象的只读引用,也就是获取指定表单元素的外层form对象的引用。如果表单元素没有被form包裹起来的话就返回null。

    7,name(表单元素的属性):表单元素设置的name属性值。

    8,value(表单元素的属性):在<text>,<textarea>中值为用户输入的值,<select>中为值为选中的<option>中的value属性的值,如果<option>中每有设置value属性的话就返回<option>便签没的文本值。在checkbox和radio中,这个属性是不可见也不可编辑的。

    9,checked:单选按钮和复选按钮中定义,指定元素当前是否选中。

    10,options(select元素定义的属性):返回一个类数组,值为option元素集。

  方法:

    1,submit():调用Form对象的submit方法提交表单。

    2,reset():调用Form对象的reset方法重置表单输入值。

表单事件:

  1,onsubmit:表单提交前,触发onsubmit事件,可以通过返回false取消提交动作,通常在这个事假处理程序中做一些验证操作(只能通过表单提交按钮触发,直接调用submit()方法提交表单不会触发事件)。

  2,onreset:表单重置前触发onreset事件,可以通过返回false取消提交动作,(只能通过表单重置按钮触发,直接调用reset()方法重置表单不会触发事件)。

  3,onclick:表单按钮点击触发。

  4,onchange:文本域中,当输入内容改变,且表单失去焦点时触发。在选择内的表单元素中,切换选择时触发。

  5,focus:获取焦点时触发。

  6,blur:失去焦点时触发。

选择框和选项元素:

  1,<select>元素有两种不同的方式运作,也就是单选和多选(加上multiple属性),两种情况是的type属性分别返回"select-one"和"select-multiple"。

  2,options属性:<select>元素定义了options属性,它是<select>元素中包含的所有options元素集合(类数组)。

  3,<select>元素的可读性属性selectedIndex,值为当前选中<option>元素下标。

  4,<option>元素的selected属性:当前<option>是否选中。

  5,<option>元素的text属性:当前<option>的纯文本。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <style>
        
    </style>
  </head>
  <body>
      <form name="news">
          <select name="ttt">
            <option value="aaaaa">1111111</option>
            <option value="bbbbb">2222222</option>
            <option value="ccccc">3333333</option>
          </select>
      </form>
  </body>
  
  <script type="text/javascript">
    //单选
      document.forms.news.ttt.onchange = function(){
          console.log(this.options[this.selectedIndex].value);
      }
  </script>
</html>
//多选
document.forms.news.ttt.onchange = function(){
          //console.log(this.options[this.selectedIndex].text);
          let arr = [];
          for(let i=0;i<this.options.length;i++){
              if(this.options[i].selected){
                  arr.push(this.options[i].value);
              }
          }
          console.log(arr);
      }

    

原文地址:https://www.cnblogs.com/huangzhenghaoBKY/p/9992322.html