ホームページ > 記事 > ウェブフロントエンド > HTML5 の新しい入力タイプ

HTML5 の新しい入力タイプ

不言オリジナル: 2018-05-08 10:47:331360ブラウズ

この記事では主に HTML5 の新しい入力タイプを紹介します。これを必要な友達に共有します。

入力タイプ: color

in 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>

入力タイプ: date

日付タイプを使用すると、日付ピッカーから日付を選択できます。 datetime タイプでは、日付 (UTC 時間) を選択できます

datetime- local タイプでは、日付と時刻 (タイムゾーンなし) を選択できます

<!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>

入力タイプ: email

電子メールタイプは、電子メールアドレスを含む入力フィールドに使用されます

<!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>

入力タイプ: 月

月タイプでは、月を選択できます

<!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>

入力タイプ: 数値

数値タイプは、数値を含む必要がある入力フィールドに使用されます。

受け入れられる数値に制限を設定することもできます:

数値入力フィールド (制限) を定義します:

<!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>

次の属性を使用して、数値タイプの制限を指定します:

プロパティ	説明
disabled	入力フィールドが無効であることを指定します
max	許容される最大値を指定します
maxlength	入力フィールドの最大文字数長さ
min	許容される最小値を指定します
pattern	入力フィールドの検証に使用されるパターンを指定します
readonly	入力フィールドの値が変更できないことを指定します
必須	入力フィールドの値を必須に指定します
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类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。