html5新增的表單元素和屬性實(shí)例解析
來源:易賢網(wǎng) 閱讀:708 次 日期:2014-11-25 09:52:35
溫馨提示:易賢網(wǎng)小編為您整理了“html5新增的表單元素和屬性實(shí)例解析”,方便廣大網(wǎng)友查閱!

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

示例代碼如下:

>

復(fù)制代碼代碼如下:<!doctype html>

<meta charset=utf-8>

<title>html5 移動(dòng)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 移動(dòng)web開發(fā)指南</h1>

</section>

</header>

<fieldset>

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

<section>

<pre> placeholder 屬性:

一般用在文本框上

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

效果:

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

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

(兼容大部分的pc瀏覽器和mobile瀏覽器,只能說科技確實(shí)進(jìn)步了)

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

</pre>

</section>

<section>

<pre> autofocus 屬性:

指定控件自動(dòng)獲取焦點(diǎn),需要注意的是一個(gè)html頁面上只能有一個(gè)控件具有改屬性

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

</pre>

</section>

<section>

<pre> list 和 datalist 元素:

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

目前 list 和 datalist 元素只有 opera 瀏覽器支持,甚至沒有任何一款移動(dòng)瀏覽器支持該特性

示例:<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 類型文本框:

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

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

其鍵盤會(huì)根據(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ù)值范圍輸入文本框類型,提供的是一種滑動(dòng)輸入方式

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

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

</pre>

</section>

<section>

<pre> tel 類型文本框:

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

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

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

</pre>

</section>

<section>

<pre> url 類型文本框:

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

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

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

</pre>

</section>

<section>

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

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

具體如下:

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

<input type=datetime>

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

<input type=datetime-local>

時(shí)間選擇器文本框:

<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)手機(jī)網(wǎng)站地址:html5新增的表單元素和屬性實(shí)例解析
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

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