HTMLでformタグを用いて入力フォームを作成する方法を３分で解説します。
「入力フォームを作成する」と聞くと、初心者にとっては難しく感じてしまうかもしれませんが、実はHTML自体は結構簡単に作成することができます。（難しいのは、入力された内容を処理するサーバ側の設定です。）
このページでは、formタグを用いて初歩的な入力フォームを作成するために必要な知識を網羅的に解説します。このページの内容を理解すれば、すぐ自分一人でフォーム作成ができるようになることを目指します。
- フォームの基本構造
- formタグの意味と使い方
- labelタグ・inputタグ・selectタグ・textareaタグの意味と使い方
- プルダウン・パスワードボックスなどの作り方・基本
Webサイトを構築してみたい方や、HTMLを学習中の人であれば知っておいて損はない役立つ知識ばかりですので是非最後までご覧ください。
フォームの完成形
このページでは、以下のフォームをサンプルにして学習していきます。フォームとは、ユーザがWebページからサーバにデータを送信するための機能です。
次の章からは、それぞれの部品について具体的な解説を加えていきますので、今は「こんな感じの入力フォームができるんだな」とイメージいただければOKです。
※実際のHTMLにCSSを適用しているので、見栄えが良くなっています。また、サーバ再度の設定は行っていないため実際のデータは送信されることはありません。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めての入力フォーム</title>
</head>
<body>
<form method="get" action="form.html">
<div>
<label for="shimei">氏名</label>
<input type="text" name="shimei" placeholder="例：鈴木一郎">
</div>
<div>
<label for="pass">パスワード</label>
<input type="password" maxlength="8" name="pass" placeholder="例：pass1234">
</div>
<div>
<label for="tel">電話番号</label>
<input type="tel" name="tel" palceholder="090XXXXXXXX">
</div>
<div>
<label for="sei">性別</label>
<input type="radio" name="sei" value="男" checked="checked">:男
<input type="radio" name="sei" value="女">：女
</div>
<div>
<label for="course">希望コース</label>
<input type="checkbox" name="course" value="html">html
<input type="checkbox" name="course" value="css">css
<input type="checkbox" name="course" value="javascript">javascript
</div>
<div>
<label for="old">年齢</label>
<select name="old">
<option value="20">20代</option>
<option value="30">30代</option>
<option value="40">40代</option>
<option value="50">50代</option>
</select>
</div>
<div>
<label for="free">自由記述欄</label>
<textarea name="free" rows="1" cols="40" placeholder="自由に意見を記述してください"></textarea>
</div>
</form>
</body>
</html>早速、フォームの基本「form」タグから解説を進めていきます。
フォームの基本構造
フォームは「formタグ」で全体を囲み、その中に各種フォーム部品が存在するという構造をとります。
実際に、目に見える部分（ブラウザで表示される部分）は上記の赤字部分だけですが、formタグでは入力された値のデータの送信先を指定したりするなど、どちらも重要な役割を担います。どちらか片方だけでは、フォームは成立しません。
HTMLの基本ルールについては、こちらの記事をご覧ください。
formタグ
<formmethod="post"action="送信先">
<!-- フォームの各種部品 -->
</form>
formタグは、フォームを作成する場合に利用します。ユーザによって入力された（選択された）値を、どこにどのように送信するのか？など各種基本的な設定はformタグの属性に記述していきます。
action属性
action属性は、formタグの必須属性で「データの送信先」を指定します。基本的には、URLを指定します。
データの送信先については、サーバ側の知識も必要となりますので、詳しい説明は省きます。
<form action="form.html">
<!-- フォームの各種部品 -->
</form>method属性
method属性は、データの送信方法を指定します。属性値は「post」「get」のどちらの値をとります。
基本的には「post」を指定するのが一般的ですが、説明簡略化のため「get」を用いてサンプルを作成してみます。
<form method="get" action="form.html">
<!-- フォームの各種部品 -->
</form>inputタグ
inputタグを使うことで、ユーザが入力するテキストボックスや、チェックボックス、ラジオボタンなどを作成することができます。
ラジオボタン、テキストボックスなどはtype属性で指定します。対応する属性値は事前に決められており、適切なものを選択して記述する必要があります。
- テキストボックス ⇒ type="text"
- パスワードボックス ⇒ type="password"
- ラジオボタン ⇒ type="radio"
- チェックボックス ⇒ type="checkbox"
- 電話番号 ⇒ type="tel"
サンプルコードを用いて、それぞれの完成形を確認していきましょう。
テキストボックス（type="text"）
テキストボックスを作成する際は、type属性に「text」を指定します。
サンプル
<input type="text" name="shimei" placeholder="例：鈴木一郎">
name属性
name属性は、対象のテキストボックスを一意に区別するための属性です。サーバサイドでは、このname属性の情報を用いて、送られてきたデータが何の項目なのかを判別することになります。
また、name属性はページ後半で説明する「label」タグを用いる際にinputタグとlabelタグを紐づける役割を担います。
placeholder属性
placeholder属性は、テキストボックスに「値が何も入力されていないときに表示されるテキスト」を指定することができます。
どんな値を入力すればよいの？というのを分かりやすくすることができます。ユーザビリティを高める上で効果的です。
パスワードボックス（type="password"）
パスワードボックスを作成したいときは、type属性に「password」を指定します。
テキストボックスとの違いは、入力値が「*(アスタリスク)」で表示されるという点です。
サンプル
<input type="password" maxlength="8" name="pass" placeholder="例：pass1234">
maxlength属性
パスワードボックスと相性が良いのが「maxlength」属性です。
maxlength属性は、入力できる文字数を制限します。「８」を指定した場合、９文字以上の文字を入力することはできません。データの入力ミスを回避したい場合に用いることが主な使用目的です。
チェックボックス（type="checkbox"）
チェックボックスを作成したい場合は、type属性に「checkbox」を指定します。
サンプル
<input type="checkbox" name="course" value="html">html <input type="checkbox" name="course" value="css">css <input type="checkbox" name="course" value="javascript">javascripthtml css javascript
value属性
チェックボックスにおけるvalue属性は、「チェックされた際に実際に送信される値」を指定する役割を担います。
例えば、上記の例で言えば「html」にチェックを入れたら、サーバにはvalue属性で指定した「html」という値を送付することになります。
ラジオボタン（type="radio"）
ラジオボタンを作成したいときは、type属性に「radio」を指定します。
ラジオボタンとは、複数の選択肢から１つだけしか選ぶことができないボタンです。
サンプル
<input type="radio" name="sei" value="男" checked="checked">:男 <input type="radio" name="sei" value="女">：女:男 ：女
checked属性（checked="checked"）
checked属性を「checked」で指定すると、ドフォルト（画面を最初に表示したタイミング）時に選択された状態になります。
ラジオボタン設置時に使われることが多く、必ずどれか一つを選択させたい場合に利用します。
電話番号（type="tel"）
HTML5から追加された属性値です。type="tel"を指定すると、対象のテキストボックスが電話番号の入力欄として利用することができます。
ただし、これは特に入力規則は強制されていないため、動きとしては通常のテキストボックスとほぼ同様のものであると理解していただいて問題ありません。
サンプル
<label for="tel">電話番号</label> <input type="tel" name="tel" placeholder="090XXXXXXXX">
selectタグ（プルダウン）
selectタグを用いることで、プルダウンを作成することができます。
プルダウンで表示させたい値は、selectタグの中に「optionタグ」をネストさせて定義します。
<select name="old"> <option value="20">20代</option> <option value="30">30代</option> <option value="40">40代</option> <option value="50">50代</option> </select>
textareaタグ（複数行のテキストボックス）
textareaタグを利用すると、複数行入力可能なテキストボックスを作成することができます。
普通のテキストボックスは、改行することができません。自由記述欄など、入力する内容に改行が含まれる想定の場合に、「textarea」を利用します。
<textarea name="free" rows="1" cols="40" placeholder="自由に意見を記述してください"></textarea>
rows属性/cols属性
rows属性とcols属性は、textareaタグを利用する際の必須属性で、対象のテキストボックスを表示する際の大きさを指定します。
labelタグ
labelタグは、フォームの各種部品の項目名（ラベル）を指定するタグです。
labelタグのfor属性と、各種部品のname属性で紐づきが決定されます。
＜label for="shimei">氏名
＜input type="text" name="shimei" placeholder="例：鈴木一郎">
<label for="shimei">氏名</label> <input type="text" name="shimei" placeholder="例：鈴木一郎">
HTML/CSSを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
