箱のプログラミング日記。

渋谷の自社開発企業でRails書いてます。

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>

 

ちなみに、inputタグでファイル投稿フォームを作る(type="file"を指定する)場合は「ファイルも送りますよ〜」という意味でformタグの中に以下の属性を指定する必要があります。

enctype="multipart/form-data"

 

まとめ

  • formタグを使うときは別途それぞれの入力欄やボタンをinputタグやtextareaタグで作らなきゃいけない。formタグで全体を囲むイメージ
  • inputタグは文字入力欄、ファイル選択フォーム、ボタンなどを作ることができる
  • inputタグの見た目(用途)はtype属性で指定する
  • labelタグを使うとユーザビリティの向上に繋がる。紐付けたい要素のid名と同じものをfor属性で指定する

記事を書いての感想

書いてて改めて「同じinputで色んな形が作れちゃったり、はたまた送信ボタンはsubmitじゃなきゃいけなかったり分かりづらいな〜」と思いました。

実際にデータベースとのやりとりを行うに当たっては、HTMLで書かれたフォームは基本的に利用することは無いと思うので、あまり深掘りはせず基礎的な知識でとどめておくのでも有りかも。