form 表单

假如form表单内没有submit按钮，只要button元素，那末这个button能够晋级为submit按钮。

form 表单用来向服务器提交信息，经常运用属性

• action：提交表单的地点
• name：页面中能够不止一个表单，用name来辨别，PS：id 也能够
• method：提交表单的要领，post或get
• target：在那边翻开action

• enctype：

  • application/x-www-form-urlencoded：在发送前编码一切字符(默许)
  • text/plain：空格转换为 “+” ，但不对特别字符编码
  • multipart/form-data：运用包括文件上传控件的表单时，必需运用该值

注：post请乞降get要求区分：参考文章：99% 的人都明白错了 HTTP 中 GET 与 POST 的区分

• post比get安全性高，post经由过程request body通报数据，get把参数包括在 URL 中
• post平常用于向服务器传送数据，get平常用于向服务器猎取数据
• get要求页面能够被珍藏，post不能够
• get只能举行 URL 编码，而 post支撑多种编码体式格局
• get在 URL 中通报参数有长度限定，而 post没有

input

input 标签用来吸收用户填写的信息，合营label运用，它的for属性能够选中form表单内的id属性或许用label把input包裹起来就不需要用for了
经常运用属性

1. type：经常运用的值

   • password：输入的内容自动自动变成小圆点
   • checkbox：多选，靠name属性分组，提交到后端的时刻被选中的
     value是以 “,” 支解的一个字符串，经由过程name属性获得
   • radio：单选，靠name分组
   • hidden：暂存一些信息

   • file：文件上传

     • accept设置上传文件花样
     • multiple文件多选
   • submit/button/reset：submit能够提交表单，button不能提交表单，reset清空表单
2. placeholder：提醒性笔墨，一旦输入内容就消逝
3. disabled：该input被禁用
4. require：该input必需被填写

select

select用来设置下拉菜单，属性multiple可设置多选

• option标签，属性selected：默许挑选

textarea：多行文本输入，rows，cols设置默许行列

表单剧本

<form id="myColor" method="post">
    <input type="radio" name="color" value="red">Red
    <input type="radio" name="color" value="green">Green
    <input type="radio" name="color" value="blue">Blue
</form>
<form id="myText" method="post">
    <input type="text" value="hello">
    <input type="text" value="world">
    <input type="text" value="JS" autofocus>
    <input type="submit" value="提交">
</form>
<script>
    var myColor = document.getElementById('myColor')
    var myText = document.getElementById('myText')
    
    //获得表单中第一个字段
    myColor.elements[0]
    
    //获得表单中`name`为`color1`的字段
    myColor.elements[color1]
    
    //获得表单中字段的数目
    myColor.elements.length
    
    //当前字段禁用
    myColor.elements[0].disabled = true
    
    //点击input 选中默许展现的value
    myText.elements[1].addEventListener('blur',function(e){
        e.target.select()
    })
</script>

1. 能够经由过程document.forms[0]获得表单
2. myColor.elements[0]可获获得表单中的第一个字段，多选框name差别，也能够用name的值查找，如myColor.elements[color1]。
3. myColor.elements.length获得表单中字段的数目.

4. myColor.elements[0].disabled = true禁用表单当前字段，true为禁用，false为恢复运用，能够应用在表单提交以后，防备用户重复提交表单

   myText.addEventListener('click',function(){
       if(this.elements[3].type === 'submit'){
           this.elements[3].disabled = true
       }
   })

5. autofocus在表单字段中设置，当浏览器加载时自动把核心移到该字段

6. focus()、change()、blur()分别是获得核心时触发，落空核心并转变value才触发，落空核心时触发，个中change()和blur()先后顺序并没有严厉划定。
   输入框选中高亮，输入非数字，转变色彩

     myText.elements[0].addEventListener('focus',function(e){
         if(e.target.style.borderColor !== 'red'){
             e.target.style.borderColor = 'yellow'
         }
     })
     myText.elements[0].addEventListener('blur',function(e){
         console.log(e.target.value)
         if(/[^\d]/.test(e.target.value)){
             e.target.style.borderColor = 'red'
         }else{
             e.target.style.borderColor = ''
         }
     })
     myText.elements[0].addEventListener('change',function(e){
         if(/[^\d]/.test(e.target.value)){
             e.target.style.borderColor = 'blue'
         }else{
             e.target.style.borderColor = ''
         }
     })

7. input可设置size、maxlength，不能设置rows、cols；而textarea则能够，但不能设置最大字符数。