HTML5新增的表單元素和屬性實例解析
來源:易賢網(wǎng) 閱讀:904 次 日期:2014-07-08 18:51:45
溫馨提示:易賢網(wǎng)小編為您整理了“HTML5新增的表單元素和屬性實例解析”,方便廣大網(wǎng)友查閱!

本文以實例代碼演示說明了HTML5新增的表單元素和屬性,演示代碼中包含了placeholder屬性、autofocus 屬性、list 和 datalist 元素、search 類型文本框、email 類型文本框、number 類型文本框、range 類型文本框、tel 類型文本框、url 類型文本框以及還有日期、時間類型的 input元素等等。

示例代碼如下:

代碼如下:

<!DOCTYPE html>

<meta charset="utf-8">

<title>HTML5 移動Web開發(fā)指南</title>

<style type="text/css">

h1, h2, h3, h4, h5, h6

{

text-align: center;

}

input

{

width: 450px;

}

input[type="range"]

{

-webkit-appearance: none !important;

-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset,

0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset,

0 0px 1px rgba(0, 0, 0, 0.6) inset;

margin-top: 2px;

background-color: #272728;

border-radius: 15px;

width: 400px;

}

/*-webkit-slider-thumb:設(shè)置上面滑塊的樣式*/

input[type="range"]::-webkit-slider-thumb

{

-webkit-appearance: none !important;

cursor: default;

top: 1px;

height: 9px;

width: 20px;

background: none repeat scroll 0 0 #777;

border-radius: 15px;

-webkit-box-shadow: 0 -1px 1px black inset;

}

</style>

<header>

<section>

<h1>

HTML5 移動Web開發(fā)指南</h1>

</section>

</header>

<fieldset>

<legend>HTML5 新元素--表單元素</legend>

<section>

<pre> placeholder 屬性:

一般用在文本框上

其主要作用是當文本框處于未輸入狀態(tài)并且內(nèi)容為空時給文本框的提示內(nèi)容

效果:

當文本框獲取焦點時,提示信息自動清空,失去焦點且未輸入內(nèi)容時,提示信息又自動出現(xiàn)

省去傳統(tǒng)的文本框需要借助 onfocel 和 onblur 事件才能實現(xiàn)的效果

(兼容大部分的PC瀏覽器和Mobile瀏覽器,只能說科技確實進步了)

示例:<input type="text" placeholder="我是 placeholder,是用來起提示作用">

</pre>

</section>

<section>

<pre> autofocus 屬性:

指定控件自動獲取焦點,需要注意的是一個HTML頁面上只能有一個控件具有改屬性

示例:<input type="text" autofocus="true" placeholder="我設(shè)置了 autofocus自動獲取焦點屬性">

</pre>

</section>

<section>

<pre> list 和 datalist 元素:

list 元素的主要作用是提示文本框輸入,提示的數(shù)據(jù)源則由 datalist 提供

目前 list 和 datalist 元素只有 Opera 瀏覽器支持,甚至沒有任何一款移動瀏覽器支持該特性

示例:<input type="text" placeholder="我添加了 list 屬性 和 datalist 元素,可沒多少人懂我" list="myDataList">

<datalist id="myDataList">

<option label="1">我是datalist1</option>

<option label="2">我是datalist2</option>

<option label="3">我是datalist3</option>

<option label="4">我是datalist4</option>

</datalist>

</pre>

</section>

<section>

<pre> search 類型文本框:

主要用來搜索關(guān)鍵詞的文本框

該文本框和普通文本框唯一區(qū)別,在 Safari 和 Chrome 瀏覽器下,文本框的外觀為圓角

示例:<input type="search" placeholder="我是search 類型文本框">

</pre>

</section>

<section>

<pre> email 類型文本框:

是一個可以指定電子郵件內(nèi)容的文本框,通常用在輸入E-mail地址的輸入文本框上

這種文本框和普通文本框在外觀上幾乎一樣,但實際上在Safari移動版瀏覽器下是有區(qū)別的

其鍵盤會根據(jù)文本框類型不同而顯示相對應(yīng)的鍵盤

示例:<input type="email" placeholder="我是 email 類型文本框">

</pre>

</section>

<section>

<pre> number 類型文本框:

是一種用于輸入數(shù)字的文本框類型

它可以配合 min、max、及step屬性使用

示例:<input type="number" value="0" min="0" max="10" step="1">

</pre>

</section>

<section>

<pre> range 類型文本框:

是一種數(shù)值范圍輸入文本框類型,提供的是一種滑動輸入方式

需要配合 min、max、range等屬性的使用

示例:<input type="range" value="1" min="0" max="100" step="1">

</pre>

</section>

<section>

<pre> tel 類型文本框:

是一種供用戶輸入電話號碼的文本框類型

這種文本框在移動版瀏覽器下,其鍵盤會根據(jù)文本框類型不同而顯示相對應(yīng)的鍵盤

示例:<input type="tel" placeholder="我是 tel 類型文本框">

</pre>

</section>

<section>

<pre> url 類型文本框:

是一種供用戶輸入Url地址的文本框類型

這種文本框在移動版瀏覽器下,其鍵盤會根據(jù)文本框類型不同而顯示相對應(yīng)的鍵盤

示例:<input type="url" placeholder="我是 url 類型文本框">

</pre>

</section>

<section>

<pre> 在HTML5規(guī)范中,除了新增表單元素外,還有日期、時間類型的 input元素

但這些類型都沒有得到廣泛的支持

具體如下:

日期和時間(含時區(qū)):

<input type="datetime">

日期和時間(不含時區(qū)):

<input type="datetime-local">

時間選擇器文本框:

<input type="time">

日期選擇器文本框:

<input type="date">

年的周號選擇器文本框:

<input type="week">

月份選擇器文本框:

<input type="month">

</pre>

</section>

</article>

</fieldset>

<footer>

<section>

<h5>

HTML5 新元素--表單元素

</h5>

</section>

</footer>

</html>

更多信息請查看IT技術(shù)專欄

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:HTML5新增的表單元素和屬性實例解析
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)