使いどころが分かりにくい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要素の使いどころを考えてみる 後編... さて、重い腰を上げてhtml要素の使いどころ 後編いってみたいと思います。 前回分は前の記事でご確認下さい。 使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編 まずは大枠の仕分け コンテンツの埋め込み フォーム ユーザー操作 テーブル要素に...
使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編...   皆さん、コーディングしている時に使わないhtml要素ってありませんか? 僕はhtmlリファレンスを見るとコレ、全然使ってないなあ。なんて要素がかなりあります。 (上手に使ってる方はもちろんいらっしゃるのでしょうが、、、) なので今日は自戒の意味も込めて、htmlの使って...
webサイトを作る時の要素の使い方 4巻 head内の記述... 前回はmeta要素の書き方について記事を投稿しました。 前回の記事リンク webサイトを作る時の要素の使い方 4巻 meta要素 今回は少し幅を拡げて、head内の記述について掘り下げていこうと思います。 掘り下げたらびっくり。数が結構あるんですね、、、 ...
webサイトを作る時の要素の使い方 3巻 meta要素... htmlってそんなに掘り下げなくてもホームページ作成って意外と出来ちゃいますよね。 でも、文書を正確に機械に読み取ってもらう為にも、なるべく知識は正しく持っといた方が制作の際に迷わないし、正確な仕事が出来ると思うのです。 という訳で今日は人には見えない部分の一つ、「meta要素...

htmlカテゴリの最新記事