フォームの入力欄の種類と使い方について
最終更新日
フォームの入力欄の種類と使い方について解説していきます。
Webサイトでフォームを作る際によく使用するタグを、使い方と合わせて紹介していきます。
目次
フォームの種類
フォームを使用することで、Webサイト上で名前や住所、メールアドレスなどの情報を入力して、申し込みや問い合わせを行うことができます。
HTMLでフォームを作る際によく使われるタグの種類は以下の通りです。
- formタグ
- inputタグ
- textareaタグ
- selectタグ
inputタグには様々な属性がありますので、以下で各タグについて1個ずつ解説していきます。
formタグ
フォームを作る際に全体を囲むタグです。入力欄や送信ボタンはこのタグの中に記述します。formタグでは、主に「action」と「method」を指定します。
■記載方法
HTML
<form action="送信先URL" method="送信方法">
</form>
- action
- フォームデータを送信する先のURLを指定します。省略した場合、現在のページにデータを送信します。
- method
- フォームデータを送信するHTTPメソッドを指定します。一般的に、GET と POST が使われます。
inputタグ（テキスト）
1行のテキストの入力欄です。type属性に「text」を指定します。
■記載方法
HTML
<input type="text" name="名前" value="初期値" placeholder="表示テキスト">
- name
- 入力フィールドの名前を指定します。サーバー側でデータを処理する際に使用します。基本は設定します。
- value
- 入力フィールドの初期値を指定します。省略可能です。
- placeholder
- 入力フィールドが空のとき、入力フィールドに表示するテキストを指定します。省略可能です。
「name」「value」「placeholder」の解説については、他のinputタグも同様です。
inputタグ（メールアドレス）
メールアドレスの入力欄です。ブラウザで簡単なメールアドレスチェックを行なってくれます。type属性に「email」を指定します。
■記載方法
HTML
<input type="email" name="名前" value="初期値" placeholder="表示テキスト">
inputタグ（電話番号）
電話番号の入力欄です。type属性に「tel」を指定します。
■記載方法
HTML
<input type="tel" name="名前" value="初期値" placeholder="表示テキスト">
inputタグ（ラジオボタン）
ラジオボタンの入力欄です。1つだけ選択させたい場合に使用します。type属性に「radio」を指定します。
■記載方法
HTML
<input type="radio" name="名前" value="値1">ボタン1
<input type="radio" name="名前" value="値2">ボタン2
<input type="radio" name="名前" value="値3">ボタン3
- name
- 同じラジオボタンのグループには、同じ名前を指定します。
- value
- 各値を設定します。
■記載例
HTML
<input type="radio" name="age" value="1">10代
<input type="radio" name="age" value="2">20代
<input type="radio" name="age" value="3">その他
inputタグ（チェックボックス）
チェックボックスの入力欄です。複数選択させたい場合に使用します。type属性に「checkbox」を指定します。
■記載方法
HTML
<input type="checkbox" name="名前" value="値1">チェック1
<input type="checkbox" name="名前" value="値2">チェック2
<input type="checkbox" name="名前" value="値3">チェック3
- name
- 同じチェックボックスのグループには、同じ名前を指定します。
- value
- 各値を設定します。
■記載例
HTML
<input type="checkbox" name="fruit" value="orange">みかん
<input type="checkbox" name="fruit" value="banana">バナナ
<input type="checkbox" name="fruit" value="apple">りんご
inputタグ（非表示）
非表示のデータを送信するための入力欄です。type属性に「hidden」を指定します。
■記載方法
HTML
<input type="hidden" name="名前" value="初期値">
inputタグ（ファイルアップロード）
ファイルをアップロードするための入力欄です。type属性に「file」を指定します。
■記載方法
HTML
<input type="file" name="名前">
inputタグ（送信ボタン）
フォームで入力された内容を送信するためのボタンです。type属性に「submit」を指定します。
■記載方法
HTML
<input type="submit" value="ボタンに表示する名前">
■記載例
HTML
<input type="submit" value="送信">
textareaタグ（テキストエリア）
複数行のテキストの入力欄です。
■記載方法
HTML
<textarea name="名前" placeholder="表示テキスト"></textarea>
selectタグ（セレクトボックス）
セレクトボックスの入力欄です。optionタグを追加することで中のメニューを増やすことができます。
■記載方法
HTML
<select name="名前">
<option value="" selected="selected">初期表示</option>
<option value="値1">選択肢1</option>
<option value="値2">選択肢2</option>
<option value="値3">選択肢3</option>
</select>
- name
- セレクトボックスの名前を指定します。
- value
- 各選択肢の値を指定します。
- selected
- 初期表示の選択肢を指定します。
■記載例
HTML
<select name="prefectures">
<option value="" selected="selected">都道府県を選択</option>
<option value="東京">東京</option>
<option value="大阪">大阪</option>
<option value="愛知">愛知</option>
</select>
まとめ
Webサイトでフォームを作る際によく使用する、入力欄の種類と使い方について紹介してきました。
フォームを作る際によく使われるタグの種類は以下の通りです。
- formタグ
- inputタグ
- textareaタグ
- selectタグ
inputタグには様々な種類の属性が用意されているので、使用する項目に合わせて適切な属性を使い分けましょう！
