使いどころが分かりにくいhtml要素の使いどころを考えてみる form編

使いどころが分かりにくいhtml要素の使いどころを考えてみる form編

このシリーズも残すところあと一つ。もうちょっと細切れに記事にしたら良かったと、今さらながらに後悔しております 笑
最後はform要素を掘り下げていきます。

前回分は前の記事でご確認下さい。

form要素であまり出番のない?要素

input要素は、使いどころというより項目分けするタグがほとんどなので、気になる方は下記ボタンよりご確認ください。

MDN input要素

フォーム部品のグループ化に関連する要素

入力項目をグループ化するfieldset要素
フォームを作っていると重複するような項目(申込者とお届け先の名前や住所など)が出てくるときがあるかと思います。
この時fieldsetを使って項目を明示し、グループ分けすることが可能です。

fieldset内にlegendタグを置くことで、そのグループにタイトルを付けることができます。


		<fieldset>
		<legend>タイトル</legend>
		フォームの内容
		</fieldset>
		

ECサイトのフォーム構築なんかで出番がありそうですね。まあ使わなくても構築はできちゃうんですが、、、

セレクト要素をグループ化するoptgroup要素
optgroup要素は選択項目になる要素をグループ化して、タイトルを付けることができます。
以下のような感じ。


		<fieldset>
		<legend>タイトル</legend>
		フォームの内容
		</fieldset>
		<select name="course">
			<option selected>▼項目を選択してください</option>
			<optgroup label="問い合わせ項目" disabled>
			<option value="stay01">サービスについて</option>
			<option value="stay02">求人について</option>
			<option value="stay03">その他お問い合わせ</option>
			</optgroup>
		</select>
		

こんな感じでタイトルを付与したセレクトグループを作ることが出来ます。
label部分にあるdisabledは、指定した要素を操作不能(クリックできないようにする)にできます。
fieldsetでも使用可能。

キーの発行や計算結果を表示する要素

キー発行は暗号化する際に使用するkeygenという要素があるのですが、すでに非推奨となっておりますので、ここでは割愛します。

そして計算結果を表示するoutput要素は、javascriptと関連付けて使用するタグで、表示というよりは保持する。といった方が正しいかもしれません。
入力された内容を元に結果を返したい場合、計算する要素・答えを表示する要素の二つが必要になりますよね。
この二つを紐づけるために使用するタグになります。

タスク完了の進行状況を表す要素

form要素の関連タグにprogressとmeterというタグがあります。どちらも値を示すタグになるのですが、用途が違うのでそこだけ表記しておきます。

progress
こちらは『現在ダウンロード中です」みたいなタスク進捗を表す要素で、属性を指定してその進捗具合を明示します。
いわゆるプログレスバーというやつですね。
meter
かたやmeter要素は、数字が決まっているもの(ディスクの使用量や上限下限が決まっているもの)に対して使用します。
進行しない進捗バーが表示されるようなものです。

さまざまな使い道に溢れますhtml5

ざっくり説明しましたが、html5になってから使い道など考えていくとキリがないくらい多様な形が表現できるようになりましたね。
自分もまだまだなので、これを基準に色々なフォーム作りに挑戦していきたいものです。

htmlカテゴリの最新記事