idとnameの違い
お問合わせページなどに使われる<form>タグでは、チェックボックスだったりセレクトボタンだったりと様々な形式があります。
それらの中でidというものを設定する機会がたくさんあります。nameとよく似たものだと思われますが中身は全く異なり、nameはphpなどのプログラミングで値の受け渡しをするのにvalueなどと一緒に使います。
ではidは一体何に使うかと言いますと、後でご紹介します<label>タグでよく使用します。
- nameはphpなどのプログラミングで値の受け渡しに使用
- idはフォームを使用する際ユーザーにとって便利にするために使用
<label>タグとは
<label>タグとは、フォーム内を便利にしてくれるタグになります。とは言っても文字の説明では難しいと思いますので例を示します。これが<label>タグを使った<input type=radio>です。
そしてこれが<label>タグを使っていないラジオボタンになります。↓
違いは分かりましたか？上の方が選びやすくなかったですか？
これは、「はい」とか「いいえ」という選択肢をラジオボタンと一緒にまとめたかどうかの違いになります。実際のコードはこちらです。
<form>
<label><input type="radio" name="first" value="yes" checked />はい<br/></label>
<label><input type="radio" name="first" value="no" />いいえ<br/></label>
</form>このように、<label>で囲った部分はそれらをまるっと含めて１つという扱いにする、紐づけるためのタグになります。
この<label>タグは、別にラジオボタンだけに使えるわけではありません。テキストエリアなどに対してももちろん使えます。
少し複雑になりますが、この「お問合わせの種類」の部分に<label>タグをつけ、for属性でidと同じ名前を付けており、その名前を各フォーム内のid属性に指定する感じです。
そうすると「お問合わせの種類」という文字をクリックするとご予約の部分がフォーカスされるようになっていると思います。
鋭い方はもうお気づきかも知れませんが、このforだとかidだとか正直必要ありません。むしろコードを複雑にしてくれるので難易度が上がる気がしています。だってこれ…
<form>
<p>
<label>お問合わせの種類<br />
<select name="kind" id="kind">
<option value="1">ご予約</option>
<option value="2">イベントへの問合わせ</option>
<option value="3">その他</option>
</select>
</label>
</p>
</form>こんな風にfor属性なんて指定しなくても普通に<label>で全体を括ってあげるだけで同じ効果が得られるんです。なのであまり使わない気がしています。必要ない場合は書かなくて全然問題ありません。
<button>タグとは
<button>タグとは、その名の通りボタンを作るタグとなります。
<input type=”button”>と<button>の違い
<input>タグにもbuttonタイプが存在していますが、この<button>タグにはCSSで装飾をすることも可能になります。では実際にどのようなボタンが出来るのか見てみましょう。
上が<button>タグで作ったボタン、下が<input type=”button”>で作ったボタンになります。見た目上何ら変わりはありません。
<button>タグの使い方
<button>タグは、ボタンに表示させたい文字を<button>タグで囲って使います。
<button type="submit" name="名前" form="form名" disabled="disabled" value="3">ボタンだよ</button><button>タグのtype属性
type属性についてですが、全部で３つあります。
| submit | 送信ボタン |
| reset | リセットボタン |
| button | 自由に指定可能 |
submitはフォームに入力されている内容をphpなどのページに送信するためのボタンです。
resetはフォームに入力された内容をリセットするためのボタンを作成します。
buttonは、プログラムなどを組んで自由に設計できるボタンになります。
name属性・value属性
name属性は<button>に名前を付けます。value属性はボタン自体に値を設定します。
name属性とvalue属性はほぼ同時に使用します。指定した名前とvalue属性で設定した値でデータのやり取りをするイメージです。
disabled属性
disabled属性はbuttonタグを無効状態にします。
これをどのようなタイミングで使うかというと、例えばチェック付けるべきところを全部付けたらボタンが押せるようにする、などをする際に使用します。
form属性
form属性はその<button>タグがどのform要素に属しているのか指定できます。テキストボックスやチェックボックスなどをたくさん並べているフォームの中のひとつとして扱うことが可能だということです。もしもform属性を指定しなかったら、直近の親要素にあたるform要素が設定されます。
<textarea>タグとは
<textarea>タグとは複数行のテキストが入力でき、途中で改行をすることが出来るフォームの部品です。
<textarea>タグの使い方
<textarea>タグには閉じタグが存在しますが、開始タグと終了タグの間に何かを書く必要はありません。それよりも、データを送信する際に使用するname属性を付けることを忘れないようにしましょう。
<form><textarea name="テキストエリアの名前を半角英字で"></textarea></form>行数の設定
また、rows属性で目視できる行数を調整できます。指定されていない場合はデフォ値が2になっています。今回は５行に設定しました。
<form><textarea name="namae" rows="5"></textarea></form>最大文字数・最小文字数の設定
最大文字数（maxlength属性）や最小文字数（minlength属性）も指定することが可能です。
<form><textarea name="namae" maxlength="5"></textarea></form>最大文字数は指定しなければどれだけでも打つことが可能です。最小文字数はこれだけは打たなければいけないよという文字数になります。
入力必須にする
テキストボックスの入力を必須にしたいときはrequired属性を付与します。
<form><textarea name="namae" maxlength="5" required></textarea></form>