<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 のサーバエラーを回避
カーソルが over で無い場合には表示されませんが、カーソルが上に来ると、コンボボックスのようなコントロールが表示されて候補を開く事ができます
Firefox
フィールド内で下矢印を使用するか、フィールド内でマウスをクリックするかで候補を表示させます
IE11
フォーカスを得ると、候補が表示されます。
type 属性の tel 指定は、特別な入力チェックはされませんが、スマホで入力したした場合に、入力パッドが数値のみのものになるので、そのような数値入力をスマホでしてもらう事を想定する場合に有用です。入力チェックそのものは、pattern 属性と併用するといいと思います。
Firefox
IE11
( 
但し、やはり HTML Help file (with user notes) をダウンロードするのがいいでしょう。そして、ダウンロード後はブロックは解除して下さい。
▼ 以下は、少し古いですが自分でビルドしたものです
ホームボタンで、良く使いそうなリンク一覧が表示されます
あとは、C:\httpd142p\user というディレクトリを作成してその中でテストする事が最も簡単です
PHP
▼ 編集モード
Google Chrome のデベロッパーツールでは、このような大きなエディタを開かなくても、属性を直接ダブルクリックすれば、編集可能な状態になります。
また、そのような状態で属性全体を全てクリアすると、属性単位で削除する事も可能です。以下は、属性側をダブルクリックしたので、属性が選択されて編集可能になっています。
値をダブルクリックすると、値が選択されます。但し、属性の値が URL の場合はクリックするとウインドウを開いてしまうので、属性を選択してからカーソルを移動させるか、前述の大きなエディタを使うといいと思います。
ある範囲を指定する為のコントロールなので、min、max、step 属性が併用できます。何も指定しなければ、min="0" max="100" step="1" を指定した事になります。
両端の値は残念ながら表示される事は無く、スライダーを動かした時の値が表示されるのは、IE11 のみで、そのままでは Chrome や Firefox でリアルタイムに値を知る事ができません。
そこで、もう一つフィールドを追加してスライダーの onmousemove イベントで値をセットしてみました。
▼ 実際の実行
これには本当に驚きで、総じて HTML5 における input 要素の拡張に関しては全てにおいて一歩先を行っています。
Firefox
Firefox のこの機能は微妙です。実装にあたって、入力の履歴と同じリソースを使って実現しているので、過去の入力値と、リストが同時に表示されるという不便な状況になっており、削除するにはキャッシュの削除と同等の手間が必要です。
IE11
IE11 は、Firefox に比べてかなりマシです。空の場合のみクリックすると、常にリストが表示されて選択可能ですが、値が入っている場合は、やはりリストが出ないので修正時の意味がありません。
ただ、Firefox に比べ、値がある場合は x のクリアコントロールが表示されるので、ひと手間楽です。
▼ 実際の実行
フィールド右横のコントロールは、マウスカーソルを近づけるか、フォーカスが入力フィールドにある時( つまりアクティブな時 ) だけ表示されます。
ただ、最大値と最小値の値の都合で、増分 2 にした場合、奇数だけになったり、偶数だけになったりしてちょっと問題はあります。
その際、コントロールで変更しようとすると、奇数か偶数に飛びます。入力した値で送信しようとすると以下のようなエラーになります
Firefox
Google Chrome と同様で、奇数だけになったり、偶数だけになったりした上、奇数とコントロールが決めた時に、偶数値を入力すると、コントロールが動作せずに値が変わらず枠が赤くなってエラー扱いになっています。
IE11
IE11 では、値変更用のコントロールが無い事をのぞいて、属性による検査の仕様は同等です。
▼ 実際の実行
IE11
Firefox インスペクタ
