「名前・メールアドレス・タイトル・本文・送信ボタンがあるフォームを作りたいができない」
「formタグを使った問い合わせフォームの作成方法が分からない」
「フォームのコーディング方法がいまいち理解できていない」
そのように悩んでいませんか？
初めてフォームを作る方にも、フォームを作ったことはあるけど身についているか不安という方にも、フォームの作り方をわかりやすく解説していきます。
この記事の目次
HTMLのformタグとは
formタグとは、HTMLでフォームを作るためのタグのことです。
フォームとは、入力欄や送信ボタンの集まりのことを指します。
フォームを使うと、名前やメールアドレスなどのブラウザで入力された情報をまとめてサーバーへ送ることができます。
以下の図のようなフォーム画面を見たことがある方は多いのではないでしょうか。
※こちらは実際に使用されている、テックキャンプ無料カウンセリングの予約フォームです。
あなたもAIを扱う側になりませんか？
テクノロジースキルが定額で学び放題！
プログラミング、AI、DX、デザイン、副業スキル
そして話題のChatGPTも学ぶことができます。 市場価値を高め、個人でも活躍できる人材を目指しませんか？
【基本】form（フォーム）の書き方
HTMLではフォームを作るときに<form>タグを使います。
<form>〜</form>でフォームの構成要素全体を囲みます。
フォームの中には<input>でつくる入力欄のほか、<button>による送信ボタンなど、サーバーに情報を送信するために必要なパーツを設置する必要があります。
また、<label>により入力欄と紐づけて項目名を表記することもできます。
それでは、<form>の使い方から見ていきましょう。
この記事もオススメ
formタグ
<form>はフォームを構成するパーツを囲って、フォームのデータをどこに送信するか、どのように送信するかを指定することができます。
どこに送信するか、どのように送信するかは、それぞれaction属性とmethod属性で指定することが可能です。
それぞれの属性について、詳しく見ていきましょう。
action属性で送信先を指定
フォームの送信先は、action属性で指定します。
送信先のURLは<form action=”送信先のURL”>という形で指定し、指定がない場合、現在のページURLが送信先になります。
method属性でGET・POSTを指定
<form>のmethod属性では、フォームのデータをどのように送信するか指定することができます。
<form method=”◯◯”>という形で指定し、◯◯に入るメソッドは主に以下の２種類があります。
- get・・・何か情報を検索したり取得するときに使います。
- post・・・入力された情報を保存したいときに使います。
指定がない場合、getメソッドとして送信されます。
inputタグ
<input>は、様々なフォームパーツを作るためのタグです。type属性を何にするかによって、異なる役割を与えることができます。
図では名前とメールアドレス、送信ボタンの部分に<input>を追記しています。
<input>ではtype属性により、入力される値がテキストなのか、数値なのかといった値を指定することができます。
また、<input>のtype属性をsubumitにすると送信ボタンを作ることができます。
- type=”text”・・・テキスト
- type=”mail”・・・メールアドレス
- type=”submit”・・・送信ボタン
その他にも、パスワード、数字、日付など、入力値に合わせたさまざまなtype属性が存在します。
応用編では、さまざまな種類の入力欄の作り方も紹介しています。
気になる方は、ぜひ最後まで読んでみてくださいね。
name属性で名前を指定
それぞれの入力欄には、name=”◯◯”のような形でname属性を追記しましょう。
フォームの見た目は変化しませんが、サーバーへ送信されるときにnickname=テク子のように、どの値が、どの入力欄に対応しているのかサーバー側で把握できるようになります。
labelタグ
<label>は、入力欄を項目名を紐づけるためのタグです。
入力欄と項目名を紐付けるためにはlabelタグのfor属性とinputタグなど入力欄のid属性を同一にする必要があります。
textareaタグ
<texterea>は、複数行のテキストの入力欄を作るためのタグです。
<input type=”text”>と外観は似ていますが、枠の右下から入力欄を拡大縮小させることができるという違いもあります。
【応用】様々なフォームの作成方法
以下の表のように、テキストの入力欄のほかにもフォームにはさまざまな入力パーツを設置することができます。
応用編として、よく使われるパーツを詳しく紹介します。
入力フォーム
1行のテキスト入力（text）
<input type=”type”>は、1行の入力欄を設置するために使います。
メールアドレス（email）
<input type=”email”>を使うと、メールアドレスの入力欄を設置できます。
見た目は<input type=”text”>と変わらないのですが、メールアドレスが正しく入力されないと、送信を弾いてくれるなどのメリットがあります。
チェックボックス（checkbox）
<input type=”checkbox””>は、複数選択ができるチェックボックスを設置するために使います。
ラジオボタン（radio）
<input type=”radio”>は、選択肢の中からどれか1つだけ選べるラジオボタンを設置するために使います。
ファイルのアップロード（file）
<input type=”file”>は、画像や動画などのファイルのアップロードボタンを設置するために使います。
プルダウンメニュー（select/option）
<select>と<option>を使うと、プルダウン式メニューを設置できます。
パスワード（password）
<input type=”password”>を使うとと、パスワードの入力欄を設置できます。
パスワード管理ツールを導入している場合、自動でパスワードを検知してくれます。
入力された文字列は「•」などの記号で隠されるので、セキュリティ向上のためにも、パスワード入力欄を<input type=”password”>で作成することは必須と言えます。
実装方法を表でまとめました。
いつでも見返せるように、ぜひブックマークしておきましょう。
サンプル文字列の表示（placeholder）
図のように、入力欄に薄いグレーの文字が表示されているのをみたことはあるでしょうか。
inputとtextareaではフォームの中にあらかじめ薄い文字を表示することで、入力に迷いをなくす効果を与えることができます。
入力必須項目の設定（required）
<input>や<texterea>にrequiredを指定するとその入力欄は入力必須になります。
また、空欄のままフォームを送信すると、エラーを表示してくれます。
初期値の設定
初期値とは、フォーム内のそれぞれの項目に、あらかじめ設定しておく値のことを指します。
サンプル文字列の表示（placeholder）と違い、入力欄にテキストをあらかじめ入力しておいたり、特定の選択項目をあらかじめ選択してある状態にしておくことができます。
テキストの入力欄の場合はvalue属性を使ってvalue=”初期値テキスト”を追記すれば最初からテキストを記入できます。
チェックボックスやラジオボタンで初期値を設定する場合、初期値にしたい項目のinputにcheckedとつけるだけでOKです。
ラジオボタンは、1つの項目しか選択できません。
プルダウン式メニューは、初期値にしたい項目のoptionにselectedと追加すればOKです。
リセットボタンの表示
フォームの内容をリセットするボタンを設置する方法を紹介します。
リセットボタンを押すことでformタグ内に記入した内容をすべて初期状態に戻ることができます。
<input>にtype=”reset”、value=”ボタンの文字”を設定すればOKです。
この記事のハッシュタグ
HTMLのformまとめ
本記事では、フォームの作り方ついて解説してきました。
htmlの中でも難易度が高いですが、一つ一つのパーツを組み立ていくといつの間にかかっこいいフォームが作れるはずです。何度も記事を見返してみてください。
最先端のITスキルが学び放題！AI時代で勝ち残る人材になる。
＼テクノロジー時代に活躍できる人材になりませんか？／
あらゆる業界でIT化が進んでいる今、
エンジニアではなくともテクノロジーへの理解が不可欠な時代になりました。
プログラミングを活用して新しい価値を生み出すことで、
あなたの人材価値を高めることができます。
プログラミングを学ぶと、
・キャリアアップ、年収アップを目指せる
・テクノロジーを活用した課題解決ができる
・業務効率化ができるようになる
・自分でサービスを作れるようになる
テックキャンプは、テクノロジースキルが定額で学び放題。
プログラミング、AI、デザイン、DXスキル、
そして、話題のChatGPTも学ぶことができます。
これからの時代で必要とされるスキルを学び、
市場価値を高め、個人で活躍できる人材を一緒に目指しましょう。
