form,input,labelの違いを改めて - 箱のプログラミング日記。

今までhtmlのformが苦手であまり理解できていませんでしたが、

今日labelも含めてかなり理解度が高まったので残しておきます。

formタグ

ユーザーに何かを入力させたり、情報を送信させたい時に使う。

formタグで囲まれた要素の中に、それぞれの入力欄やボタンを作成していく。

属性

action...送信ボタンを押したあとの推移先URLを指定する
method...httpメソッドを指定する

inputタグ

formタグの中で使う。

短い文字（名前など）の入力欄や選択ボタンの作成ができる。

閉じタグがないので注意。

属性

type...text,file,buttonなど。何の情報を送信させたいかを意味し、これにより見た目が変わる。（textだったら入力欄、fileだったらデータフォルダを起動させるボタン、buttonだったら男性/女性などのチェックができるボタンなど）
name...情報が送信される際にどんな名前をつけて送信したいかを指定できる
submit...送信ボタン。同じボタンでも送信ボタンにはsubmitを使うので注意

例）name ="text"「これはtextですよ」

　　name = "image"「これはimageですよ」

ここが長い間理解できなかったのですが、データベースとのやりとりを行うサーバーサイド言語を学習して初めてしっくりきました。

送信させたいデータは基本的に「ハッシュ」と呼ばれる箱のような形でデータベースに送られますが、name属性はまさしくその「箱の名前」のような役割を果たします。

ハッシュは{text: "入力された文章"}などのように、{箱の名前: 情報の中身}というセットの形で送信・保管されます。ユーザーが入力した情報に名前をつける役割をしているのがname属性です。

textareaタグ

formタグの中で使う。input type="text"が名前など短い文字に向いているのに対し、

何行かにわたる文章の入力を想定したもの。

属性

placeholder...入力欄に初めから入っている薄い文字。案内など
cols...どれくらいの幅の入力欄にするかを指定する。文字数で表現する
row...どれくらいの高さの入力欄にするかを指定する。行数で表現する
name...inputタグに同じ

labelタグ

inputタグやtextareaタグと併用して使う。

同じid名がついているinputタグと紐付けすることができる。

属性

for...ここに該当するinputタグのidと同じ値を指定

例えば、男性/女性を選択できるボタンがあった場合、小さなボタンをポチッと押すのって意外と難しかったりする。

そういう時、ボタンを押すのではなく男性/女性の文字の上でクリックしたら、ボタンが押されたと認識してくれるのはこのlabelタグの働きによるもの。

学習する前は自分が「ボタンを押しているか」「ボタンの隣の文字を押しているか」とかって気にしたことがなかったので、こういう概念があることをまず知らなかった。

つまりlabelを押すとinputタグが押されたことになるので、ユーザーからみて使いやすいページを作ることができる

プログラミング界ではこういうのを「ユーザビリティの向上」とよく表現する。

<form action="#" enctype="multipart/form-data">
 <label for="name"><p>お名前</p></label>
 <input type="text" id="name">
<!-- id=nameのinputタグと紐づいて、「お名前」がクリックされるとinputタグが起動 -->
 <label for="text"><p>本文</p></label>
 <textarea name="text" id="text" cols="30" rows="3" placeholder="ここに入力してください">
 </textarea>
<!-- id=textのtextareaタグと紐づいて、「本文」がクリックされるとtextareaタグが起動 -->
 <input type="submit" value="Send">
</form>