<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>
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( "\"", """, $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( """, "\"", $value );
}
print_r($_GET)
?>
</pre>
</body>
</html>
タグ：HTML5
|
|
【テンプレートの最新記事】
1) 別ドメインでも ajax が動作するように、Access-Control-Allow-Origin: * をセット
2) ブラウザの入力チェック機能を使う為に、FORM 内に入力を配置( 但し name 属性なし )
3) $.ajax の戻りとして JSON データを使用しているが、テストの為 JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE を指定
send_jquery_ajax.php
send_form_action.php
1) キャッシュ無効
2) style
3) script
4) post 時に送信
5) from ヘッダ追加
※ required と type="email" で mb_send_mail のサーバエラーを回避
