フォームは、お問い合わせや会員登録などでユーザーの情報を受け取るために欠かせない機能です。しかし、HTMLを学び始めたばかりだと、どのタグを使えばよいのか迷ってしまうこともあります。
そこで本記事では、HTMLフォームの基本的な仕組みから作り方までを初心者向けにわかりやすく解説します。formタグやinputタグ、textareaタグの使い方を学びながら、実際にフォームを作成できるようになりましょう。
関連記事：「HTMLのclass属性とは？使い方やid属性との違いを初心者向けに解説」
HTMLフォームとは？
HTMLフォームとは、ユーザーが入力した情報を送信するための入力エリアのことです。お問い合わせフォームや会員登録フォーム、検索フォームなど、Webサイト上で情報を入力する場面で使われます。フォームは、HTMLのformタグを中心に、inputタグやtextareaタグ、buttonタグなどを組み合わせて作成します。
フォームの役割
フォームの役割は、ユーザーが入力した情報を受け取ることです。
例えば、お問い合わせフォームでは、名前・メールアドレス・問い合わせ内容などを入力して送信できます。Webサイトを見るだけでなく、ユーザーとやり取りするためにフォームは欠かせない要素です。
HTMLだけでできること・できないこと
HTMLだけでも、入力欄や送信ボタンなどフォームの見た目を作ることはできます。
<form>
<input type="text" />
<button type="submit">送信</button>
</form>ただし、HTMLだけでは送信された内容を保存したり、メールで受け取ったりする処理はできません。実際にフォームを動かすには、PHPなどのサーバー側の処理や、フォーム送信サービスとの連携が必要になります。
フォームが使われる場面
HTMLフォームは、さまざまなWebサイトで使われています。
• お問い合わせフォーム
• 会員登録フォーム
• ログインフォーム
• アンケートフォーム
• 検索フォーム
どのフォームも基本的な仕組みは共通しています。まずはHTMLでフォームの構造を理解することで、Web制作の実践的なスキルにつながります。
関連記事：「HTMLのid属性とは？使い方やclassとの違いを初心者向けに解説」
HTMLフォームの基本構造
HTMLフォームは、formタグを中心に作成します。formタグの中に入力欄や送信ボタンを配置することで、ユーザーが入力した情報を送信できるようになります。まずは、フォーム全体の基本構造を確認しておきましょう。
formタグでフォーム全体を囲む
フォームを作成するときは、入力欄やボタンをformタグで囲みます。
<form>
<input type="text">
<button type="submit">送信</button>
</form>formタグの中にある入力欄やボタンは、送信時にまとめて処理されます。そのため、フォームで使う部品は基本的にformタグの中に記述します。
action属性で送信先を指定する
action属性は、フォームの送信先を指定するための属性です。
<form action="contact.php">
<input type="text" name="name">
<button type="submit">送信</button>
</form>上記の場合、フォームの内容はcontact.phpへ送信されます。
method属性で送信方法を指定する
method属性は、フォームデータの送信方法を指定する属性です。
主にGETとPOSTの2種類があります。
<form action="contact.php" method="post">
<input type="text" name="name">
<button type="submit">送信</button>
</form>• GET：検索フォームなどで使われることが多い
• POST：お問い合わせフォームや会員登録フォームで使われることが多い
お問い合わせフォームのように個人情報を扱う場合は、POSTを指定するのが一般的です。
HTMLフォームでよく使うタグ
HTMLフォームは、複数のタグを組み合わせて作成します。ここでは、フォーム作成でよく使用される代表的なタグを紹介します。
inputタグ
inputタグは、ユーザーが情報を入力するためのタグです。フォームで最も使用頻度が高く、type属性によって入力内容を変更できます。
<input type="text" name="name">例えば、名前やメールアドレス、パスワードなどの入力欄を作成できます。
<input type="text" name="name">
<input type="email" name="email">
<input type="password" name="password">入力内容に応じて適切なtype属性を選ぶことで、使いやすいフォームを作成できます。
labelタグ
labelタグは、入力欄の説明文を表示するためのタグです。
<label for="name">お名前</label>
<input type="text" id="name" name="name">for属性とid属性を同じ値にすることで、ラベルと入力欄を関連付けられます。
また、ラベル部分をクリックしても入力欄が選択されるため、操作性の向上にも役立ちます。
textareaタグ
textareaタグは、複数行の文章を入力するためのタグです。
<textarea name="message"></textarea>お問い合わせ内容やコメント欄など、長文を入力してもらう場合によく使用されます。
<textarea name="message" rows="5" cols="30"></textarea>rows属性で高さ、cols属性で横幅の目安を指定できます。
selectタグ
selectタグは、選択肢の中から項目を選んでもらうときに使用します。
<select name="prefecture">
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>入力内容を限定できるため、入力ミスを減らしたい場合に便利です。
都道府県の選択やお問い合わせ種別の選択などによく利用されます。
buttonタグ
buttonタグは、送信ボタンや操作ボタンを作成するためのタグです。
フォームの送信にはinputタグでもボタンを作成できますが、buttonタグはHTMLを自由に記述できるため、デザインのカスタマイズがしやすい特徴があります。
<button type="submit">送信する</button>送信ボタンはbuttonタグとinput type=”submit”のどちらでも作成できます。近年はデザインの自由度が高いbuttonタグが使われる場面も増えています。
関連記事：「HTMLにCSSを埋め込む方法を解説｜外部CSS・内部CSS・インラインCSSの違いも紹介」
HTMLフォームの作り方
ここでは、お問い合わせフォームでよく使われる入力欄を実際に作成していきます。フォームは複数のタグを組み合わせることで完成しますが、一つひとつは難しくありません。
まずは名前・メールアドレス・お問い合わせ内容・送信ボタンの4つを作成してみましょう。
名前の入力欄を作る
名前を入力してもらう場合は、inputタグのtype属性に「text」を指定します。
<label for="name">お名前</label>
<input type="text" id="name" name="name">type=”text”は、一般的な文字列を入力するための設定です。また、labelタグとid属性を関連付けておくことで、どの入力欄なのかをユーザーが理解しやすくなります。
メールアドレスの入力欄を作る
メールアドレスを入力してもらう場合は、type属性に「email」を指定します。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">type=”email”を使用すると、メールアドレス形式で入力されているかブラウザが自動で確認してくれます。入力ミスを減らせるため、お問い合わせフォームでは積極的に利用しましょう。
お問い合わせ内容の入力欄を作る
お問い合わせ内容のような長文を入力する場合は、textareaタグを使用します。
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5"></textarea>textareaタグは複数行の入力に対応しているため、質問や相談内容を自由に入力してもらえます。
rows属性を指定すると、入力欄の高さを調整できます。
送信ボタンを設置する
入力された内容を送信するためには、送信ボタンを設置します。
<button type="submit">送信する</button>type=”submit”を指定することで、ボタンをクリックした際にフォームの内容を送信できます。
ここまで紹介した内容を組み合わせると、基本的なお問い合わせフォームを作成できます。
<form action="contact.php" method="post">
<label for="name">お名前</label>
<input type="text" id="name" name="name">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5"></textarea>
<button type="submit">送信する</button>
</form>まずはこの基本形を覚えておくと、さまざまなフォームを作成できるようになります。
関連記事：「HTMLのaタグの色付け方法を初心者向けに解説｜CSSでリンク色を変更する方法」
HTMLフォームを作る際の注意点
HTMLフォームは基本的なタグを組み合わせるだけで作成できますが、使いやすく正しく動作するフォームにするためにはいくつかのポイントがあります。特に初心者の方が見落としやすい部分を確認しておきましょう。
labelタグを設定する
フォームを作成するときは、入力欄ごとにlabelタグを設定しましょう。ユーザーが入力内容を理解しやすくなり、アクセシビリティの向上にもつながります。
name属性を忘れずに指定する
フォームのデータを送信する場合は、name属性が必要です。
name属性は、送信されたデータの識別名として利用されます。
<input type="text" id="name" name="name">例えば、名前なら「name」、メールアドレスなら「email」のように、入力内容が分かる名前を設定するのが一般的です。name属性がない場合、入力内容が正しく送信されないことがあるため注意しましょう。
入力形式に合ったtype属性を使う
inputタグにはさまざまなtype属性があります。
入力内容に合わせて適切なものを選ぶことで、入力ミスを減らせます。
<input type="text" name="name">
<input type="email" name="email">
<input type="password" name="password">
<input type="tel" name="tel">• text：名前や会社名などの文字列
• email：メールアドレス
• password：パスワード
• tel：電話番号
特にスマートフォンでは入力しやすいキーボードが自動表示されるため、ユーザーの負担軽減にもつながります。
requiredで必須項目を設定する
入力を必須にしたい項目にはrequired属性を設定します。
<input type="email" name="email" required>requiredを付与すると、入力欄が空のまま送信された場合にブラウザがエラーメッセージを表示します。お問い合わせフォームや会員登録フォームでは、名前やメールアドレスなどの重要な項目に設定されることが一般的です。ただし、必須項目を増やしすぎると入力の負担が大きくなるため、本当に必要な項目だけに設定するようにしましょう。
HTMLフォームをCSSで整える方法
HTMLだけでもフォームは作成できますが、そのままでは見た目がシンプルすぎることがあります。
CSSを組み合わせることで、入力しやすく見やすいフォームに改善できます。ここでは、よく使われるデザイン調整の方法を紹介します。
入力欄の幅や余白を調整する
入力欄の幅や余白を調整すると、フォーム全体が見やすくなります。
<input type="text" class="form-input">.form-input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
}width: 100%;を指定すると、親要素の幅いっぱいに入力欄を表示できます。
また、paddingで内側の余白を設定すると文字が入力しやすくなり、margin-bottomで項目同士の間隔を確保できます。お問い合わせフォームなどでは、入力欄同士に適度な余白を設けることで、ユーザーが入力しやすくなります。
ボタンのデザインを変更する
送信ボタンもCSSで見た目を変更できます。
<button type="submit" class="submit-btn">
送信する
</button>.submit-btn {
padding: 12px 24px;
background-color: #3b82f6;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
}上記のように設定すると、背景色や文字色を変更でき、クリックしやすいボタンになります。
さらに、マウスを乗せたときの見た目を変更することも可能です。
.submit-btn:hover {
opacity: 0.8;
}フォームのデザインは見た目だけでなく、使いやすさにも大きく影響します。入力欄やボタンを適切に整えることで、ユーザーがストレスなく利用できるフォームを作成できるでしょう。
関連記事：「HTMLのclass属性とは？使い方やid属性との違いを初心者向けに解説」
HTMLとCSSを効率良く学ぶ方法
HTMLフォームを作成できるようになるためには、タグの意味を覚えるだけでなく、実際に手を動かしてコードを書くことが大切です。また、HTMLとCSSはセットで使われることが多いため、同時に学習を進めることでWeb制作の理解が深まります。
実際にコードを書きながら学習する
HTMLやCSSは、本や動画を見るだけではなかなか身につきません。
例えば、今回紹介したフォームを実際に作成しながら学習すると、formタグやinputタグ、labelタグの役割を自然に理解できるようになります。最初はシンプルなお問い合わせフォームから始めて、慣れてきたらチェックボックスやプルダウンメニューなども追加してみましょう。
コードを書いて試行錯誤する経験を積むことで、エラーへの対応力や実践的なスキルも身についていきます。
独学が不安ならプログラミングスクールもおすすめ
独学でもHTMLとCSSは学べますが、途中で挫折してしまう方が少なくありません。
特にフォーム作成のようにHTML・CSS・JavaScript・PHPなど複数の知識が関わる場面では、分からない部分を自力で解決するのが難しいこともあります。
そのような場合は、プログラミングスクールを活用するのも一つの方法です。現役エンジニアや講師に質問できる環境があれば、つまずいたポイントをすぐに解決できるため、効率良く学習を進められます。自分に合った学習方法を選びながら、HTMLとCSSの基礎をしっかり身につけていきましょう。
まとめ
HTMLフォームは、ユーザーから情報を受け取るために欠かせない機能です。
お問い合わせフォームや会員登録フォーム、アンケートフォームなど、さまざまなWebサイトで活用されています。フォームを作成する際は、formタグを中心にinputタグやlabelタグ、textareaタグなどを組み合わせて構築します。また、action属性やmethod属性の役割を理解しておくことも重要です。さらに、適切なtype属性の設定やrequired属性による入力チェック、CSSを使ったデザイン調整を行うことで、使いやすいフォームを作成できます。
まずはシンプルなフォームを作りながら、各タグの役割や使い方を身につけていきましょう。実際にコードを書いて試すことで理解が深まり、より実践的なWeb制作スキルを習得できるようになります。
