表單腳本

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則能夠，但不能設置最大字符數。