表單標籤

表單標籤

• 做用：用於收集用戶信息，讓用戶填寫、選擇相關信息

• 格式：

  <from>
    表單標籤
  </from>

• 注意事項：

  • 全部的表單內容，都要寫在form標籤裏面
  • form標籤中有兩個比較重要的屬性action和method，但就現目前的知識儲備而言暫時沒法理解，因此放到後面的課程中講解

input標籤

• 若是說 td 是表格最核心的標籤，那麼 input 就是表單最核心的標籤。input 標籤有一個 type 屬性，這個屬性有不少類型的取值，取值的不一樣就決定了 input 標籤的功能和外觀不一樣

• 明文輸入框

  • 做用：用戶能夠在輸入框內輸入內容
  • 帳號：<input type="text"/>

• 暗文輸入框

  • 做用：用戶能夠在輸入框內輸入內容
  • 密碼：<input type="password"/>

• 給輸入框設置默認值

  • 帳號：<input type="text" value="123"/>
  • 密碼：<input type="password" value="123"/>

• 規定輸入字段中的字符的最大長度

  • 帳號：<input type="text" name="fullname" maxlength="8" />

• 單選框（radio）

  • 做用：用戶只能從衆多選項中選擇其中一個
  • 單選按鈕，天生是不互斥的，若是想互斥，必需要有相同的name屬性

  <input type="radio" name="xingbie" /> 男
  <input type="radio" name="xingbie" /> 女
  <input type="radio" name="xingbie" /> 保密

• 多選框（checkbox）

  • 做用：用戶能夠從衆多選項中選擇多個
  • 複選框，最好也是有相同的 name（雖然他不須要互斥，可是也要有相同的 name）

  <input type="checkbox" name="aihao"/> 籃球
  <input type="checkbox" name="aihao"/> 足球
  <input type="checkbox" name="aihao"/> 棒球

• 給單選、多選設置默認值

  • 指定 radio 和 checkbox 默認值，前提是同一組內容必須設置相同 name 屬性

  <input type="radio" name="xingbie" checked="checked"/> 男
  <input type="radio" name="xingbie" /> 女
  <input type="radio" name="xingbie" /> 保密
  
  <input type="checkbox" name="aihao" checked="checked"/> 籃球
  <input type="checkbox" name="aihao" checked="checked"/> 足球
  <input type="checkbox" name="aihao"/> 棒球

• label標籤

  • 做用：label 標籤不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性
  • 注意事項：
    • 表單元素要有一個 id，而後 label 標籤就有一個 for 屬性，for 屬性和 id 相同就表示綁定了
    • 全部表單元素均可以經過 label 綁定

  <!--給文本框添加綁定-->
  <label for="account">帳號:</label>
  <input type="text" id="account" />
  
  <!--給單選框添加綁定-->
  <input type="radio" name="sex" id="man" /> <label for="man">男</label>
  
  <!--給多選框添加綁定-->
  <input type="checkbox" id="basketball" />
  <label for="basketball">籃球</label>

• 按鈕

  • 做用：定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）
  • <input type="button" value="點我" />

• 圖片按鈕

  • 做用：定義圖像形式的提交按鈕
  • <input type="image" src="xxx.jpg" />

• 重置按鈕

  • 做用：定義重置按鈕。重置按鈕會清除表單中的全部數據
  • <input type="reset" />
  • 注意事項：
    • 這個按鈕不須要寫 value 自動就有 「重置」 文字
    • reset 只對 form 表單中表單項有效果

• 提交按鈕

  • 做用：定義提交按鈕。提交按鈕會把表單數據發送到action屬性指定的頁面
  • <input type="submit" />
  • 注意事項：
    • 這個按鈕不須要寫 value 自動就有 「提交」 文字
    • 要想經過 submit 提交數據到服務器, 被提交的表單項都必須設置 name 屬性

數據列表

• 做用：給輸入框綁定待選項

• 格式：

  <datalist>
      <option>待選項內容</option>
  </datalist>

• 如何給輸入框綁定待選列表

  • 一個輸入框
  • 一個 datalist 列表
  • 給 datalist 列表標籤添加一個 id
  • 給輸入框添加一個 list 屬性，將 datalist 的 id 對應的值賦值給 list 屬性便可

  請輸入你的車型: <input type="text" list="cars">
  
  <datalist id="cars">
      <option>奔馳</option>
      <option>寶馬</option>
      <option>奧迪</option>
      <option>路虎</option>
      <option>賓利</option>
  </datalist>

多行文本框（文本域）

• 做用：textarea標 籤用於在表單中定義多行的文本輸入控件

  • cols 屬性表示 columns 「列」，規定文本區內的可見寬度
  • rows 屬性表示 rows 「行」，規定文本區內的可見行數

• 格式：

  <textarea cols="30" rows="10">默認</textarea>

• 注意點：

  • 能夠經過 cols 和 rows 來指定輸入框的寬度和高度
  • 默認狀況下輸入框是能夠手動拉伸的

  <!--禁止手動拉伸-->
  <style type="text/css">
      textarea{
          resize: none;
      }
  </style>

下拉列表

• 做用：select 標籤和 ul、ol、dl 同樣，都是組標籤。用於建立表單中的待選列表，能夠從選擇某一個帶選項

• 格式：

  選擇籍貫:
  <select>
      <option>北京</option>
      <option>河北</option>
      <option>河南</option>
      <option>山東</option>
      <option>山西</option>
      <option>湖北</option>
      <option>貴州</option>
  </select>

• 給下拉列表設置默認值

  • 和 radio、checkbox 同樣，select 也能夠設置默認值，經過 selected 屬性設置

  <select>
      <option>北京</option>
      <option>河北</option>
      <option>河南</option>
      <option>山東</option>
      <option>山西</option>
      <option>湖北</option>
      <option selected="selected">貴州</option>
  </select>

• 給下拉列表添加分組

  <select>
      <optgroup label="北京市">
          <option>海淀區</option>
          <option>昌平區</option>
          <option>朝陽區</option>
      </optgroup>
          <optgroup label="廣州市">
          <option>天河區</option>
          <option>白雲區</option>
      </optgroup>
      <option selected="selected">貴州</option>
  </select>