HTML5 新的Input類型

不言原創: 2018-05-08 10:47:331391瀏覽

這篇文章主要介紹了關於HTML5 新的Input類型，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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類型允許你選擇一個日期和時間(無時區)

<!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類型用於應該包含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 類型用於應該包含數值的輸入域。

您也能夠設定所接受的數字的限定：

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

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

使用下列的屬性來規定數字類型的限制：

屬性	描述
#disabled	#規定輸入欄位是停用的
max	規定允許的最大值
maxlength	規定輸入欄位的最大字元長度
min	規定允許的最小值
pattern	規定用於驗證輸入欄位的模式
#readonly	規定輸入欄位的值無法修改
#required	規定輸入欄位的值是必要的
size	規定輸入欄位中的可見字元數
step	規定輸入欄位的合法數字間隔
#value	規定輸入欄位的預設值

Input 类型: range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

定义一个不需要非常精确的数值（类似于滑块控制）:

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

请使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

Input 类型: search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

定义一个搜索字段 (类似站点搜索或者Google搜索):

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

Input 类型: tel

定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

Input 类型: time

time 类型允许你选择一个时间。

定义可输入时间控制器（无时区）：

选择时间: <input type="time" name="usr_time">

Input 类型: url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

定义输入URL字段:

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

提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

Input 类型: week

week 类型允许你选择周和年。

定义周和年 (无时区):

选择周: <input type="week" name="week_year">

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。