HTML5中新的Input類型有哪些

這篇文章主要為大家展示了“HTML5中新的Input類型有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5中新的Input類型有哪些”這篇文章吧。

成都創(chuàng)新互聯(lián)公司是專業(yè)的酉陽土家族苗族網(wǎng)站建設(shè)公司，酉陽土家族苗族接單;提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行酉陽土家族苗族網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

Inpute類型:color

color類型用在input字段主要用于選取顏色，如下所示：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自選教程(如約智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php">
			選擇你喜歡的顏色：
			<input type="color" name="favcolor"><br />
			<input type="submit">
		</form>
		
	</body>
</html>

Input類型：date

date類型允許你從一個日期選擇器選擇一個日期。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自選教程(如約智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php">
			生日：
			<input type="date" name="bday"><br />
			<input type="submit">
		</form>
		
	</body>
</html>

Input類型：datetime

datetime類型允許你選擇一個日期(UTC時間)

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自選教程(如約智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php">
			生日(日期和時間)：
			<input type="datetime" name="bdaytime"><br />
			<input type="submit">
		</form>
		
	</body>
</html>

Input類型：datetime-local

datetime-local類型允許你選擇一個日期和時間(無時區(qū))

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自選教程(如約智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php">
			生日(日期和時間)：
			<input type="datetime-local" name="bdaytime"><br />
			<input type="submit">
		</form>
		
	</body>
</html>

Input類型：email

email類型用于應(yīng)該包含e-mail地址的輸入域

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自選教程(如約智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php">
			E-mail：
			<input type="email" name="usremail"><br />
			<input type="submit">
		</form>
		
	</body>
</html>

Input類型:month

month類型允許你選擇一個月份

生日 (月和年): <input type="month" name="bdaymonth">

Input 類型: number

number 類型用于應(yīng)該包含數(shù)值的輸入域。

您還能夠設(shè)定對所接受的數(shù)字的限定：

定義一個數(shù)值輸入域(限定):

數(shù)量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">

使用下面的屬性來規(guī)定對數(shù)字類型的限定：

屬性	描述
disabled	規(guī)定輸入字段是禁用的
max	規(guī)定允許的最大值
maxlength	規(guī)定輸入字段的最大字符長度
min	規(guī)定允許的最小值
pattern	規(guī)定用于驗證輸入字段的模式
readonly	規(guī)定輸入字段的值無法修改
required	規(guī)定輸入字段的值是必需的
size	規(guī)定輸入字段中的可見字符數(shù)
step	規(guī)定輸入字段的合法數(shù)字間隔
value	規(guī)定輸入字段的默認(rèn)值

Input 類型: range

range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。

range 類型顯示為滑動條。

定義一個不需要非常精確的數(shù)值（類似于滑塊控制）:

<input type="range" name="points" min="1" max="10">

請使用下面的屬性來規(guī)定對數(shù)字類型的限定：

max - 規(guī)定允許的最大值
min - 規(guī)定允許的最小值
step - 規(guī)定合法的數(shù)字間隔
value - 規(guī)定默認(rèn)值

Input 類型: search

search 類型用于搜索域，比如站點搜索或 Google 搜索。

定義一個搜索字段 (類似站點搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

Input 類型: tel

定義輸入電話號碼字段:

電話號碼: <input type="tel" name="usrtel">

Input 類型: time

time 類型允許你選擇一個時間。

定義可輸入時間控制器（無時區(qū)）：

選擇時間: <input type="time" name="usr_time">

Input 類型: url

url 類型用于應(yīng)該包含 URL 地址的輸入域。

在提交表單時，會自動驗證 url 域的值。

定義輸入URL字段:

添加您的主頁: <input type="url" name="homepage">

提示:iPhone 中的 Safari 瀏覽器支持 url 輸入類型，并通過改變觸摸屏鍵盤來配合它（添加 .com 選項）。

Input 類型: week

week 類型允許你選擇周和年。

定義周和年 (無時區(qū)):

選擇周: <input type="week" name="week_year">

注意:并不是所有的主流瀏覽器都支持新的input類型，不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規(guī)的文本域。

以上是“HTML5中新的Input類型有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：HTML5中新的Input類型有哪些
本文鏈接：http://aaarwkj.com/article14/igdige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、關(guān)鍵詞優(yōu)化、移動網(wǎng)站建設(shè)、微信小程序、軟件開發(fā)、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区