HTML

HTML実践編③ お問い合わせフォームを作ってみよう！

今回は、HTMLだけを使って「簡単なお問い合わせフォーム」を作ってみましょう。

この実践を通じて、入力フォームの基本的な作り方を学ぶことができます。

今回学べるタグ

  • <form>：フォーム全体をまとめるタグ
  • <input>：名前やメールアドレスなどの入力欄を作るタグ
  • <textarea>：複数行のメッセージ入力欄を作るタグ
  • <button>：送信ボタンを作るタグ

最初のHTMLファイルを用意しよう

まずは、お問い合わせフォームの土台となるHTMLファイルを作成します。

以下のコードをVS Codeにコピーして「contact.html」という名前で保存してください。

基本のHTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>

  <h1>お問い合わせ</h1>

</body>
</html>

保存方法（VS Code）

  1. VS Codeを開く
  2. 新しいファイルを作成
  3. 上のコードを貼り付け、「contact.html」として保存
  4. 保存したファイルをダブルクリックすると、ブラウザで表示できます！

ステップごとにフォームを作成していこう

ここからは、先ほどの基本ファイルに少しずつ情報を追加して、お問い合わせフォームを完成させます。

ステップ1：フォームの枠組みを作ろう

使用するタグ

  • <form>：フォーム全体を囲むためのタグ

指示内容

フォームタグで全体の枠組みを作成しましょう。

（分からなかったクリック！）コードのヒントを表示する 
<form action="#" method="post">
  <!-- ここに入力フィールドを追加していきます -->
</form>
（分からなかったクリック！）追加する場所のヒント

<h1>お問い合わせ</h1> のすぐ下に追加してください。

ステップ2：入力フィールドを追加しよう

使用するタグ

  • <input>：名前とメールアドレスの入力欄を作るタグ
  • <textarea>：メッセージ入力欄を作るタグ

指示内容

名前とメールアドレス用の入力欄を作成し、メッセージ用の複数行テキストエリアを追加します。

（分からなかったクリック！）コードのヒントを表示する 
<label>お名前:</label><br>
<input type="text" name="name"><br><br>

<label>メールアドレス:</label><br>
<input type="email" name="email"><br><br>

<label>メッセージ:</label><br>
<textarea name="message" rows="4" cols="40"></textarea><br><br>
（分からなかったクリック！）追加する場所のヒント

ステップ1で作成した <form> タグの中に追加してください。

ステップ3：送信ボタンを追加しよう

使用するタグ

  • <button>：送信ボタンを作成するタグ

指示内容

入力内容を送信するためのボタンを追加しましょう。

（分からなかったクリック！）コードのヒントを表示する 
<button type="submit">送信する</button>
（分からなかったクリック！）追加する場所のヒント

ステップ2で追加した入力フィールドの下に追加してください。

完成版のHTMLファイル

完成版のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>

  <h1>お問い合わせ</h1>

  <form action="#" method="post">
    <label>お名前:</label><br>
    <input type="text" name="name"><br><br>

    <label>メールアドレス:</label><br>
    <input type="email" name="email"><br><br>

    <label>メッセージ:</label><br>
    <textarea name="message" rows="4" cols="40"></textarea><br><br>

    <button type="submit">送信する</button>
  </form>

</body>
</html>

まとめ

基本のHTMLファイルをベースに、少しずつ内容を追加することで簡単なお問い合わせフォームが完成しました！

<form>, <input>, <textarea>, <button> など、HTMLの基本タグを組み合わせるだけで、ここまで作れることが実感できたと思います。

自分の情報や入力欄をアレンジして、オリジナルのお問い合わせフォームを作ってみましょう！ 🚀

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。