（できるだけ）正しい HTML を書くために ～基礎編その 4 ～

この記事は「（できるだけ）正しい HTML を書くために ～基礎編その 3 ～」の続きです。
前の記事を読んでない方は先にそちらをお読みください。

フォーム

・form 要素
フォーム関連要素を含む文書の区間を表す要素です。

仕様
・action 属性でフォーム送信先 URI を指定し、method 属性でフォーム送信に使用する HTTP メソッドを指定します。
・form 要素をネストすることは出来ません。

・label 要素
ユーザーインターフェイスの項目名や説明を表す要素です。
もう少し分かりやすく言い換えると、項目名 - 入力フィールドのグループがある場合、「項目名」をマークアップするのに使用する要素です。

仕様
・for 属性で指定した値と、その値を id 属性に持つフォームコントロールを関連付けすることが可能です。
・label 要素をネストすることは出来ません。

・input 要素
データを編集できるフォームコントロールと型指定されたデータファイールドを表す要素です。
いわゆる文字とか数字とか入力することができる入力欄です。

仕様
・空要素型のため閉じタグは必要ありません。
・type 属性で入力するデータの種類を指定することが出来ます。指定しない場合は type="text" として扱われます。
・name 属性でフォームコントロールの名前を指定します。

この input 要素、指定できる属性がたくさんあるのですが私的によく使うなぁと思うものだけピックアップして紹介します。
ここで紹介するのは本当にごく一部なので、全部確認したい人は MDN のサイトで確認してくださいね。

type 属性
以下の値を指定することで、入力される値を制御します。
・hidden
　入力欄を非表示にします。ユーザが操作する必要は無いけど送信したい値がある場合などに指定します。

・text
　改行なしのテキストを入力させたい場合に指定します。

・email
　メールアドレスを入力させたい場合に指定します。

・password
　パスワードを入力させたい場合に指定します。また、入力された文字は「●」に見た目が置き換えられます。

・number
　数値を入力させたい場合に指定します。

・checkbox
　チェックボックスで選択させたい場合に指定します。

・radio
　ラジオボタンで選択させたい場合に指定します。

・file
　ファイルをアップロードさせたい場合に指定します。

・submit
　フォームを送信するためのボタンを設置したい場合に指定します。button 要素でも可能です。

autofocus 属性
指定することでページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスさせます。

checked 属性
チェックボックスやラジオボタンで選択済みの状態を表すことができます。

disabled 属性
フォームコントロールを無効にしたい場合（ユーザが操作出来ない状態にしたい場合）に指定します。

placeholder 属性
フォームコントロール内が空のときに表示される値を指定できます。

・button 要素
ボタンを表す要素です。

仕様
・type 属性で
　submit（フォームを送信する）
　reset（フォームをリセット）
　button（何もしない）
のうち 1 つを指定することが出来ます。

・select 要素
オプションの中から値を選択するためのコントロールを表す要素です。
いわゆるセレクトボックスと呼ばれるやつです。

仕様
・option 要素と optgroup 要素のみネストすることが可能です。

・optgroup 要素
option 要素のグループを表す要素です。
共通性のある option 要素をまとめるのに使用します。

仕様
・select 要素の子要素として仕様可能です。
・必ず label 属性にグループ名を表す値を指定する必要があります。

・option 要素
select 要素の項目を定義する要素です。

仕様
・select 要素または、optgroup 要素の子として使用可能です。
・value 属性で option 要素の待つ値を指定することが出来ます。

・textarea 要素
複数行のテキスト入力欄を表す要素です。

仕様
・rows 属性で入力欄の表示する行数を指定することが出来ます。

記事 4 つも続いてしまった基礎編終了です！
HTML の基本的な概念から、よく使われそうな要素の紹介まで終わりました。

これでもう、HTML を書くことが出来るようになったはずです！

……って言われても実際にどう書いていけば良いのかイメージつかないと思います。
ずっと概念や仕様の説明ばっかでしたしね。

というわけで次回の記事では「実践編」としてサイトのデザインから HTML に落とし込むときの私なりのやり方を書こうと思います。

今まで続いてきた「（できるだけ）正しい HTML を書くために」は実践編で最後です。
頑張ってあんまり間が空かないうちに書けるといいなぁ。

間違ってること書いてたら Twitter かコメント下さい。