Close
HTML5では、フォームに関する新しい属性や指定できる属性値が多数追加される予定です。
入力必須・妥当性チェック・入力補助など、
これまでJavaScriptで作成されることの多かった機能が、
HTMLタグの属性だけで実現できるようになりそうです。
いずれも使用頻度の高い機能だけに、各ブラウザのサポートが待ち遠しいところです。
HTML5では、<input>タグのtype属性に指定できる値の種類が増えています。
それぞれの値を指定した場合、例えば、<input type=”email”>を指定すると、
この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、
送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。
また、Operaでは、<input type=”date”>などの日付型の値を指定するとカレンダー入力になったり、
<input type=”range”>でレンジ入力を指定すると、マウスで操作できるレンジバーが表示されるなど、
ユーザーの入力補助となるインターフェースも拡張されています。
HTML5から、<input>タグのtype属性に新しく追加される値には、以下のものなどがあります。
<input type=”email”> …… メールアドレス
<input type=”url”> …… URL
<input type=”search”> …… 検索テキスト
<input type=”tel”> …… 電話番号
<input type=”number”> …… 数値
<input type=”date”> …… 日付
<input type=”datetime”> …… UTC（協定世界時）による日時
<input type=”datetime-local”> …… UTC（協定世界時）によらないローカル日時
<input type=”month”> …… 月
<input type=”week”> …… 週
<input type=”time”> …… 時間
<input type=”range”> …… レンジ
<input type=”color”> …… 色
以下は、HTML5で<input>要素のtype属性に追加される値を並べたサンプルソースです。
Opera10などのブラウザで開くと、動作を確認することができます。
<form action=”xxx.php” method=”post”><label>メール（type=”email”）:<input type=”email” name=”email”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>URL（type=”url”）:<input type=”url” name=”url”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>検索（type=”search”）:<input type=”search” name=”search”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>電話（type=”telephone”）:<input type=”tel” name=”tel”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>数値（type=”number”）:<input type=”number” name=”number”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>日付（type=”date”）:<input type=”date” name=”date”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>日時（type=”datetime”）:<input type=”datetime” name=”datetime”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>ローカル日時（type=”datetime-local”）:<input type=”datetime-local” name=”datetime-local”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>月（type=”month”）:<input type=”month” name=”month”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>週（type=”week”）:<input type=”week” name=”week”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>時間（type=”time”）:<input type=”time” name=”time”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>レンジ（type=”range”）:<input type=”range” name=”range”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>色（type=”color”）:<input type=”color” name=”color”></label><input type=”submit” value=”送信”></form>
HTML5では、<input>タグのtype属性以外にも、入力ルールを指定する様々な属性が追加されています。
autofocus属性を指定すると、ウェブページが表示された際に、指定した入力欄にカーソルが当たって自動的にフォーカスされます。
すでに大手検索エンジンなどで利用されている機能ですが、現状では JavaScript で実現しているのが一般的です。
placeholder属性で指定した値が、入力欄に初期値として表示されます。例えば、テキストフィールドに初期値として、
「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。
autocomplete属性を指定すると、ユーザーに対して入力候補を提示して、内容を自動補完することができます。
例えば、検索キーワード候補の提示のようなインターフェースを実現できます。
入力候補として表示されるデータのリストを指定するには、HTML5から追加される予定の<datalist>タグを使用します。<input>タグのlist属性の値と<datalist>タグのid属性の値を同じにして、入力欄とデータリストを関連付けます。
required属性を指定すると、その入力項目が入力必須であることをブラウザに知らせることができます。
pattern属性を指定すると、正規表現を使って入力値のパターンを指定することができます。
正規表現が使えることで、特定の文字列が含まれているかどうかや、半角英数・全角文字・ひがらなのみなど、入力制限を自由に設定できます。
以下のサンプルは、半角英数で入力されているかどうかのチェックです。
multiple属性を指定すると、ユーザーが複数の値を一度に入力、あるいは、選択して送信することができます。値はカンマ区切りとなります。
min属性とmax属性を指定すると、数値型や日付型の入力欄で入力できる値の最小値と最大値を指定することができます。
step属性を指定すると、数値型や日付型の入力欄で刻むステップ値を指定することができます。
accept属性でファイル形式を指定すると、どのタイプのファイルがサーバ側で受け取ることができるかをブラウザに知らせることができます。
まだ、 accept属性をサポートしたブラウザは無いようですが、もしサポートされれば、
おそらくユーザーが選択できるファイル形式を制限できるようになると思われます。
以下は、HTML5で<input>要素に追加される入力ルールを指定する属性を並べたサンプルソースです。
Opera10などのブラウザで開くと、動作を確認することができます。（ブラウザでサポートされていない値もあります）
<form>
<fieldset>
オートフォーカス（autofocus属性）:<input type=”text” name=”subject” autofocus><br>
プレースホルダー（placeholder属性）:<input type=”search” name=”q” placeholder=”検索するキーワードを入力してください”><br>
オートコンプリート（autocomplete属性）:
<input type=”text” name=”yourarea” autocomplete=”on” list=”tokyo”>
<datalist id=”tokyo”>
<option value=”渋谷”>
<option value=”新宿”>
<option value=”池袋”>
</datalist><br>
入力必須（required属性）:<input type=”text” name=”yourname” required><br>
正規表現による入力制限（pattern属性）:<input type=”text” name=”userid” pattern=”^[0-9A-Za-z]+$”> ※半角英数<br>
複数の値（multiple属性）:
<input type=”text” name=”hobby” list=”hobbys” multiple>
<datalist id=”hobbys”>
<option value=”映画”>
<option value=”音楽”>
<option value=”絵画”>
<option value=”読書”>
</datalist><br>
最小値と最大値（min属性・max属性）:<input type=”number” name=”ninzu” min=”1″ max=”4″> <br>
ステップ値（step属性）:<input type=”number”name=”lot” step=”0.5″><br>
<input type=”submit” value=”送信”>
</fieldset>
</form>
以下は、HTML5で作成したフォームのサンプルソースです。
Opera10などのブラウザで開くと、動作を確認することができます。
| <前へ | 記事一覧へ | 次へ> |
どのカジノが自分に最適か分からないですか?
