《HTML5與CSS3基礎教程》第十六章學習筆記 表單

第16章 表單

16.2 創建表單

<form method="formmethod" action="script.url">
...
</form>

• 這裏的formmethod可以是get或者post

  • get：傳到服務器，並從服務器獲取數據
  • post：僅上傳數據

• 這裏的script.utl是提交表單時要運行的腳本在服務卡上的位置

16.4 對錶單元素進行組織

<form method="post" action="show-data.php">
    <fieldset> <!-- 表單上有很多信息時，可以用fieldset組織起來-->
        <legend></legend><!-- 爲每個fieldset提供一個標題-->
        <input />
    </fieldset>
</form>

對於單選按鈕，最好總是使用fieldset和legend

16.5 創建文本框

• lable屬性：放訪問者識別文本框的標籤，例如<label for="idlabel">LastName:</label>
• type=text
• name="dataname"：這裏的dataname是用於讓服務器（和腳本）識別輸入數據的文本
• value="default"：這裏的default是這個字段中最初顯示的數據，如果訪問者沒有輸入別的內容的話，這一數據將被髮送到服務器
• placeholder="hinttext"：hinttext用於提示用戶的輸入，當input元素獲得焦點時，這些文本將會消失
• required="required"，表示必填項
• autofocus或autofocus="autofocus"：表示頁面在加載時會默認獲得焦點
• size="n"：定義文本框的大小
• maxlength="n"：n表示該文本框允許輸入的最大字符數

提示　默認情況下，大多數瀏覽器會保存用戶輸入的文本，這樣就可以在日後節省用戶輸入的時間。可以通過對input添加autocomplete="off"來關閉這一特性。這對於要求輸入敏感信息（如信用卡號）的字段來說是很有用的。如果將它用於form元素（例如，<form method="post" action="process.php" autocomplete="off">），那麼其中的每個字段都會這樣。

16.6 爲表單組件添加說明標籤

• label元素：描述表單字段用途的文本
  • for屬性：for的值如果跟表單字段的id值相同，該label就與該字段顯示地關聯起來了

如果for的值與一個表單字段的id的值相同，該label就與該字段顯式地關聯起來了。這對提升表單的可用性和可訪問性都有幫助。例如，如果訪問者與標籤有交互（如使用鼠標點擊了標籤），與之對應的表單字段就會獲得焦點

16.7 創建密碼框

• 密碼框中輸入的文本會使用圓點或星號進行隱藏

提示　密碼框提供的唯一保護措施就是防止其他人看到用戶輸入的密碼。如果要真正地保護密碼，可以使用安全服務器（https://）。

16.8 創建電子郵件框、搜索框、電話框和URL框

• 電子郵件框

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" class="field-large" />

• 搜索框

    <label for="search">Search</label>
	<input type="search" id="search" />

• 電話框

    <label for="phone">Phone:</label>
    <input type="tel" id="phone"  class="field-large" placeholder="xxx-xxx-xxxx"pattern="\d{3}-\d{3}-\d{4}" />

• URL框

    <label for="website">Website URL:</label>
    <input type="url" id="website" class="field-large" placeholder="http://www.example.com" />

16.9 創建單選框

<fieldset>
	<legend>Gender:</legend>
    	<p>
    		<input type="radio" id="gender-male" name="gender" value="male">
    		<label for="gender-male">Male</label>
    	</p>
    	<p>
    		<input type="radio" id="gender-female" name="gender" value="female">
    		<label for="gender-female">FeMale</label>
    	</p>
</fieldset>

16.10 創建複選框

	<input type="checkbox" id="bicycle" name="vehicle" value="bicycle">
	<label for="bicycle">bicycle</label>
	
	<input type="checkbox" id="bus" name="vehicle" value="bus">
	<label for="bus">bus</label>
	
	<input type="checkbox" id="subway" name="vehicle" value="subway">
	<label for="subway">subway</label>

16.11 創建文本區域

<label for="bio">Bio:</label> 
<textarea id="bio" name="bio" cols="40" rows="5" class="field-large"></textarea>

16.12 創建選擇框

1.同一組選擇框

	<label for="state">State:</label>
	<select id="state" name="state">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="California">California</option>
	</select>

2.分組選擇框

	<label for="referral">Where did you find out about us?</label>
	<select id="referral" name="referral">
	    <optgroup label="Online">
	      <option value="social_network">Social Network</option>
	      <option value="search_engine">Search Engine</option>
	    </optgroup>
	    <optgroup label="Offline">
	      <option value="postcard">Postcard </option>
	      <option value="word_of_mouth">Word of Mouth</option>
	    </optgroup>
	</select>

16.13 讓訪問者上傳文件

	<form method="post" action="show-data.php" enctype="multipart/form-data">
		<label for="picture">Picture</label>
		<input type="file" id="picture" name="picture">
		<p class="instructions">Maximum size of 700k.JPG,GIF or PNG.</p>
	</form>

16.14 創建隱藏字段

<input type="hidden" name="step" value="6" />
<!-- 訪問者不會看到這個輸入框，但他們提交表單的時候，
名“step”和值“6”會隨着表單中從訪問者輸入獲取的數據一起傳送給服務器 -->

提示　不要將密碼、信用卡號等敏感信息放到隱藏字段中。即便它們不會顯示到網頁中，訪問者也可以通過查看HTML源代碼看到它們。

提示　要創建訪問者可見但不可修改的表單元素，有兩種方法。一種是使用disabled（禁用）屬性。另一種是使用readonly（只讀）屬性。與禁用字段不同，只讀字段可以獲得焦點，訪問者可以選擇和複製裏面的文本，但不能修改這些文本。它只能應用於文本輸入框和文本區域，例如，<input type="text" id="coupon" name="coupon" value="FREE" readonly />。還可以使用readonly="readonly"這樣的形式，結果是一樣的。

16.15 創建提交按鈕

    <!-- 結合文本和圖像的提交按鈕 -->
	<form>
		<button type="submit" class="btn">
			<img src="勾.png" alt="">
			Create Profile
		</button>
	</form>

樣子。創建重置按鈕可以使用或Reset。我們也可以爲重置按鈕添加樣式。

提示　HTML5對type="email"和type="URL"的input添加了自動驗證功能。對提交按鈕使用formnovalidate屬性可以關閉該功能，如。

16.16 禁用表單元素

• 禁用表單元素的方法：在表單元素的開始標籤後輸入disabled或者disabled="disabled"（兩種方法在HTML5中均可以）。

提示　可以使用JavaScript將表單元素的狀態由禁用改爲可用（也可以反過來）

16.17 根據狀態爲表單設置樣式

選擇器	應用
:focus	獲得焦點的字段
:checked	選中的單選按鈕或複選框
:disabled	具有disabled屬性的字段
:enable	與:disabled相反
:required	具有required屬性的字段
:optional	與:required相反
:invalid	其值與pattern屬性給出的模式不匹配的字段；或值不是有效電子郵件格式的電子郵件框，值不是有效URL格式的URL框，以及任何標記爲required但值爲空的字段
:valid	與:invalid相反

input:focus,
textarea{
    background-color:greenyellow;
}
<!-- 爲任意獲得焦點的input或textarea添加背景色 -->