HTML5新增的表單元素與屬性實例解析_html5教學技巧

本文以實例程式碼示範說明了HTML5新增的表單元素和屬性，示範程式碼包含了placeholder屬性、autofocus 屬性、list 和datalist 元素、search 類型文字方塊、email 類型文字方塊、number 類型文字方塊、 range 類型文字方塊、tel 類型文字方塊、url 類型文字方塊以及還有日期、時間類型的input元素等等。
範例程式碼如下：

複製程式碼

程式碼如下:

HTML5 行動Web開發指南

HTML5 新元素--表單元素

 placeholder 屬性：<br> 一般用在文字方塊上<br> 其主要作用是當文字方塊處於未輸入狀態且內容為空時給文字方塊的提示內容<br> 效果：<br> 當文字方塊取得焦點時，提示訊息會自動清空，失去焦點且未輸入內容時，提示訊息自動出現<br> 省去傳統的文字方塊需要藉助onfocel 和onblur 事件才能實現的效果<br> (相容大部分的PC瀏覽器和Mobile瀏覽器，只能說科技確實進步了)<br> 範例：<input type="text" placeholder="我是placeholder,是用來起提示作用"><br> 

 autofocus 屬性：<br> 指定控制項自動取得焦點，需要注意的是一個HTML頁面上只能有一個控制項具有改屬性<br> 範例：<input type="text" autofocus="true" placeholder="我設定了autofocus自動取得焦點屬性"> <br> 

 list 和datalist 元素：<br> list 元素的主要作用是提示文字方塊輸入，提示的資料來源則由datalist 提供<br> 目前list 和datalist 元素只有Opera 瀏覽器支持，甚至沒有任何一個行動瀏覽器支持該特性<br> 範例：<input type="text" placeholder="我加入了list 屬性和datalist 元素，可沒多少人懂我" list="myDataList"><br> <datalist id="myDataList"><br> <option label="1">我是datalist1</option>
<br> <option label="2">我是datalist2</option>
<br> <option label="3">我是datalist3</option>
<br> <option label="4">我是datalist4</option>
<br> </datalist><br> 

 search 類型文字框：<br> 主要用來搜尋關鍵字的文字方塊<br> 此文字方塊和普通文字方塊唯一區別，在Safari 和Chrome 瀏覽器下，文字方塊的外觀為圓角<br> 範例：<input type="search" placeholder="我是search 類型文字方塊"><br> 

 email 類型文字框：<br> 是一個可以指定電子郵件內容的文字框，通常用在輸入E-mail地址的輸入文字框上<br> 這種文字框和普通文字方塊在外觀上幾乎一樣，但實際上在Safari行動版瀏覽器下是有區別的<br> 其鍵盤會根據文字方塊類型不同而顯示相對應的鍵盤<br> 範例：<input type="email " placeholder="我是email 類型文字框"><br> 

 number 類型文字方塊：<br> 是一種用於輸入數字的文字方塊類型<br> 它可以配合min、max、及step屬性使用<br> 範例：<input type="number" value="0" min="0" max="10" step="1"><br> 

 range 類型文字方塊：<br> 是一種數值範圍輸入文字方塊類型，提供的是滑動輸入方式<br> 需要配合min、max、range等屬性的使用<br> 例：<input type="range" value="1" min="0" max="100" step=" 1"><br> 

 tel 類型文字方塊：<br> 是一種供使用者輸入電話號碼的文字方塊類型<br> 這種文字框在行動版瀏覽器下，其鍵盤會根據文字方塊類型不同而顯示相對應的鍵盤<br> 範例：<input type="tel" placeholder="我是tel 類型文字方塊"> <br> 

 url 類型文字方塊：<br> 是一種供使用者輸入Url位址的文字方塊類型<br> 這種文字框在行動版瀏覽器下，其鍵盤會根據文字方塊類型不同而顯示對應的鍵盤<br> 範例：<input type="url" placeholder="我是url 類型文字方塊"><br> 

 在HTML5規範中，除了新增表單元素外，還有日期、時間類型的input元素<br> 但這些類型都沒有廣泛的支持<br> 具體如下：<br> 日期和時間(含時區)：<br> <input type="datetime"><br> 日期和時間(不含時區)：<br> <br> 時間選擇器文字方塊：<br> <input type="time"><br> 日期選擇器文字方塊：<br> <input type="date"><br> 年的週號選擇器文字方塊：<br> <input type="week"><br> 月份選擇器文字方塊：<br> <input type="month"><br> 

HTML5 新元素--表單元素