<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
|
【テンプレートの最新記事】