Web Form 構築

ウェブページのフォームを構築

フォームは、HTML でもっとも複雑な構造の 1 つです。
専用のフォーム要素と属性を使用することで、
色々なフォームを構築出来るようになります。

要素には、様々なものがあります。

form、input、textarea、button要素は、
Web Form 初歩で使用しました。
説明は省略させていただきます。

h1、h2、p 要素

 

h1、h2は見出し、
pはテキストの段落を表します。

div、section 要素

    

divはコンテンツを分割し、
コンテナーとして、class や id を使用して、
スタイル付けしやすくします。
sectionは単独のセクション (区間) を表します。

fieldset、legend 要素

    

fieldsetは、
ウェブフォーム内の、
いくつかのコントロールを、
グループ化するために使用します。
legendは、
fieldsetの内容のキャプションを付けます。

label 要素

    

labelは、
ユーザーインターフェイスの項目の
キャプションを表します。
input要素と関連付けて使用する必要があります。

関連付けるには、input要素にid 属性を設定し、
label要素にfor 属性を設定して、
値を input の id と同じにします。

input要素を、
label要素の内側に入れることもできます。
この場合は関連付けが明らかです。
この時は、
for および id 属性は必要ありません。


label の中に,
アンカーやボタンのような、
対話型要素を配置しないようにします。

ヘッダー要素の配置も避けるようにします。

ul、ol、li 要素

    

ulは、
項目の順序なしリストを表します。
olは、
項目の順序付きリストを表します。
li は、
リストの項目を表しています。

abbr 要素

    

abbrは、
略語や頭字語を表します。
title 属性で、
略語の完全形または説明を提供できます。

aria-label 属性

aria-label 属性は、
テキストラベルが画面に表示されない場合、
ラベルを定義するために使用されます。

以上です。