inputタグの種類と使い方について
inputタグの種類と使い方について解説していきます。
Webサイトでフォームを作る際によく使用する主要なinputタグを、使い方と合わせて紹介していきます。
また、inputタグとよく一緒に使用される、「formタグ」、「textareaタグ」「selectタグ」についても合わせて解説していきます。
目次
フォーム関連タグの種類
フォームを使用することで、Webサイト上で名前や住所、メールアドレスなどの情報を入力して、申し込みや問い合わせを行うことができます。
HTMLでフォームを作る際によく使われるinputタグの種類は以下の通りです。
- inputタグ（テキスト）
- inputタグ（メールアドレス）
- inputタグ（電話番号）
- inputタグ（ラジオボタン）
- inputタグ（チェックボックス）
- inputタグ（非表示）
- inputタグ（ファイルアップロード）
- inputタグ（送信ボタン）
その他、フォームを作る際に使われる主要なタグは以下の通りです。
inputタグには様々な属性がありますので、以下で1個ずつ解説していきます。
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="送信">
formタグ
フォームを作る際に全体を囲むタグです。入力欄や送信ボタンはこのタグの中に記述します。formタグでは、「action」と「method」を指定します。
■記載方法
HTML
<form action="送信先URL" method="送信方法">
</form>
- action
- フォームデータを送信する先のURLを指定します。省略した場合、現在のページにデータを送信します。
- method
- フォームデータを送信するHTTPメソッドを指定します。一般的に、GET と POST が使われます。
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サイトでフォームを作る際によく使用する、inputタグの種類と使い方について紹介してきました。
フォームを作る際によく使われるinputタグとその他フォーム関連の主要なタグの種類は以下の通りです。
- inputタグ（テキスト）
- inputタグ（メールアドレス）
- inputタグ（電話番号）
- inputタグ（ラジオボタン）
- inputタグ（チェックボックス）
- inputタグ（非表示）
- inputタグ（ファイルアップロード）
- inputタグ（送信ボタン）
- formタグ
- textareaタグ（テキストエリア）
- selectタグ（セレクトボックス）
inputタグには様々な種類の属性が用意されているので、使用する項目に合わせて適切な属性を使い分けましょう！
