表单脚本

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则可以，但不能设置最大字符数。