HTML5 : input 要素に datalist 要素リストを並べて入力候補を作成する

HTML5 の仕様の実現において、ブラウザによって振る舞いが違う事を最初に考慮すべきです。機能によっては、全く実装されていないブラウザもあるので、その場合は jQuery のプラグイン等を使用して同等の機能を実現する必要があります。

datalist をテストした、Chrome と Firefox と IE11 では、どれも実装されていましたが、表示や振る舞いに違いがあります。また、ここでは datalist 実装で想定される場合の入力フォームでの構成に便利であると思われる fieldset を使用して入力項目のグループ化を行っています。

fieldset のみでは、表示に支障があるので、いくつかの CSS を指定していますが、border-radius に関して、IE11 が動作しない事を確認しました。

趣味

好きな食べ物

Chrome

 
カーソルが over で無い場合には表示されませんが、カーソルが上に来ると、コンボボックスのようなコントロールが表示されて候補を開く事ができます

Firefox



フィールド内で下矢印を使用するか、フィールド内でマウスをクリックするかで候補を表示させます

IE11



フォーカスを得ると、候補が表示されます。

<style>
fieldset  {
	padding: 20px;
	border:1px solid #606060;
	border-radius: 12px;
	width: 300px;
	margin-bottom: 10px;
}
</style>
<form
	id="myform"
	action="http://winofsql.jp/php_get.php"
	target="myframe_datalist"
	accept-charset="utf-8">

	<fieldset>
		<legend>趣味</legend>
			<input
				type="text"
				id="mydata1"
				name="mydata1"
				list="hobby">
		<datalist id="hobby">
		<option value="読書">
		<option value="音楽">
		<option value="運動">
		</datalist>
	</fieldset>

	<fieldset>
		<legend>好きな食べ物</legend>
			<input
				type="text"
				id="mydata2"
				name="mydata2"
				list="food">
		<datalist id="food">
		<option value="寿司">
		<option value="ラーメン">
		<option value="カレーライス">
		</datalist>
	</fieldset>

	<input type="submit" name="send" value="送信">
</form>

<iframe
	name="myframe_datalist"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>

HTML5 : input 要素の type 属性に tel 指定は、スマホで効力を発揮

type 属性の tel 指定は、特別な入力チェックはされませんが、スマホで入力したした場合に、入力パッドが数値のみのものになるので、そのような数値入力をスマホでしてもらう事を想定する場合に有用です。入力チェックそのものは、pattern 属性と併用するといいと思います。

pattern なし
pattern あり (数字とハイフンのみ)

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe_tel"
	accept-charset="utf-8">
pattern なし <input
		type="tel"
		id="mydata1"
		name="mydata1">
	<br>
pattern あり <input
		type="tel"
		id="mydata2"
		name="mydata2"
		pattern="[0-9\-]+"> (数字とハイフンのみ)
	<br>
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe_tel"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>

HTML5 : input 要素に pattern 属性

HTML5 では、入力時にいろいろな入力チェックが可能になっていますが、現実的には pattern 属性を使用するのが一番カスタマイズしやすい便利な入力チェックです。

正規表現の記述方法ですが、世間では ^ と $ で挟んでいるものが多いですが、どうやらそれは必要なさそうです。

参考 : HTML5 Form Validations with Pattern Matching

※ Seeaaa のキャラクセットが shift_jis なので、form に accept-charset 属性を指定しています

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>

※ JavaScript によるメッセージのカスタマイズ方法

HTML5 : input 要素に require 属性

HTML5 では、入力時にいろいろな入力チェックが可能になっています。その代表的な機能が required 属性による未入力チェックです。

※ Seeaaa のキャラクセットが shift_jis なので、form に accept-charset 属性を指定しています

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required>
	<input type="submit" name="send" value="送信">
</form>

※ メッセージのカスタマイズ方法

HTML5 の input 要素の pattern 属性を利用して入力チェック

HTML5 では、type 属性に utl や tel や email や number を指定できますが、正規表現で指定したほうが微妙な調整が可能です。

以下は、数字のみ入力可能なフィールドですが、正規表現で自由に入力内容を制限可能です。但し、数字入力に関して言えば、type="number" を使用時に利用できる min 属性や max 属性があるので、そちらを利用するほうがいいでしょう( Chrome と Firefox では、jQuery UI の spinner と同様なコントロールがフィールドの右側に現れます。

▼ 実際の実行

<form action="http://winofsql.jp/php_get.php"
	target="my_ferame"
	accept-charset="utf-8">
	<input type="text"
		name="userid"
		pattern="[0-9]+"
		value="A">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

Google Chrome



Firefox



IE11


( IE11 はメッセージが変です )


関連する記事

JavaScript : 正規表現を使った、一般的な入力文字列の検査