2017年05月27日

HTML5 input の type テンプレート


<style>
.fld_type td {
	padding: 4px;
}
</style>
<form>
	<table class="fld_type">
	<tr>
		<td>text</td>
		<td>
			<input type="text" name="fld_default">
		</td>
	</tr>
	<tr>
		<td>search</td>
		<td>
			<input type="search" name="fld_search" value="検索">
		</td>
	</tr>
	<tr>
		<td>tel</td>
		<td>
			<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
		</td>
	</tr>
	<tr>
		<td>url</td>
		<td>
			<input type="url" name="fld_url">
		</td>
	</tr>
	<tr>
		<td>email</td>
		<td>
			<input type="email" name="fld_email">
		</td>
	</tr>
	<tr>
		<td>datetime</td>
		<td>
			<input type="datetime" name="fld_datetime">
		</td>
	</tr>
	<tr>
		<td>datetime-local</td>
		<td>
			<input type="datetime-local" name="fld_datetime_local">
		</td>
	</tr>
	<tr>
		<td>date</td>
		<td>
			<input type="date" name="fld_date">
		</td>
	</tr>
	<tr>
		<td>month</td>
		<td>
			<input type="month" name="fld_month">
		</td>
	</tr>
	<tr>
		<td>week</td>
		<td>
			<input type="week" name="fld_week">
		</td>
	</tr>
	<tr>
		<td>time</td>
		<td>
			<input type="time" name="fld_time">
		</td>
	</tr>
	<tr>
		<td>number</td>
		<td>
			<input type="number" name="fld_number">
		</td>
	</tr>
	<tr>
		<td>range</td>
		<td>
			<input type="range" name="fld_range">
		</td>
	</tr>
	<tr>
		<td>color</td>
		<td>
			<input type="color" name="fld_color">
		</td>
	</tr>

	<tr>
		<td>submit</td>
		<td>
			<input type="submit" name="fld_submit">
		</td>
	</tr>
	</table>
</form>

text
search
tel
url
email
datetime
datetime-local
date
month
week
time
number
range
color
submit
Google Chrome での確認

search では、入力値がある場合、カーソルが上にあると、x ボタンが表示されます。

tel では何もチェックされないので、pattern 属性をセットしています。但し、スマホではキーパッドが数字用になるので、number では無く tel を指定すると良い場合があります

url と email は最低限のチェックがされます

datetime は何もされません

number は、カーソルが上にあると、spinner が表示されます。また、数字関係以外は入力できません

input のみを並べたもの
<style>
.fld_type {
	white-space: pre;
}
</style>
<form>
<div class="fld_type">
<input type="text" name="fld_default">
<input type="search" name="fld_search" value="検索">
<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
<input type="url" name="fld_url">
<input type="email" name="fld_email">
<input type="datetime" name="fld_datetime">
<input type="datetime-local" name="fld_datetime_local">
<input type="date" name="fld_date">
<input type="month" name="fld_month">
<input type="week" name="fld_week">
<input type="time" name="fld_time">
<input type="number" name="fld_number">
<input type="range" name="fld_range">
<input type="color" name="fld_color">
<div>

<input type="submit" name="fld_submit">
</form>

PHP 用 テンプレート

デモページ

日付系など、特殊なコントロールでどのような値が入るか確認できますので、適当に値を入力して送信ボタンを押してください。
<?php
session_cache_limiter('nocache');
session_start();

header( "Content-Type: text/html; charset=utf-8" );

foreach( $_GET as $key => $value ) {
	$_GET[$key] = str_replace( "\"", "&#34;", $value );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<style>
.fld_type {
	white-space: pre;
}
</style>
</head>
<body>

<form>
<div class="fld_type">
<input type="text" name="fld_default" value="<?= $_GET["fld_default"] ?>">
<input type="search" name="fld_search" value="検索" value="<?= $_GET["fld_search"] ?>">
<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}" value="<?= $_GET["fld_tel"] ?>">
<input type="url" name="fld_url" value="<?= $_GET["fld_url"] ?>">
<input type="email" name="fld_email" value="<?= $_GET["fld_email"] ?>">
<input type="datetime" name="fld_datetime" value="<?= $_GET["fld_datetime"] ?>">
<input type="datetime-local" name="fld_datetime_local" value="<?= $_GET["fld_datetime_local"] ?>">
<input type="date" name="fld_date" value="<?= $_GET["fld_date"] ?>">
<input type="month" name="fld_month" value="<?= $_GET["fld_month"] ?>">
<input type="week" name="fld_week" value="<?= $_GET["fld_week"] ?>">
<input type="time" name="fld_time" value="<?= $_GET["fld_time"] ?>">
<input type="number" name="fld_number" value="<?= $_GET["fld_number"] ?>">
<input type="range" name="fld_range" value="<?= $_GET["fld_range"] ?>">
<input type="color" name="fld_color" value="<?= $_GET["fld_color"] ?>">
<div>

<input type="submit" name="fld_submit">
</form>

<pre>
<?php 
foreach( $_GET as $key => $value ) {
	$_GET[$key] = str_replace( "&#34;", "\"",  $value );
}
print_r($_GET)
?>
</pre>

</body>
</html>



タグ:HTML5
posted by at 2017-05-27 19:26 | テンプレート | このブログの読者になる | 更新情報をチェックする