HTMLでformを使って送信フォームを作成する方法【初心者向け】
初心者向けにHTMLのformタグを使って送信フォームを作成する方法を解説しています。サイト内にフォームを設置する上で役立つ知識になるはずです。実際にソースコードを書きながら説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
最近HTMLを勉強し始めた方は、HTMLは文字や画像を表示するだけの言語と思っておられる方がいらっしゃるかもしれません。HTMLは文字や画像以外にも、簡単なフォームを作成する機能が備わっています。
今回は、HTMLを使用して、送信フォームを作成する方法について解説していきたいと思います。
HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
form要素の書き方
それではform要素について解説していきます。form要素は送信フォームを作成するために、必要な要素です。
基本的な書き方は以下の通りです。
<form action="" method=""> //フォームの内容を記入していく。 </form>
実際にはform要素だけでイメージしているような入力フォームが表示されるわけではなく、フォーム内にinput属性などの部品を配置していくことで、フォームを表示することができます。
form要素はあくまで部品をまとめるて指令を送るタグといったイメージでいてください。
これだけ見ていてもイメージがわかないと思うので実際に書いて覚えていきましょう。
action属性の書き方
action属性の役割は、フォーム送信後にどの場所にデータを送信するかを指定するものです。
指定方法の例
外部URLに指定する
<form action="https://techacademy.jp">
この場合、https://techacademy.jpというURLに対して、フォームデータを送信する処理になります。
内部URLに指定する
<form action="form.php">
この場合、現在のURLの最後にform.phpを追記した場所に対して、フォームデータを送信する処理になります。
指定しない
<form>
この場合、現在のURLに対して、フォームデータを送信する処理になります。
methodタグの書き方
method属性の役割や、フォーム送信する際の送信方法を指定します。
送信方法として一般的なものはPOSTとGETがあります。
PHPでフォームからデータを受け取る方法を参考にしてみてください。
フォームというのは何でしょうか？
フォームで、データを送ることが出来るんだよ。お問い合わせフォームや会員登録のフォームとして使われているね。
見たことあります！あれは、フォームタグで作られていたんですねー。
そうそう。データの入力枠にはフォームの部品が必要なんだけど、今回はform要素の概要を見てみよう！
実際に書いてみよう
それでは、実際にフォームを作成していきましょう。
メッセージを入力するフォーム部分と、送信するボタンを作成していきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="form.php" method="post">
<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はその名の通りボタンを生成することができるタグです。
まとめ
今回はformを使用して送信フォームを作成する方法について解説していきました。
今回は簡単なテキスト入力フォームとボタンという構成でしたが、チェックボックスやセレクトボックスなどのフォームも簡単に生成することができます。
興味のある方はぜひ調べて理解を深めてみてください。
メッセージ送信、っていうボタンを押しても何も起こらないですね。
form要素のaction属性が空だと、今見ているページに対してデータを送信するんだよ。
フォーム部品を書けば、送ったデータが表示されたりするんですか？
HTMLでは、そこまでは出来ないんだ。PHPなどのプログラミング言語で送られたデータを取得して、表示したり登録したりすることが出来るよ！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
