本文以實例程式碼示範說明了HTML5新增的表單元素和屬性，示範程式碼包含了placeholder屬性、autofocus 屬性、list 和datalist 元素、search 類型文字方塊、email 類型文字方塊、number 類型文字方塊、 range 類型文字方塊、tel 類型文字方塊、url 類型文字方塊以及還有日期、時間類型的input元素等等。 範例程式碼如下： 複製程式碼程式碼如下: HTML5 行動Web開發指南 <br /> {<br /> text-align: center;<br /> }<br /> <br /> input<br /> {<br /> width: 450p; > }<br /> <br /> input[type="range"]<br /> {<br /> -webkit-appearance: none !important;<br /> -webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, <br />0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, <br />0 0px 1px. 🎜> margin-top: 2px;<br /> background-color: #272728;<br /> border-radius: 15px;<br /> width: 400px;<br /> }<br /> <s -thumb:設定上面滑桿的樣式*/<br /> input[type="range"]::-webkit-slider-thumb<br /> {<br /> -webkit-appearance: none !important;<br /> cursor : default;<br /> top: 1px;<br /> height: 9px;<br /> width: 20px;<br /> background: none repeat scroll 0 0 #777;<br /> background: none repeat scroll 0 0 #777;<br /> border; webkit-box-shadow: 0 -1px 1px black inset;<br /> }<br /> HTML5 行動Web開發指南 HTML5 新元素--表單元素 placeholder 屬性： 一般用在文字方塊上 其主要作用是當文字方塊處於未輸入狀態且內容為空時給文字方塊的提示內容 效果： 當文字方塊取得焦點時，提示訊息會自動清空，失去焦點且未輸入內容時，提示訊息自動出現 省去傳統的文字方塊需要藉助onfocel 和onblur 事件才能實現的效果 (相容大部分的PC瀏覽器和Mobile瀏覽器，只能說科技確實進步了) 範例： 登入後複製 autofocus 屬性： 指定控制項自動取得焦點，需要注意的是一個HTML頁面上只能有一個控制項具有改屬性 範例： 登入後複製 list 和datalist 元素： list 元素的主要作用是提示文字方塊輸入，提示的資料來源則由datalist 提供 目前list 和datalist 元素只有Opera 瀏覽器支持，甚至沒有任何一個行動瀏覽器支持該特性 範例： 我是datalist1 我是datalist2 我是datalist3 我是datalist4 登入後複製 search 類型文字框： 主要用來搜尋關鍵字的文字方塊 此文字方塊和普通文字方塊唯一區別，在Safari 和Chrome 瀏覽器下，文字方塊的外觀為圓角 範例： 登入後複製 email 類型文字框： 是一個可以指定電子郵件內容的文字框，通常用在輸入E-mail地址的輸入文字框上 這種文字框和普通文字方塊在外觀上幾乎一樣，但實際上在Safari行動版瀏覽器下是有區別的 其鍵盤會根據文字方塊類型不同而顯示相對應的鍵盤 範例： 登入後複製 number 類型文字方塊： 是一種用於輸入數字的文字方塊類型 它可以配合min、max、及step屬性使用 範例： 登入後複製 range 類型文字方塊： 是一種數值範圍輸入文字方塊類型，提供的是滑動輸入方式 需要配合min、max、range等屬性的使用 例： 登入後複製 tel 類型文字方塊： 是一種供使用者輸入電話號碼的文字方塊類型 這種文字框在行動版瀏覽器下，其鍵盤會根據文字方塊類型不同而顯示相對應的鍵盤 範例： 登入後複製 url 類型文字方塊： 是一種供使用者輸入Url位址的文字方塊類型 這種文字框在行動版瀏覽器下，其鍵盤會根據文字方塊類型不同而顯示對應的鍵盤 範例： 登入後複製 在HTML5規範中，除了新增表單元素外，還有日期、時間類型的input元素 但這些類型都沒有廣泛的支持 具體如下： 日期和時間(含時區)： 日期和時間(不含時區)： 時間選擇器文字方塊： 日期選擇器文字方塊： 年的週號選擇器文字方塊： 月份選擇器文字方塊： 登入後複製 HTML5 新元素--表單元素
