HTML5 フォーム要素
HTMLマニュアルHTML5では、フォームを作成および操作するためにいくつかの新しい要素が導入されました。
datalist要素
<input>要素と組み合わせて、ユーザーが入力できる候補のリストを提供します。これは、オートコンプリート機能に役立ちます。
<input type="text" name="city" list="cityList">
<datalist id="cityList">
<option value="東京">
<option value="大阪">
<option value="福岡">
</datalist>output要素
計算結果やフォームから取得したデータを表示するために使用されます。
<form onsubmit="return false" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b"></output>
</form>progress要素
タスクの進行状況を示すために使用されます。
<progress value="50" max="100"></progress>meter要素
スケール内での測定値を表示するために使用されます。これは、ディスク使用量やクイズのスコアなどを表現するのに便利です。ただし、最大値と最小値が必須項目です。
<meter value="70" min="0" max="100" low="30" high="70" optimum="50"></meter>
<meter value="0.6">60%</meter>fieldset要素
関連するフォームコントロールをグループ化するために使用されます。
<fieldset>
<legend>お問い合わせ内容</legend>
<input type="radio" id="option1" name="contactType" value="option1">
<label for="option1">お問い合わせ1</label>
<input type="radio" id="option2" name="contactType" value="option2">
<label for="option2">お問い合わせ2</label>
</fieldset>details要素とsummary要素
details要素は折りたたみ式のコンテンツを作成するために使用されます。summary要素は、折りたたみ部分のタイトルを表示します。
<details>
<summary>利用規約</summary>
<p>ここに利用規約の詳細が表示されます。</p>
</details>利用規約
ここに利用規約の詳細が表示されます。
この三角をクリックしてみてください。
コメント