HTML入門 | HTML5の開始 | HTML5のその他の要素

HTML5で追加されたさまざまなinput関連要素

HTML5で新しく追加されたさまざまなinput関連要素は次のとおりである。

datalist要素

datalist要素は、input要素に事前定義されたオプション一覧を提供する要素である。
ユーザーはテキストを直接入力してもよく、ドロップダウンメニューから事前定義されたオプションの1つを選択してもよい。

記述する際は、input要素のlist属性値とdatalist要素のid属性値を同じにすると関連付けられる。

好きな果物は？
<input list="fruits" name="fruit">
<datalist id="fruits">
   <option value="apple">
   <option value="strawberry">
   <option value="banana">
   <option value="grape">
</datalist>

コード実行

datalist要素はInternet Explorer 10より前のバージョンではサポートされていない。

keygen要素

keygen要素は、ユーザーが入力したデータから公開鍵暗号方式のキーを生成してフォームを送信する。 フォーム送信時に秘密鍵と公開鍵が同時に生成され、秘密鍵はクライアント側に、公開鍵はサーバー側に送信される。

これは主にユーザー認証時に使用できる。

<form>
  下の値を入力して送信ボタンを押すと、暗号化して送信される。
  <input type="text" name="username">
  <keygen name="security">
  <input type="submit" value="送信"> 
</form>

keygen要素はInternet Explorerではサポートされていない。

output要素

output要素は、スクリプト(script)によって実行された計算結果をすぐに表示する。

<form oninput="total.value=parseInt(val1.value) + parseInt(val2.value)">
  0<input type="range" id="val2" value="50" min="0" max="100">100
  + <input type="number" id="val1" value="20">
  = <output name="total" for="val1 val2"></output>
</form>

コード実行

for属性には、その結果に関連する要素のidを空白区切りで列挙する。

output要素はInternet Explorerではサポートされていない。