HTMLのformタグ内で使用するinput, textarea, button, select, option, labelタグの使い分け

2024-06-212024-06-22

HTMLのformタグ内で使用するinput, textarea, button, select, option, labelタグの使い分けについて学習します。
すべて画面上でユーザーが入力したり、選択したりできる部分を作成するためのタグです。
見比べてそれぞれの使い方の違いを感じ取ってください。

formタグ

役割＆特徴

ユーザーからの文字入力などを受け付けて、PHPなどのプログラムを経由して、サーバーへデータを送信する範囲を囲みます。
actionとmethodという属性を設定できます。
actionにはデータを送信するURLを指定します。
methodにはGETとPOSTを指定できますが、GETでは入力内容が丸見えになってしまうため、ほぼPOST一択です。

使用例

<form action="/submit" method="POST">
  <!-- フォーム要素 -->
</form>

inputタグ

役割＆特徴

ユーザーが文字を入力できる1行の入力欄を作成します。
ですがtypeを指定することで様々な入力欄に変形します。
種類がとても多いですが、とても重要なタグなので焦らず確実に学習しましょう。

まずinputタグは以下の5つの属性を設定できます。

type
name
value
placeholder
required

typeの中でもよく使う属性が以下の6つです。

text
email
tel
search
checkbox
radio

どのような動作になるのかは以下の使用例で個々に見ていきます。

使用例

<input type="text">
<input type="text" name="moji">
<input type="text" value="入力済み">
<input type="text" placeholder="うっすら見えるだけ">
<input type="text" required>

文字の入力欄を作成できます。
1行しか入力できず、改行ができません。

nameを設定することでPHPなどのプログラムに連携する時に識別することができるようになります。
valueはユーザーが入力しなくても、最初から好きな文字を入力させておくことができます。
placeholderは文字をうっすらと表示させておくことができます。
requiredは入力を必須にするので、未入力だとエラーが発生するようになります。

<input type="email">

メールアドレスの入力欄を作成できます。
1行しか入力できず、改行ができません。

メールアドレス形式（xxxx@xx.xxのような形）で入力しないとエラーが発生します。
ブラウザがメールアドレスを覚えていれば、入力を補助してくれます。

<input type="tel">

電話番号の入力欄を作成できます。
1行しか入力できず、改行ができません。

ブラウザが電話番号を覚えていれば、入力を補助してくれます。

<input type="search">

検索用の入力欄を作成できます。
1行しか入力できず、改行ができません。

対応しているブラウザーでは、入力欄内を削除するための削除ボタンが表示されます。

<input type="checkbox" checked>松
<input type="checkbox">竹
<input type="checkbox">梅

松竹梅

チェックボックスを作ることができます。
チェックボックスなので複数選択ができます。
checkedを記述すると最初からチェック済みにすることができます。

<input type="radio" name="grade" checked>松
<input type="radio" name="grade">竹
<input type="radio" name="grade">梅

<input type="radio" name="price">10,000円
<input type="radio" name="price">1,000円
<input type="radio" name="price">100円

松竹梅
10,000円 1,000円 100円

ラジオボタンを作ることができます。
ラジオボタンなのでグループの中で1つだけ選択することができます。

同一のnameを設定されたラジオボタンがグループになります。
checkedを記述すると最初からチェック済みにすることができます。

textareaタグ

役割＆特徴

inputのtextでは1行しか入力できませんが、textareaでは複数行を入力することができます。
お問い合わせ内容などを入力していただくために作成するのが良いでしょう。

ユーザー心理として問い合わせ内容の入力欄が大きいほど、入力される確率や文章量が多くなると言われています。

使用例

<textarea>予め入力することもできる</textarea>

buttonタグ

役割＆特徴

画面上でクリックできるボタンを作成することができます。
HTMLだけで完結せずに、javascriptやPHPと連携する前提で作成します。

まずbuttonタグは以下の3つの属性を設定できます。

type
name
value

typeは主に2種類を使用します。

まずはbuttonで、あらかじめ設定された機能はなく、そのままではクリックしても何も起きません。

次はsubmitで、form内にあるsubmitボタンはクリックすると、form内の入力欄の値（nameとvalue）を指定されたURLへ送信します。
問い合わせフォームの送信ボタンによく使用されます。

最後にresetですが、使用をおすすめできません。
以前はよく問い合わせフォームの送信ボタンの隣にリセットボタンが並んでいました。
このボタンは名前の通り、クリックすると入力した値がすべて消えてしまいます。
コツコツと入力してきたものが一瞬で消えてしまうのでUXを損なうという声が大きくなり、古いシステムに化石のように残っているような状況です。

nameはそのまま名前です。
javascriptなどでボタンがクリックされた時～というプログラムを書きますが、どのボタンがクリックされた時なのかを、このnameで判断しています。

valueはボタンにこっそり値を持たせることができます。
あまり使用されることはありません。

使用例

<button type="button" name="no-move" value="泥団子">無機能</button>
<button type="submit">送信ボタン</button>
<button type="reset">押しちゃダメ！</button>

selectタグ

役割＆特徴

画面上でドロップダウンリストを作成します。
UXの観点から、選択肢が5個以下であればラジオボタンやチェックボックスが望ましく、6個以上であればドロップダウンリストにすることが望ましいと言われています。
設定できる属性は2つでnameとmultipleです。

nameはそのまま名前です。
javascriptなどでドロップダウンリストの選択された項目を参照するプログラムを書きますが、どのドロップダウンリストの項目が選択されたのかを、このnameで判断しています。

multipleは記述すると複数選択ができるようになります。
selectタグは元々は1つの項目しか選択することができませんが、multipleを記述することで複数選択ができるようになります。
ただドロップダウンリストで複数選択できる実例を、あまり見たことはありません。

ドロップダウンリストの各項目はoptionタグで作成します。
ulタグ内のliタグのようなイメージです。
valueを設定することで、選択された項目のvalue値をjavascroptなどに連携することができます。
selectedを記述することで、最初から選択された項目にすることができます。

使用例

<select name="country">
  <option value="jp">日本</option>
  <option value="us" selected>アメリカ</option>
  <option value="uk">イギリス</option>
</select>

labelタグ

役割＆特徴

UXを考える上で非常に重要なタグです。

inputのtextなどはクリックできる範囲がある程度あるので良いのですが、ラジオボタンやチェックボックスはクリックできる範囲が、そのボタンの大きさしかありません。
つまりクリックしづらいのです。
ですがlabelタグを使用するとクリックできる範囲を拡大することができます。

またラジオボタンやチェックボックスは隣に文字が並ぶものです。
松とか竹とかです。
それらをボタンとまとめてグループ化できるので、labelタグは重宝します。

ちなみにlabelタグにfor、ラジオボタンやチェックボックスにidを記述することで、labelをクリックすると離れた場所のラジオボタンやチェックボックスを選択することができます。
できますが、HTMLの記述が増えることと、簡単にグループ化したいことから、私はlabelタグで囲んでしまいます。

使用例

<label>
<input type="radio" name="grade" checked>松
</label>
<label>
<input type="radio" name="grade">竹
</label>
<label>
<input type="radio" name="grade">梅
</label>
<label>
<input type="radio" name="price">10,000円
</label>
<label>
<input type="radio" name="price">1,000円
</label>
<label>
<input type="radio" name="price">100円
</label>