【初心者向け】Webサイトにおけるフォーム部品タグの使い方と種類【HTML】

form_アイキャッチ
2020年06月28日
こばゆた
こばゆた

フォームは今やWebサイトには欠かせないものとなっています

チャッピー
チャッピー

個人情報やお問い合わせ、会員情報などを入力するやつだね

こばゆた
こばゆた

フォームと言っても一つのタグで構成されているわけでなく様々な部品が組み合わさって構成されてるんだ

フォームの作例
きなこ
きなこ

組み合わせ次第で色んなフォームが作れそう

こばゆた
こばゆた

今回はそのフォーム部品について解説していきます

最後に今回はとても長くなる予定なので細かい説明がいらないという方はまとめまで飛ばしてください。(笑)

スポンサーリンク

1.フォームを作るタグ

まずフォームを作るにはformタグで囲う必要があります。

こばゆた
こばゆた

「これはフォームですよ」と伝えるもので、この中にフォーム部品のコードを書いていきます。

<form>

<form>

1-1.inputタグ

用語

type属性

値を入力する事によって様々なフォーム部品を作る事ができる

inputタグはtype属性を書き、値を指定することで様々なフォーム部品を作る事ができます。また、閉じタグは必要ありません。

一番スタンダードなものは属性値を”text”にしたテキスト入力フォームです。

<p>お名前</p>
<input type="text">

お名前

チャッピー
チャッピー

よく見るやつだね

こばゆた
こばゆた

またinputタグ内にvalue属性を書き。値をつける事で最初から入力されている文字を指定できます。

<p>お名前</p>
<input type="text" value="Yamada Taro">

お名前

1-2.textareaタグ

textareaタグは複数行入力テキストでこちらは閉じタグが必要です。

またこちらはtextareaタグで文字を挟む事によって初期に表示できる文字を設定できます。

<p>ご意見</p>
<textarea>お問い合わせ内容はこちら</textarea>

ご意見

チャッピー
チャッピー

入力例があるのはわかったけど、入力の際にわざわざ内容を消して書き直すのは面倒だよ

こばゆた
こばゆた

そんな時のためにplaceholder属性というものが用意されてるよ

placeholder属性

placeholder属性はあらかじめ値で設定したテキストを薄く表示させ、入力されると消すことができるといったものになります。

こばゆた
こばゆた

文章だと意味がわかりにくいので以下の例を見てください

<p>お名前</p>
<input type="text"  placeholder="お名前">

お名前

記入例のようなものが薄く表示され、何らかの文字が入力されると消えます。そして再び内容が消されると現れます。

特別な理由がなければplaceholder属性を使うようにすると親切な気持ちが伝わります。

チャッピー
チャッピー

おー！いちいち消さなくて良くなった！

こばゆた
こばゆた

もちろんtextareaタグにも使えます

<p>ご意見</p><textarea placeholder="お問い合わせ内容はこちら"></textarea>

ご意見

こばゆた
こばゆた

きちんと機能しています

もう一つ使い勝手のよいフォームにするためのタグがあります。

labelタグ

labelタグとはフォーム部品と関連付ける事によって選択肢を選びやすくすることができます。

キュ○べぇ
キュ○べぇ

わけがわからないよ

こばゆた
こばゆた

確かにわかりづらいね💦

じゃあ「お名前」とあるところをクリックしてごらん


きなこ
きなこ

ボックスの中にカーソルが移った！

チャッピー
チャッピー

さっきのだれ？

こばゆた
こばゆた

これがlabelタグと選択肢を関連付けるという事だよ

では作り方を見ていこう

作り方1.idとforを使う
  • STEP1
    ラベルにしたいテキスト(ここではお名前)をlabelタグで挟む

    <label><p>お名前</p></label>
<input type="text">

  • STEP2
    labelタグの中にfor属性を指定し、値をつける

    <label for="name"><p>お名前</p></label>
<input type="text">

    値は好きな名前で良いですがわかりやすいものにしましょう。重複させたり、数字や記号から始まるものは使えません。(ここでは”name”という値を付けました)

  • STEP3
    inputタグの方にはid属性を指定し、値はlabelタグのfor属性で付けた値と同じものをつける

    <label for="name"><p>お名前</p></label>
<input type="text" id="name">


「お名前」をクリックすると入力欄にカーソルが移るようになりました。

こばゆた
こばゆた

併せてplaceholder属性も書いておくと良いですね

作り方2.フォーム部品全体を<label>タグで挟む

2-1.普通に作ってlabelタグで挟む

これはそのままです(笑)。作って挟むだけです。

<label>
  <p>お名前</p>
  <input type="text">
</label>

こばゆた
こばゆた

どちらでもOK！

またこれから紹介していく部品もlabelタグで囲うのがベターです

1-3.セレクトボックス

セレクトボックスは複数の選択肢あるもの(年齢や出身地など)の任意の選択肢を選んで欲しい場合につかうものです。

セレクトボックスの作り方

セレクトボックスの作り方
  • STEP1
    selectタグで大枠を作る

    <p>年齢を選択して下さい</p>
<select>

</select>

  • STEP2
    選択肢を作る

    <p>年齢を選択して下さい</p>
<select>
  ２０歳未満
  ２０代
  ３０代
  ４０代
  ５０代
  ６０代以上
</select>

    selectタグ内に任意の選択肢を入れます。

  • STEP3
    optionタグで選択肢を囲む

    <p>年齢を選択して下さい</p>
<select>
  <option>２０歳未満</option>
  <option>２０代</option>
  <option>３０代</option>
  <option>４０代</option>
  <option>５０代</option>
  <option>６０代以上</option>
</select>

  • STEP4
    optionタグ内にvalue属性と値を記入する

    <p>年齢を選択して下さい</p>
<select>
　　<option value="２０歳未満">２０歳未満</option>
　　<option value="２０代">２０代</option>
　　<option value="３０代">３０代</option>
　　<option value="４０代">４０代</option>
　　<option value="５０代">５０代</option>
　　<option value="６０代以上">６０代以上</option>
</select>

    value属性の値には選択肢の値を入れておきます

  • STEP5
    labelタグで囲って完成

    <label><p>年齢を選択して下さい</p>
  <select>
    <option value="２０歳未満">２０歳未満</option>
    <option value="２０代">２０代</option>
    <option value="３０代">３０代</option>
    <option value="４０代">４０代</option>
    <option value="５０代">５０代</option>
    <option value="６０代以上">６０代以上</option>
  </select>
</label>

セレクトボックスのいろいろ

“size属性”

selectタグ内にsize属性を書き、最初に表示したい選択肢の値を数字で書くと最初に表示できるリスト数を指定できます。

<label><p>年齢を選択して下さい</p>
  <select size="2">
    <option value="２０歳未満">２０歳未満</option>
    <option value="２０代">２０代</option>
    <option value="３０代">３０代</option>
    <option value="４０代">４０代</option>
    <option value="５０代">５０代</option>
    <option value="６０代以上">６０代以上</option>
  </select>
</label>

指定した選択肢の数(ここでは2つ)が最初から選択されています。(スマホだとできてないです)

こばゆた
こばゆた

他の選択肢はスクロールをすることで見られます

“multiple属性”

selectタグ内にmultiple属性を入れると複数選択ができるようになります。(Macなら⌘キーを押しながら、Windowsの場合はshiftキーを押しながら)

<label><p>年齢を選択して下さい</p>
  <select multiple>
    <option value="２０歳未満">２０歳未満</option>
    <option value="２０代">２０代</option>
    <option value="３０代">３０代</option>
    <option value="４０代">４０代</option>
    <option value="５０代">５０代</option>
    <option value="６０代以上">６０代以上</option>
  </select>
</label>

こばゆた
こばゆた

Macなら⌘キーを押しながら、Windowsの場合はshiftキーを押しながらで複数選択できます。

“selected”

<option selected>とすると最初から選択された状態になります。最初から選んで欲しい選択肢がある場合時などに使用します。

<label><p>年齢を選択して下さい</p>
  <select>
    <option value="２０歳未満">２０歳未満</option>
    <option value="２０代">２０代</option>
    <option value="３０代">３０代</option>
    <option value="４０代" selected>４０代</option>
    <option value="５０代">５０代</option>
    <option value="６０代以上">６０代以上</option>
  </select>
</label>

こばゆた
こばゆた

40代にselectedが付いているので初期値は40代になっていると思います

1-4.ラジオボックス

ラジオボックスは血液型や性別など複数ある選択肢から１つの選択肢を選んで欲しい場合に使います。

性別を選んで下さい


ラジオボックスの作り方

ラジオボックスの作り方
  • STEP1
    選択肢を作る

    <p>性別を選んでください</p>
男性
女性
その他

  • STEP2
    inputタグをつけてtype属性をradioにする

    <p>性別を選んでください</p>
<input type="radio" value="男性">男性
<input type="radio" value="女性">女性
<input type="radio" value="その他">その他

    value属性もついでに書いておきます

    性別を選んで下さい



    きなこ
    きなこ
    あれ？一つしか選べないのにみんな選べるよ！
    こばゆた
    こばゆた
    そういう場合は次のステップを

  • STEP3
    name属性をつけてグループ化する

    <p>性別を選んでください</p>
<input type="radio" value="男性" name="gender">男性
<input type="radio" value="女性" name="gender">女性
<input type="radio" value="その他" name="gender">その他

    性別を選んで下さい

    男性
    女性
    その他

    きなこ
    きなこ
    ちゃんと一つだけ選べた！

  • STEP4
    labelタグで選択肢を囲って完成

    <p>性別を選んでください</p>
<label><input type="radio" value="男性" name="gender">男性</label>
<label><input type="radio" value="女性" name="gender">女性</label>
<label><input type="radio" value="その他" name="gender">その他</label>

    性別を選んで下さい



    これで先頭の丸にカーソルを合わせなくても選択肢をクリックするだけで選択が可能になりました。

1-5.チェックボックス

ラジオボックスと似ていますが複数ある選択肢から複数の選択肢を選べるところが異なります。

お好きなジャンルを選んでください(複数回答可)

　


チェックボックスの作り方

1.inputのtype属性をcheckboxにする。value属性、name属性もそれぞれ書いておく。

<p>お好きなジャンルを選んでください(複数回答可)</p>
<label><input type="checkbox" name="category" value="グルメ">グルメ</label>　
<label><input type="checkbox" name="category" value="エンタメ">エンタメ</label>
<label><input type="checkbox" name="category" value="スポーツ">スポーツ</label>
<label><input type="checkbox" name="category" value="ファッション">ファッション</label>

お好きなジャンルを選んでください(複数回答可)

　


複数の選択肢を選ぶことはセレクトボックスでもできますがレイアウトの問題やスペースの節約とかを考えて使い分けるのがベターです。

ラジオボタンとチェックボックスはinputにchecked属性をつけると最初から選択された状態になます。

<p>お好きなジャンルを選んでください(複数回答可)</p>
<label><input type="checkbox" name="category" value="グルメ">グルメ</label>　
<label><input type="checkbox" name="category" value="エンタメ" checked>エンタメ</label>
<label><input type="checkbox" name="category" value="スポーツ" checked>スポーツ</label>
<label><input type="checkbox" name="category" value="ファッション">ファッション</label>

お好きなジャンルを選んでください(複数回答可)

　


ラジオボタンとチェックボックスはfieldsetタグで囲い、タイトルをlegendタグで囲う事によってグループ化する事ができます。

<fieldset>
<legend>お好きなジャンルを選んでください(複数回答可)</legend>
  <label><input type="checkbox" name="category" value="グルメ">グルメ</label>　
  <label><input type="checkbox" name="category" value="エンタメ" checked>エンタメ</label>
  <label><input type="checkbox" name="category" value="スポーツ" checked>スポーツ</label>
  <label><input type="checkbox" name="category" value="ファッション">ファッション</label>
</fieldset>
お好きなジャンルを選んでください(複数回答可)

　



1-6.ボタンについて

inputのtype属性の値を”submit”にして作成します。

<input type="submit">

value属性の値を変える事でボタンの文言を変える事もできます。

<input type="submit" value="送っちゃう？">

inputのtype属性の値を”button”にしても作成できます。

<input type="button">

ボタンにsrc属性＝”画像ファイル”で画像を指定することもできます。

<input type="image" src="画像のファイル名" alt="送信">

こばゆた
こばゆた

input type=”button” disabledをつけると押せなくなります。

<input type="button" disable>

1-7.その他のフォーム部品

他にもemail、telなどがあり、設定しておけばブラウザーでサポートがされていれば書式をチェックしてくれるものもあります。

古いブラウザだと使えない可能性があるので注意ですが…。対応状況はcaniuse.comで確認してください。

Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com

input type=”password”

type属性をpasswordにするとパスワード入力の際などに伏字にすることができるフォームを作れます。

パスワードを入力して下さい<br>
<input type="password">

input type=”color”

カラーピッカーを表示できます。

<input type="color">

input type=”date”

日付の入力欄を作れます。

<input type="date">

input type=”number”

数字専用の入力欄を作れます。

<input type="number">

inputタグ内の属性をそれぞれmin=”数値”、max=”数値”とする事で最小値と最大値に制限をつけることができます。

<label>番号を入れてください(10〜15)<input type="number" min="10" max="15"></label>

input type=”range”

range入力欄を作ります。

<input type="range">

スポンサーリンク

2.まとめ

formタグはフォームで使うパーツを囲む事でフォームを構成する

テキスト入力

1.一行入力テキスト

<input type="text" placeholder="お名前を記入してください">

他にも”tel”や”email”などが属性値に入る

2.複数行入力テキスト

<textarea placeholder="お問い合わせ内容を記入してください"></textarea>

  • placeholder=” ”をタグ内に入れる事で初期値を設定できる。

labelタグをつける事で「お名前」の部分をクリックする事で入力フォームにカーソルを写す事ができる。

①“for属性”と”id属性”を使うパターン

<label for="name">お名前<br></label>
<input type="text" id="name">


②labelタグで囲むパターン

<label>お名前<br>
  <input type="text">
</label>

  • セレクトボックスやラジオボックスにも使える
セレクトボックス
<select>
  <option value="選択してください">選択してください</option>
  <option value="選択肢A">選択肢A</option>
  <option value="選択肢B">選択肢B</option>
  <option value="選択肢C">選択肢C</option>
  <option value="選択肢D">選択肢D</option>
  <option value="選択肢E">選択肢E</option>
</select>

  • selectタグ内にsize=”数字”で初期の表示数を指定できる
  • selectタグ内にmultipleで複数選択可能に(Macなら⌘キーを押しながら、Windowsの場合はshiftキー)
  • optionタグ内にselectedで最初から選択状態に
ラジオボックス
<label><input type="radio" value="選択肢A" name="category">選択肢A</label>
<label><input type="radio" value="選択肢B" name="category">選択肢B</label>
<label><input type="radio" value="選択肢C" name="category">選択肢C</label>



  • inputタグ内に”name属性”をつけてグループ化しないと何個でも選べてしまうので注意
  • inputタグ内に”checked”を入れると最初から選択された状態にできる
チェックボックス
<label><input type="checkbox" name="category" value="選択肢A">選択肢A</label>　
<label><input type="checkbox" name="category" value="選択肢B">選択肢B</label>
<label><input type="checkbox" name="category" value="選択肢C">選択肢C</label>
<label><input type="checkbox" name="category" value="選択肢D">選択肢D</label>

　


  • inputタグ内に”checked”を入れると最初から選択された状態にできる
  • ラジオボタンとチェックボックスはfieldsetタグで囲い、タイトルをlegendタグで囲う事によってグループ化する事ができる。
<fieldset>
<legend>お好きな選択肢を選んでください(複数回答可)</legend>
  <label><input type="checkbox" name="category" value="選択肢A">選択肢A</label>　
  <label><input type="checkbox" name="category" value="選択肢B">選択肢B</label>
  <label><input type="checkbox" name="category" value="選択肢C">選択肢C</label>
  <label><input type="checkbox" name="category" value="選択肢D">選択肢D</label>
</fieldset>
お好きな選択肢を選んでください(複数回答可)

　



送信ボタン
<input type="submit" value="送信">

  • type=”submit”で送信ボタンにする
  • value属性の値を変える事によってボタンの文言を変えられる
  • type=”image”とsrc=”画像ファイル”を指定する事で画像を送信ボタンにすることもできる
  • type=”button”でもボタンにできる
  • タグ内に”disable”を入れるとボタンを押せなくできる
タグタグ内に書く属性名と値結果や用途
<input>type=”text”お名前入力フォームなどの１行テキスト入力欄
type=”radio”複数から１つ選ぶラジオボックス
type=”checkbox”複数から好きなだけ選ぶチェックボックス
type=”submit”フォームを送信する送信ボタンを作る
type=”button”ボタンが作れる
placeholder=”中に入れたい文字”記入例など
value=” “input要素の選択肢の値を送信する
name=” “チェックボックスやラジオボックスでのグループ化
checked最初からチェックした状態にできる
<textarea></textarea>ご意見やお問い合わせなどの複数行テキスト入力欄
<select>
<option></option>
</select>		選択肢をスライドで選ぶセレクトボックス
size=” “初期表示の数を設定
multiple複数選択できる
selected最初から選択した状態にできる
こばゆた
こばゆた

まとめにも関わらずとても長くなってしまいました(笑)

スポンサーリンク

コメント