テックキャンプ無料カウンセリング
定額プランはこちら

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

更新: 2021.12.15

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

プログラミングで人生を変えた最新事例

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

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

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

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

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

HTMLのformタグとは

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

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

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

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

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

はじめての転職、何から始めればいいか分からないなら

「そろそろ転職したいけれど、失敗はしたくない……」
そんな方へ、テックキャンプでは読むだけでIT転職が有利になる限定資料無料プレゼント中!
例えばこのような疑問はありませんか。
  • 未経験OKの求人へ応募するのは危ない?
  • IT業界転職における“35歳限界説”は本当?
  • 手に職をつけて収入を安定させられる職種は?
資料では、転職でよくある疑問について丁寧に解説します。
IT業界だけでなく、転職を考えている全ての方におすすめです。
「自分がIT業界に向いているかどうか」など、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の中でも難易度が高いですが、一つ一つのパーツを組み立ていくといつの間にかかっこいいフォームが作れるはずです。何度も記事を見返してみてください。

↑目次へ戻る

はじめての転職、何から始めればいいか分からないなら

「そろそろ転職したいけれど、失敗はしたくない……」そんな方へ、テックキャンプでは読むだけでIT転職が有利になる限定資料無料プレゼント中!

例えばこのような疑問はありませんか。
・未経験OKの求人へ応募するのは危ない?
・IT業界転職における“35歳限界説”は本当?
・手に職をつけて収入を安定させられる職種は?

資料では、転職でよくある疑問について丁寧に解説します。IT業界だけでなく、転職を考えている全ての方におすすめです。
「自分がIT業界に向いているかどうか」など、IT転職に興味がある方は無料カウンセリングにもお気軽にお申し込みください。

限定資料を無料プレゼント中

この記事を書いた人

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

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

Advertisement