《Head first HTML與CSS 第二版》讀書筆記 第十四章 表單

使用<form>元素建立表單。幾乎全部塊元素均可以放在<form>元素中。

form的action屬性包含web服務的URL告訴瀏覽器表單提交到的地址。method屬性指定提交的方法。

input元素時一個void元素，因此沒有結束標籤。

• 一行文本輸入框：<input type="text"> 可使用maxlength屬性限制用戶最多能輸入的字符數。
• 提交按鈕：<input type="submit" value=""> value屬性是按鈕顯示的文字，默認是Submit或Submit Query。
• 單選按鈕：<input type="radio" name="" value="">每組相關聯的單選按鈕必須有相同的name。能夠有不一樣的值。checked是布爾屬性，爲真是瀏覽器顯示錶單時默認選中。
• 複選框：<input type="checkbox" name="" value="">name和value的規則與radio相同。也可使用checked布爾屬性。
• 文本區：<textarea name="" rows="" cols=""></textarea>可輸入多行文本，若是文本在文本區內放不下右側有出現滾動條。textarea不是void元素，因此它有結束標記。使用rows和cols屬性指定文本區高度和寬度分別是多少字符。開始和結束標記之間的全部文本會成爲瀏覽器文本區中的初始文本。
• 菜單：<select>元素與嵌套在其中的<option>元素結合使用能夠建立一個菜單。<option>元素表示一個菜單項。<option>元素的內容做爲菜單項的描述，value屬性做爲每一個菜單項的值。

  <select name="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
  </select>

       

如下是HTML5中新加入的：

• 數字輸入：<input type="number" min="0" max="20">使用max和min來限制容許輸入的範圍。
• 範圍輸入：<input type="range" min="" max="" step="">相似於number，只是會顯示一個滾動條和一個輸入框。step屬性用來指定步長。
• 顏色輸入：<input type="color">單擊控件會彈出一個顏色選擇器。
• 日期輸入：<input type="date">
• email輸入：<input type="email"> 電話號碼輸入：<input type="tel"> url輸入：<input type="url">這三種<input>都是text類型的表中。在桌面瀏覽器上，看不出任何差異，在移動瀏覽器上會獲得定製鍵盤，能夠更容易輸入須要的字符。

對於text <input>和<textarea>瀏覽器有限制能夠輸入的文本字符數，可是一般不會輸入這麼多，徹底能夠忽略。對於<textarea>沒有辦法限制用戶能夠鍵入多少文本。

對於複選框，提交表單時會把全部複選框的值合併爲一個值。例如：spice=salt&pepper&garlic。

<input>是一個內聯元素。

僞類first-child選中第一個子元素。

 

用<label>元素標記表單中的標籤（文本提示），能夠提供頁面結構更多的信息，對於有視力障礙的人有助於使用屏幕閱讀器。

 

fieldset和legend將元素組織在一塊兒：

<fieldset>
  <legend>Condiments</legend>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</fieldset>

密碼輸入：<input type="password">

文件輸入：<input type='file">

多選菜單：在<select>元素中添加multiple布爾屬性，能夠將菜單變爲多選菜單。

 

placeholder屬性在大多數<input>元素中均可以使用，在未輸入時顯示提示信息。

required布爾屬性爲真時單擊提交按鈕時瀏覽器將檢查該控件是否有值，若是沒輸入將不提交併提示。