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はその名の通りボタンを生成することができるタグです。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回はformを使用して送信フォームを作成する方法について解説していきました。
今回は簡単なテキスト入力フォームとボタンという構成でしたが、チェックボックスやセレクトボックスなどのフォームも簡単に生成することができます。
興味のある方はぜひ調べて理解を深めてみてください。
メッセージ送信、っていうボタンを押しても何も起こらないですね。
form要素のaction属性が空だと、今見ているページに対してデータを送信するんだよ。
フォーム部品を書けば、送ったデータが表示されたりするんですか？
HTMLでは、そこまでは出来ないんだ。PHPなどのプログラミング言語で送られたデータを取得して、表示したり登録したりすることが出来るよ！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
