Web - 第十九章 | HTML 原生Form表單組件(一)

這篇關於表單的組件，非常的多，我將會把文章拆成兩個章節來做筆記記錄，這章只會紀錄「文本輸入域(Text input fields)」、「下拉內容(Drop-down content)」。

通用屬性

大部分用來定義表單小組件的元素都有一些他們自己的屬性。然而，在所有表單元素中都有一組屬性，它們可以對這些小組件進行控制。

屬性名稱	預設值	描述
autofocus	( false )	這個布爾屬性允許你指定當頁面加載時元素應該自動具有輸入焦點，除非用戶覆蓋它，例如通過鍵入不同的控件。文件中只有一個與表單相關的元素可以指定這個屬性。
disabled	( false )	這個布爾屬性表示用戶不能與元素交互。如果沒有指定這個屬性，元素將從包含的元素繼承它的設置，例如<fieldset>;如果沒有包含disabled屬性集的元素，那麼就啟用了元素。
form		小組件與之相關聯的表單元素。屬性值必需是同個文件中的<form>屬性的id屬性。理論上，它允許你在<form>元素之外設置一個表單小組件。然而，在實踐中，沒有任何支持該特性的瀏覽器。
name		元素的名稱;這是用於表單資料提交的。
value		元素的初始值。

文本輸入域

文本輸入域<input>是最基本的表單小組件。這是一種非常方便的方式，可以讓用戶輸入任何類型的資料。但是，一些文本字段可以專門用於滿足特定的需求。

所有文本域都有一些通用規範：

它們可以被標記為readonly(用戶不能修改輸入值)，甚至是disabled(輸入值永遠不會與表單資料的其餘部分一起發送)。
它們可以有一個placeholder;這是文本輸入框中出現的文本，用來簡略描述輸入框的目的。
它們可以被限制在size(框的物理尺寸)和長度 (可以輸入的最大字符數)。
如果瀏覽器支持的話，他們可以從拼寫檢查中獲益。

注：<input>元素是如此特別因為它幾乎可以是任何東西。通過簡單設置type屬性，它可以徹底改變，它用於建立大多數類型的表單小組件，包括單行文本字段、沒有文本輸入的控件、時間和日期控件和按鈕。然而，也有一些例外，比如用來多行輸入的<textarea>。

單行文本域(Single line text fields)

使用<input>元素建立一個單行文本域，該元素的type屬性值被設置為text（同樣的，如果你不提供type屬性，text是預設值）。如果你指定的type屬性的值在瀏覽器中是未知的（比如你指定type="date"，但是瀏覽器不支持原生日期選擇器），屬性值text就是是備用值。

基本的單行文本域範例：

1	<input type="text" id="comment" name="comment" value="I'm a text field">

單行文本域只有一個真正的約束：如果你輸入帶有換行符的文本，瀏覽器會在發送資料之前刪除這些換行符。

HTML5通過為type屬性增加特殊值增強了基本單行文本域。這些值仍然將<input>元素轉換為單行文本域，但它們為域（字段）添加了一些額外的約束和特性。

E-mail 地址域(E-mail address field)範例：

該類型的域設置為type屬性的email值。

1	<input type="email" id="email" name="email" multiple>

當使用type時，用戶需要在域中輸入有效的電子郵件地址；任何其他內容都會導致瀏覽器在提交表單時顯示錯誤。注意，這是客戶端錯誤驗證，由瀏覽器執行。

通過包括multiple屬性，它還可以讓用戶將多個電子郵件地址輸入相同的輸入(以逗號分隔)。

在一些設備上(特別是在移動設備上)，可能會出現一個不同的虛擬鍵盤，更適合輸入電子郵件地址。

注：你可以在表單資料驗證文中找到關於表單驗證的更多訊息。

密碼域(Password field)範例：

通過type屬性的password值設置該類型域。

1	<input type="password" id="pwd" name="pwd">

它不會為輸入的文本添加任何特殊的約束，但是它會模糊輸入到字段中的值(例如，用點或小行星)，這樣它就不能被其他人讀取。

請記住，這只是一個用戶界面特性;除非你安全地提交你的表單，否則它會以明文發送，這不利於安全——惡意的一方可能會截獲你的資料，竊取你的密碼、信用卡訊息，或者你提交的其他任何東西。保護用戶不受此影響的最佳方式是在安全連接上託管任何涉及表單的頁面(例如:https://……地址)，使得資料在發送之前就已加密。

現代瀏覽器認識到在不安全的連接上發送表單資料所帶來的安全影響，並且已經實現了警告，以阻止用戶使用不安全的表單。

搜索域(Search field)範例：

通過使用type屬性的search值設置該類型域。

1	<input type="search" id="search" name="search">

文本域和搜索域之間的主要區別是瀏覽器的樣式——通常，搜索字段以圓角和/或給定一個“x”來清除輸入的值。然而，還有另外一個值得注意的特性:它們的值可以自動保存到同一站點上的多個頁面上自動完成。

電話號碼域(Phone number field)範例：

通過type屬性的tel值設置該類型域。

1	<input type="tel" id="tel" name="tel">

由於世界範圍內各種各樣的電話號碼格式，這種類型的字段不會對用戶輸入的值執行任何限制(包括字母，等等)。這主要是語義上的差異，儘管在一些設備上(特別是在移動設備上)，可能會出現一個不同的虛擬鍵盤，更適合輸入電話號碼。

URL域(URL field)範例：

通過type屬性的url值設置該類型域。

1	<input type="url" id="url" name="url">

它為字段添加了特殊的驗證約束，如果輸入無效的url，瀏覽器就會報告錯誤。

注：URL格式良好，但並不一定意味著它引用了一個實際存在的位置。

多行文本域(Multi-line text fields)

多行文本域專指使用<textarea>元素，而不是使用<input>元素。

1	<textarea cols="30" rows="10"></textarea>

textarea和常規的單行文本字段之間的主要區別是，允許用戶輸入包含硬換行符(即按回車)的文本。

注：注意到在大多數瀏覽器中，文本區域在右下角有一個拖放操作，允許用戶調整它的大小。這種調整能力可以通過使用CSS設置文本區域的resize性質為none來關閉。

<textarea>還接受了一些額外的屬性，以控制它在幾行代碼中呈現的效果(除此以外還有其他幾個)

<textarea> 元素屬性：

屬性名	預設值	描述
cols	20	文本控件的可見寬度，平均字符寬度。
rows		控制的可見文本行數。
wrap	soft	表示控件是如何包裝文本的。可能的值：hard或 soft

這裡有兩個關鍵點需要注意：

如果你想為<input>元素定義一個預設值，那麼你必須使用value屬性;另一方面，對於<textarea>元素，你將預設的文本放在起始標記和<textarea>的結束標記之間。
因為它的本質，<textarea>元素只接受文本內容；這意味著將任何HTML內容放入<textarea>中都呈現為純文本內容。

注：，<textarea>元素與<input>元素的編寫略有不同。<input>元素是一個空元素，這意味著它不能包含任何子元素。另一方面，<textarea>元素是一個常規元素，可以包含文本內容的子元素。

下拉內容(Drop-down content)

下拉窗口小組件是一種簡單的方法，可以讓用戶選擇眾多選項中的一個，而不需要佔用用戶界面的太多空間。HTML有兩種類型的下拉內容:select box和autocomplete box。在這兩種情況下，交互都是相同的——一旦控件被激活，瀏覽器就會顯示用戶可以選擇的值列表。

選擇框(Select box)

一個選擇框是用<select>元素建立的，其中有一個或多個<option>元素作為子元素，每個元素都指定了其中一個可能的值。

<select id="fruit" name="fruit">
  <option>香蕉</option>
  <option>櫻桃</option>
  <option>檸檬</option>
</select>

如果需要，可以使用selected屬性在所需的<option>元素上設置選擇框的預設值，然後在頁面加載時選擇該選項。<option>元素也可以嵌套在<optgroup>元素中，以建立視覺相關的組值。

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>香蕉</option>
    <option selected>櫻桃</option>
    <option>檸檬</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>胡蘿蔔</option>
    <option>茄子</option>
    <option>蕃薯</option>
  </optgroup>
</select>

如果一個<option>元素設置了value屬性，那麼當提交表單時該屬性的值就會被發送。如果忽略了value屬性，則使用<option>元素的內容作為選擇框的值。

在<optgroup>元素中，label屬性顯示在值之前，但即使它看起來有點像一個選項，它也不是可選的。

多選選擇框(Multiple choice select box)

預設情況下，選擇框只允許用戶選擇一個值。通過將multiple屬性添加到<select>元素，你可以允許用戶通過操作系統提供的預設機制來選擇幾個值。(如，同時按下 Cmd/ Ctrl並點擊多個值)。

注：在多個選項選擇框的情況下，選擇框不再顯示值為下拉內容——相反，它們都顯示在一個列表中。

<select multiple id="multi" name="multi">
  <option>香蕉</option>
  <option>櫻桃</option>
  <option>檸檬</option>
</select>

注：所有支持 <select>元素的瀏覽器也支持multiple。

自動補全輸入框(Autocomplete box)

可以使用<datalist>元素來為表單小組件提供建議的、自動完成的值，並使用一些<option>子元素來指定要顯示的值。

然後使用list屬性將資料列表綁定到一個文本域(通常是一個<input>元素)。

一旦資料列表與表單小組件相關聯，它的選項用於自動完成用戶輸入的文本;通常，這是作為一個下拉框向用戶展示的，在輸入框中輸入可能匹配的內容。

<label for="myFruit">你最喜歡的水果是什麼？</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
  <option>蘋果</option>
  <option>香蕉</option>
  <option>黑莓</option>
  <option>藍莓</option>
  <option>檸檬</option>
  <option>荔枝</option>
  <option>桃子</option>
  <option>水梨</option>
</datalist>

注：根據HTML規範，list屬性和<datalist>元素元素可以用於任何需要用戶輸入的小組件。但是，除了文本(例如顏色或日期)，它應該如何工作還不清楚，不同的瀏覽器在不同的情況下會有不同的表現。正因為如此，除了文本字段以外，要小心使用這個特性。

資料列表支持和後備

<datalist>元素是HTML表單的最新補充，因此瀏覽器的支持比我們之前看到的要少一些。最值得注意的是，它在10以下的IE版本中不受支持，Safari在寫作時仍然不支持它。

為了處理這個問題，這裡有一個小技巧，可以為這些瀏覽器提供一個不錯的備用

<label for="myFruit">你最喜歡的水果是什麼？（後備）</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
<datalist id="fruitList">
   <label for="suggestion">或者摘一個水果</label>
   <select id="suggestion" name="altFruit">
      <option>蘋果</option>
      <option>香蕉</option>
      <option>黑莓</option>
      <option>藍莓</option>
      <option>檸檬</option>
      <option>荔枝</option>
      <option>桃子</option>
      <option>水梨</option>
   </select>
</datalist>