表單標簽

• 格式：
  <form>
  <表單元素>
  </form>
• 作用;
• 表單就是專門用來收集用戶信息的

表單元素

• input

• 格式：
  <input type="值">

• 作用：

  • input標簽有一個type屬性, 這個屬性有很多類型的取值, 取值的不同就決定了input標簽的功能和外觀不同

• 注意：表單元素一定要寫在表單標簽中

• 明文輸入框：
  <input type="text">

• 暗文輸入框：
  <input type="password">

• 給輸入框設(shè)置默認值：
  <input type="text" value="asd">
  <input type="password" value="123">

• 單選框：
  <input type="radio" name=asd checked=checked>男
  <input type="radio" name="asd">女
  <input type="radio" name="asd">保密

• 注意：

  • 默認情況下單選框不會互斥, 要想單選框互斥那么必須給每一個單選框標簽都設(shè)置一個name屬性, 然后name屬性還必須設(shè)置相同的值
  • 要想讓單選框默認選中某一個框子, 那么可以給input標簽添加一個checked屬性
  • 在HTML中如果屬性的取值和屬性的名稱一樣, 可以只寫一個. 但是在XHTML中必須寫上取值, 所以在企業(yè)開發(fā)中我們推薦大家不要省略取值

• 多選框：
  <input type="checkbox" name="asd"/> 籃球
  <input type="checkbox" name="asd"/> 足球
  <input type="checkbox" name="asd"/> 棒球

• 注意：多選框筋夏，天生是不互斥的贬养，如果想互斥翠肘，必須要有相同的name屬性

• 普通按鈕：
  <input type="button" value="我是按鈕">

• 注意：可以通過value屬性來給按鈕指定標題

• 作用：配合JS完成一些操作

• 圖片按鈕：
  <input type="image" src="圖片路徑/圖片名稱">

• 重置按鈕：
  <input type="reset" value="清空">

• 注意：如果想想改重置按鈕默認的按鈕標題可以通過value屬性來修改

• 作用：用于清空表單中已經(jīng)填寫好的數(shù)據(jù)

• 提交按鈕：
  <input type="submit">

• 注意：

  • 要想把表單中填寫好的數(shù)據(jù)提交到遠程服務(wù)器, 必須具備兩個條件
    1.需要給form表單添加一個action的屬性, 通過這個action屬性指定需要提交到的服務(wù)器地址
    2.需要給需要提交到服務(wù)器的表單元素添加一個name屬性

• 隱藏域：
  <input type="hidden">

• 作用:定義隱藏的輸入字段

• 暫時不用掌握, 在Ajax中對數(shù)據(jù)的CRUD操作有非常大的作用

• 取色器：
  <input type="color">

• HTML5中input類型增加了很多type類型, 例如color、date但是都不兼容

• 日期選擇器:
  <input type="date">

• HTML5中input類型增加了很多type類型, 例如color伤溉、date但是都不兼容

• Label標簽

• 作用：默認情況下文字和輸入框是沒有關(guān)聯(lián)關(guān)系的, 也就是說點擊文字輸入框不會聚焦, 如果想點擊文字時讓對應(yīng)的輸入框聚焦, 那么就需要讓文字和輸入框進行綁定

• 綁定格式：
  1.將文字利用label標簽包裹起來
  2.給輸入框添加一個id屬性
  3.在label標簽中通過for屬性和輸入框中的id進行綁定即可
  <label for="asd">賬號:</label><input type="text" id="asd">

• datalist標簽

• 格式：
  <datalist>
  <option>待選項內(nèi)容</option>
  </datalist>

• 作用:給輸入框綁定待選項

• 事例：
  請輸入你的車型: <input type="text" list="cars">

     <datalist id="cars">
           <option>奔馳</option>
           <option>寶馬</option>
           <option>奧迪</option>
           <option>路虎</option>
  

事例.png

<option>賓利</option>
</datalist>

• select標簽
• 格式：
  <select>
  <option>列表數(shù)據(jù)</option>
  </select>
• 作用：用于定義下拉列表
• 給下拉列表設(shè)置默認值：
  <select>
  <option>列表數(shù)據(jù)</option>
  <option>列表數(shù)據(jù)</option>
  <option selected="selected">列表數(shù)據(jù)</option>
  </select>
• 給下拉列表添加分組：
  <select>
  <optgroup label="分組名稱">
  <option>列表數(shù)據(jù)</option>
  </optgroup>
  </select>
• 注意：
  • 下拉列表不能輸入內(nèi)容, 但是可以直接在列表中選擇內(nèi)容
  • 可以通過給option標簽添加一個selected屬性來指定列表的默認值
  • 可以通過給option標簽包裹一層optgroup標簽來給下拉列表中的數(shù)據(jù)分類
• textarea標簽
• 格式:
  <textarea>
  </textarea>
• 設(shè)置寬高的多行輸入框
  <textarea cols="30" rows="10">
  </textarea>
• 注意：
  • 默認情況下輸入框可以無限換行
  • 默認情況下輸入框有自己的寬度和高度
  • 可以通過cols和rows來指定輸入框的寬度和高度, 但是雖然指定了列數(shù)和行數(shù), 但是還是可以無限往下輸入
  • 默認情況下輸入框是可以手動拉伸的般码，可以通過CSS設(shè)置禁止拉伸
    
    <style type="text/css">
    textarea{
    resize: none;
    }
    </style>