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>
|
【HTMLの最新記事】
- HTML5 : input 要素の type 属性に tel 指定は、スマホで効力を発揮
- HTML5 : input 要素に pattern 属性
- HTML5 : input 要素に required 属性
- HTML5 の input 要素の pattern 属性を利用して入力チェック
- PHP にデータを渡す為の HTML としての FORM
- HTML5 の input 要素の type="file" で multiple を使う場合の記述方法と、type="submit" ボタンの FORM 属性の上書き。
- HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )
- input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性
- HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )