HTMLでformを使って送信フォームを作成する方法【初心者向け】

初心者向けにHTMLのformタグを使って送信フォームを作成する方法を解説しています。サイト内にフォームを設置する上で役立つ知識になるはずです。実際にソースコードを書きながら説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

最近HTMLを勉強し始めた方は、HTMLは文字や画像を表示するだけの言語と思っておられる方がいらっしゃるかもしれません。HTMLは文字や画像以外にも、簡単なフォームを作成する機能が備わっています。

今回は、HTMLを使用して、送信フォームを作成する方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

formタグの書き方

それではformタグについて解説していきます。フォームタグは送信フォームを作成するために、必要なタグです。

基本的な書き方は以下の通りです。

<form action=“” method””>
  //フォームの内容を記入していく。
</form>

action、methodについては、少し難しい知識になるので割愛します。

実際にはformだけでイメージしているような入力フォームが表示されるわけではなく、フォーム内にinputなどの部品を配置していくことで、フォームを表示することができます。

formはあくまで部品をまとめるて指令を送るタグといったイメージでいてください。

これだけ見ていてもイメージがわかないと思うので実際に書いて覚えていきましょう。

 

実際に書いてみよう

それでは、実際にフォームを作成していきましょう。

メッセージを入力するフォーム部分と、送信するボタンを作成していきましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="" method="">
      <div>
        <label for="message">message:</label><br>
        <input type="text" />
      </div>

      <div class="button">
        <button type="submit">メッセージを送信</button>
      </div>
    </form>
  </body>
</html>

formは前述の通り部品をまとめるタグです。次にlabelですが、これはフォームにつける、ラベルを設定することができます。

今回はmessageというラベルを生成しています。

次にinputタグです。inputを使用すると入力できるフォームが生成されます。最後はbuttonです。buttonはその名の通りボタンを生成することができるタグです。

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

まとめ

今回はformを使用して送信フォームを作成する方法について解説していきました。

今回は簡単なテキスト入力フォームとボタンという構成でしたが、チェックボックスやセレクトボックスなどのフォームも簡単に生成することができます。
興味のある方はぜひ調べて理解を深めてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。