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