【初心者向け】0からformがわかる｜HTMLでのフォーム作成

お問い合わせフォームやログインパネルなどユーザーがページに情報を入力する時に使用されるフォームにはformタグが使用されています。

本記事ではformタグを使ったフォーム作成の流れを0から説明していきます。

ラジオボタン、セレクトボックス、チェックボックスといった特殊なフォーム要素の書き方も丁寧に解説しているのでフォーム作成をまるっと身につけることができますよ！

フォームとは？

フォームとはwebサイトの「お問い合わせ」や「検索ボックス」など、ユーザーが何かしらの入力と処理を行うために使用されるものです。以下は実際にwebサイトで使用されているフォーム例です。こういったものをみなさん一度は使用したことがありますよね。

お問い合わせフォームの例

検索フォームの例

web兄さん

HTMLを学習する中でフォームは難易度が高いテーマの1つだけど、フォームは本当に様々な場面で使用されることが多い要素なんだ。

たとえばTwitterやFacebookのログイン画面や美容院の予約時の情報入力などでもフォーム要素は使用されている。逆を言えばフォームをマスターすることでサイト制作の可能性がグッと広がるとも言えるよね！

フォームの学習に必要なステップ

htmlでフォームを完全にマスターしようとすると次のような学習のステップが必要になります。

まずはフォームの表示とデザインの調整です。フォームの表示はHTMLを書き、フォームのデザイン（見た目）はCSSを書いて調整します。

続いてフォームの動作処理です。たとえばお問い合わせフォームなら、あなたが入力した情報がwebサイトの持ち主に届き、あとからあなた宛にメールが届いたりしますよね。

このような「ユーザーが入力した情報をメールで送ったり、どこかに保存したりする」という処理はHTMLではできないのでphpなどのプログラミング言語を使う必要があります。

本記事では初学者の方を対象にしているので今回は「フォームの表示とデザインの調整」について学習していきます。

フォームの各項目の名前

ひとえにフォームとは言ってもフォーム項目は数種類のタイプに分かれています。

項目ごとにHTMLでの書き方も違ってくるのでまずはフォームではどんな項目が使えるのか「名前」と「機能」を理解しましょう。

1. テキストフィールド：テキストを入力する項目（例：名前、電話番号、メールアドレス入力欄）
2. セレクトボックス：クリックするとプルダウンで選択肢が現れる
3. ラジオボタン：複数の選択肢から1つ選ぶ項目
4. チェックボックス：複数の選択肢から複数チェックができる項目
5. テキストエリア：1行で書ききれない文章を入力する項目（例：メッセージ、コメント欄）
6. 送信ボタン：フォームに入力した内容を送信するためのボタン（例：送信ボタン・購入ボタン）

メインで使用するのはこの6つの項目です。それぞれの名前と機能をしっかり覚えましょう。

フォームをつくるのに欠かせないformタグ

フォームをつくるにはHTMLのformタグを使います。

<form action="confirm.php" method="post">
  ここにテキストフィールドやチェックボックスなどのhtmlタグを書いていく
</form>

上記のコードのようにformで囲った中にテキストフィールドやセレクトボックス、チェックボックスといったHTMLタグを記述していきます。

inputでテキストフィールドをつくる

それではフォームの各項目の書き方を学習していきましょう。まずはテキストフィールドの作り方です。テキストフィールドは改行なしの文章などを入力するためのフォームです。作成するにはinputタグを使用します。

名前：<input type="text" name="yourname">

inputではtype="〇〇"に書く内容によって表示されるテキストフィールドの種類を指定します。今回は通常のテキスト入力欄をつくるためにtype="text"としました。

その他にも数字専用の入力フィールドにするならtype="number"やメールアドレスの入力フィールドにするならtype="email"などがあります。その2つはこの後紹介します。

labelを使って項目とフィールドを連動

labelタグを使えば項目とフィールドを連動させることができます。言葉では難しいので、以下のサンプルで違いを確認します。それぞれの「名前」という箇所をクリックしてみてください。

labelありのテキストフィールドでは「名前」をクリックすると入力欄が選択状態になりますよね。

labelタグを使うことで項目とフォームを連動させることができます。では早速書き方をみてみます。

<label for="rendou">名前：</label> <input id="rendou" type="text" name="yourname">

項目名をlabelで囲みます。そしてlabelにはfor="〇〇"、連動させたいinputにid="〇〇"と同じ名前を書きます。

サンプルではlabelはfor=”rendou”、inputはid=”rendou”と同じになっていますよね。こうすることで項目とフォームを連動させることができます。

連動させることはユーザーの使いやすさの向上に繋がるので基本的にどの入力項目にもlabelは使います。

数字入力のテキストフィールド

inputのtype属性をnumberとすることで半角数字しか入力できないテキストフィールドをつくることができます。

直接数字を入力するか、数字を増減させるボタンで入力できます。

<label for="num">予約番号：</label>
<input id="num" type="number" name="yoyaku-num">

メールアドレス入力のテキストフィールド

inputのtype属性をemailにすることでメールアドレスの入力欄をつくることができます。「xx@xxxx.xx」という形式に当てはまらない場合エラー文を表示してくれます。

<label for="mail">メール：</label>
<input id="mail" type="email" name="mail">

textareaでテキストエリアを表示する

テキストエリアを表示するにはtextareaタグを使用します。

textareaはテキストを入れ子にする必要はありませんが、</textarea>と、閉じタグを書かなければいけないので注意しましょう。

<label for="comment">コメント</label>
<textarea id="comment" name="comment"></textarea>

textarea{
  resize : both; 
}

placeholderで薄い文字を表示する

inputとtextareaではフォームの中にあらかじめ薄い文字を表示して入力のヒントを与えることができます。

上のサンプルでは最初から薄いグレーの文字が表示されていますよね。

<label for="yourname">お名前</label>
<input type="text" name="yourname" placeholder="山田太郎">

<label for="comment">コメント</label>
<textarea id="comment" name="comment" placeholder="ここには自由にコメントを記入してください"></textarea>

input、textareaに最初から文字を表示するにはplaceholder属性を使います。

input、textareaにそれぞれplaceholder="入力したい文字列"と追加します。

selectでセレクトボックスを表示

ボタンをクリックするとプルダウンで選択肢が表示されるのがセレクトボックスです。

セレクトボックスでは複数の選択肢から1つだけを選択させることができます。

<select name="sushi">
  <option value="magro">まぐろ</option>
  <option value="ika">いか</option>
  <option value="ebi">えび</option>
</select>

セレクトボックスをつくるには各選択肢をoptionで囲い、全体をselectで囲みます。

セレクトボックスは選択肢が最低3つ以上ある時に使用しましょう。

radioでラジオボタンを表示

複数の選択肢から1つ選ばせることができるのがラジオボタンです。サンプルは2つの選択肢ですがいくつあっても大丈夫です。ラジオボタンの特徴として1つの項目を選択するともともとチェックの入っていた項目のチェックが外れます。

<p>性別を選択</p>
<input id="male" type="radio" name="sex" value="male"><label for="male">男性</label>
<input id="female" type="radio" name="sex" value="female"><label for="female">女性</label>

ラジオボタンを表示するにはinputのtype属性をtype="radio"とします。labelについてはテキストフィールドと同じように、idとforを同じにすることで項目とチェックボタンを連動させることができます。

checkboxでチェックボックスを表示

複数の選択肢の中から任意の項目をチェックさせることができるのがチェックボックスです。

選択したものにチェックマークが付きいくつもでも選択できます。

<p>好きなスポーツ</p>
<input id="football" type="checkbox" name="sport" value="サッカー"><label for="football">サッカー</label>
<input id="baseball" type="checkbox" name="sport" value="野球"><label for="baseball">野球</label>
<input id="basketball" type="checkbox" name="sport" value="バスケ"><label for="basketball">バスケ</label>

チェックボックスを表示するにはinputのtype属性をtype="checkbox"とします。

ラジオボタンと同じくlabelのforとinputのidを同じにすることで項目とチェックボックスを連動させることができます。

nameでグループ化する

ラジオボタンとチェックボックスでのname="〇〇"にはグループ分けをする役割があります。

以下のサンプルをみてください。

「①好きな季節」と「②好きな天気」という2つの内容のラジオボタンがありますよね。

それぞれ別グループのラジオボタンなため「晴れ」を選択中に「夏」や「冬」を選択しても「晴れ」の選択が解除されることはありません。

<p>好きな季節</p>
<input id="summer" type="radio" name="season" value="夏"><label for="summer">夏</label>
<input id="winter" type="radio" name="season" value="冬"><label for="winter">冬</label>

<p>好きな天気</p>
<input id="sunny" type="radio" name="weather" value="晴れ"><label for="sunny">晴れ</label>
<input id="rainy" type="radio" name="weather" value="雨"><label for="rainy">雨</label>

コードをみてみると「好きな季節」のほうのラジオボタンのinputはname="season"となっていて「好きな天気」のinputはname="weather"となっていますよね。

このように同じ内容のラジオボタンやチェックボックスはnameの内容を統一して同じグループにしてあげる必要があります。

submitで送信ボタンを表示

さて最後のフォーム項目である送信ボタンの作り方を学習しましょう。

<input type="submit" value="送信する">

信ボタンの表示はとっても簡単でinputのtype属性をtype="submit"とするだけです。

value="ボタンの文字"とすることで送信ボタンに表示される文字を自由に変えることができます。

resetでリセットボタンを表示

おまけでフォームの内容をリセットするボタンの表示方法も紹介します。

リセットボタンを押すことでformタグ内の内容をすべて初期状態に戻します。

<form>
  <label>お名前：</label><input type="text">
  <input type="reset" value="リセットする">
</form>

inputのtype属性をtype="reset"としてvalue="ボタンの文字"を設定すればOKです。

初期値を設定する

初期値とはフォームの各項目にあらかじめ設定しておく値のことです。

placeholderで薄いグレーの文字を表示するのとは違い、実際の記入や選択を最初からしてある状態にします。詳しくは以下をみていきましょう。

テキストフィールドの初期値

<input type="text" value="1行のテキストです" name="name">

テキストエリアの初期値

<textarea name="comment">複数行のテキストです</textarea>

セレクトボックスの初期値

<select name="sushi">
  <option value="magro">まぐろ</option>
  <option value="ika" selected>いか</option>
  <option value="ebi">えび</option>
</select>

ラジオボタンとチェックボックスの初期値

表示されているサンプルではラジオボタンでは「女性」がチェックボックスでは「サッカー」と「バスケ」が最初から選択されていると思います。

<p>性別を選択</p>
<input type="radio" name="sex" value="male"><label>男性</label>
<input type="radio" name="sex" value="female" checked><label>女性</label>

<p>好きなスポーツ</p>
<input type="checkbox" name="sport" value="サッカー" checked><label>サッカー</label>
<input type="checkbox" name="sport" value="野球"><label>野球</label>
<input type="checkbox" name="sport" value="バスケ" checked><label>バスケ</label>

ラジオボタンやチェックボックスで初期値を設定する場合は初期値にしたい項目のinputにcheckedとつけるだけでOKです。当たり前ですがラジオボタンは1つの項目しか選択できないのでcheckedは1つまでです。

簡単なフォームをつくってみよう

それではおさらいとして簡単なお問い合わせフォームをつくってみましょう。

フォームのデザイン（css）については別記事で学習することができるので、まずはフォームの骨組み（html）の部分を書き写して、全体を作成するイメージを持てるようになればOKです。

HTMLの解説

htmlのコードについて特に疑問を持ちそうな部分についての簡単な解説です。

• 項目名とフィールドを左右で並べるために項目名にはclass="label"、フィールドにはclass="inputs"をつけています
• 項目ごとの上下の余白をとるためにdivでグループ化しています

<p class="lead-form">ご予約はこちらから！</p>

<form>
  
  <div class="item">
    <label class="label">お名前</label>
    <input class="inputs" type="text" name="name">
  </div>
  
  <div class="item">
    <label class="label">メールアドレス</label>
    <input class="inputs" type="email" name="email">
  </div>

  <div class="item">
    <p class="label">予約メニュー</p>
    <div class="inputs">
    <input id="cut" type="radio" name="menu" value="cut"><label for="cut">カット</label>
    <input id="cut-color" type="radio" name="menu" value="cut-color"><label for="cut-color">カット+カラー</label>
    <input id="headspa" type="radio" name="menu" value="headspa"><label for="headspa">ヘッドスパ</label>
    </div>
  </div>
  
  <div class="item">
    <label class="label">ご意見</label>
    <textarea class="inputs"></textarea>
  </div>

  <div class="btn-area">
    <input type="submit" value="予約する"><input type="reset" value="リセット">
  </div>

</form>

CSSの解説

cssのコードについて特に疑問を持ちそうな部分についての簡単な解説です。

• 項目名とフィールドを横並びにするために.labelと.inputsに対してfloat : leftを適用しwidthでそれぞれの横幅を調整しています
• input[type=”〇〇”]をセレクタにすることで特定のtypeのinputに対してcssを適用することができます。たとえばinput[type="text"]であればテキストフィールドのみにcssを適用します

.lead-form{
  text-align: center;
  font-size:20px;
}
form{
  width:460px;
  margin:0 auto;
}
.item{
  overflow: hidden;
  margin-bottom: 20px;
}
.label{
  float: left;
  margin-right: 20px;
  width:135px;
  border-left: solid 3px #e0505d;
  padding-left: 10px;
}
.inputs{
  float: left;
  width:300px;
}
input[type="text"],input[type="email"]{
  border: solid 1px #aaa;
  border-radius:5px;
  padding:10px;
  font-size: 15px;
}
textarea{
  border: solid 1px #aaa;
  border-radius:5px;
  padding: 10px;
  height: 160px;
  font-size: 15px;
}
.btn-area{
  text-align: center;
}
input[type="submit"]{
  background: #e0505c;
  border: none;
  color: white;
  font-size:17px;
  font-weight:bold;
  padding: 10px 20px;
  margin: 0 5px;
}
input[type="reset"]{
  background: #aaa;
  border: none;
  color: white;
  font-size:17px;
  font-weight:bold;
  padding: 10px 20px;
  margin: 0 5px;
}

フォームの要点まとめ

フォームはhtmlの学習の中でも難易度が高い内容なので難しく感じるのは当然です。

まずはhtmlでフォームの基盤をつくれるようになること、cssでデザインを調整できるようになることを目指しましょう。

javascriptによるバリデーション（入力内容のチェック）やphpの送信のプログラムはそこがマスターできてからです。

さて、本記事で学習したことの要点をまとめたのでおさらいしておきましょう。

• フォームをつくるにはformタグが必要（action属性は送信後の移動先URL）
• inputのtype属性の中身を変えることでテキストフィールド、チェックボタンなど様々なフォームを表示
• labelのfor属性とinputのid属性を一緒にすることで項目とフォームを連動させる
• ラジオボタン、チェックボックスではnameを一緒にすることでグループ化させる

以上です。まずは正解のHTMLとCSSを見ずにサンプルのフォームを作れるようになりましょう！