テックキャンプ無料カウンセリング テックキャンプ無料カウンセリング
資料請求はこちら 資料請求はこちら

【HTML初心者】formの書き方とは?inputからsubmitまでわかりやすく解説

更新: 2021.10.22

>>No1エンジニア養成プログラム テックキャンプ

プログラミングを仕事にして収入を上げる方法

「名前・メールアドレス・タイトル・本文・送信ボタンがあるフォームを作りたいができない」

「formタグを使った問い合わせフォームの作成方法が分からない」

「フォームのコーディング方法がいまいち理解できていない」

そのように悩んでいませんか?

初めてフォームを作る方にも、フォームを作ったことはあるけど身についているか不安という方にも、フォームの作り方をわかりやすく解説していきます。

HTMLのformタグとは

formタグとは、HTMLでフォームを作るためのタグのことです。

フォームとは、入力欄や送信ボタンの集まりのことを指します。

フォームを使うと、名前やメールアドレスなどのブラウザで入力された情報をまとめてサーバーへ送ることができます。

以下の図のようなフォーム画面を見たことがある方は多いのではないでしょうか。

※こちらは実際に使用されている、テックキャンプ無料カウンセリングの予約フォームです。

未経験から10週間でプロのデザイナーへ

テックキャンプは、未経験からのWEBデザイナー・エンジニア転職を実現するスクール。 【こんな悩みを抱えていませんか?】
・好きなことを仕事にしたい…
・家にいながら仕事ができれば…
・あと少し収入が増えれば… テックキャンプなら超実践型カリキュラムと徹底したサポートがあるので、個人で稼げるスキルが10週間で身につきます! 詳しいサービス内容や実績を知りたい方、IT業界に詳しいプロのカウンセラーにキャリアの相談をしたい方は、無料カウンセリングへ。 無理な勧誘は一切致しませんので、気軽にご参加ください。

【基本】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=”◯◯”>という形で指定し、◯◯に入るメソッドは主に以下の2種類があります。

  • 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の中でも難易度が高いですが、一つ一つのパーツを組み立ていくといつの間にかかっこいいフォームが作れるはずです。何度も記事を見返してみてください。

もし「HTML・CSSやWebデザインのスキルを身につけたいけど、独学では挫折しそう…」と感じているなら、スクールを検討してみてはいかがでしょうか。

スクールならいつでも質問できる環境があるため、効率よく学習をすることができます。

テックキャンプ デザイナー転職は学習を最後までやり切るサポートが充実しているので、ぜひ公式サイトで詳細を確認してみてください。

>>テックキャンプ デザイナー転職 公式サイト

テックキャンプでは詳しいサービス内容やスクールの雰囲気が分かる、無料カウンセリングも実施中!効率的な学習方法やキャリアの悩みなど、ITに特化したプロのカウンセラーに何でも相談できます。

無理な勧誘は一切致しませんので、気軽にご参加ください。悩んでいるなら今こそ一歩踏み出してみませんか。

無料カウンセリングはこちら

↑目次へ戻る

Webデザイナーになって、自分らしい人生を手に入れる

「Webデザイナーになって自由に働きたい」と思っても、何から始めればいいか分からない方へ。

未経験からのWEBデザイナー・エンジニア転職を実現するスクール テックキャンプでは、デザイナーを目指すためにまずは押さえるべきポイントを6つをまとめたebookを無料で公開中!

【ebookの内容】
・IT業界転職における35歳限界説は本当?
・資格がないとデザイナーになれない?
・Webデザイナーの給料って?

限定ebookのダウンロードはこちら

Webデザイナーになって、自分らしい人生を手に入れる

「Webデザイナーになって自由に働きたい」と思っても、何から始めればいいか分からない方へ。

未経験からのWEBデザイナー・エンジニア転職を実現するスクール テックキャンプでは、デザイナーを目指すためにまずは押さえるべきポイントを6つをまとめたebookを無料で公開中!

【ebookの内容】
・IT業界転職における35歳限界説は本当?
・資格がないとデザイナーになれない?
・Webデザイナーの給料って?

限定ebookのダウンロードはこちら

この記事を書いた人

キム クナ
新卒では人材大手のパーソルキャリアに入社しキャリアアドバイザーとして、就活のサポートしていました。その後はフリーランスのWebデザイナーを経て、現在は株式会社divのデザイナーコースのコンテンツ制作を担当しています。異色なキャリアに挑戦したい方を応援したく日々有益なコンテンツ制作に奮闘中です!

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement