inputタグの種類と使い方について

最終更新日2026.01.19

このまま学習を続けて、本当に実務で通用するのか不安な方へ。

そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。

さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

inputタグの種類と使い方について解説していきます。

Webサイトでフォームを作る際によく使用する主要なinputタグを、使い方と合わせて紹介していきます。
また、inputタグとよく一緒に使用される、「formタグ」、「textareaタグ」「selectタグ」についても合わせて解説していきます。

1. フォーム関連タグの種類
2. inputタグ（テキスト）
3. inputタグ（メールアドレス）
4. inputタグ（電話番号）
5. inputタグ（ラジオボタン）
6. inputタグ（チェックボックス）
7. inputタグ（非表示）
8. inputタグ（ファイルアップロード）
9. inputタグ（送信ボタン）
10. formタグ
11. textareaタグ（テキストエリア）
12. selectタグ（セレクトボックス）
13. まとめ

フォーム関連タグの種類

フォームを使用することで、Webサイト上で名前や住所、メールアドレスなどの情報を入力して、申し込みや問い合わせを行うことができます。

HTMLでフォームを作る際によく使われるinputタグの種類は以下の通りです。

inputタグ（テキスト）
inputタグ（メールアドレス）
inputタグ（電話番号）
inputタグ（ラジオボタン）
inputタグ（チェックボックス）
inputタグ（非表示）
inputタグ（ファイルアップロード）
inputタグ（送信ボタン）

その他、フォームを作る際に使われる主要なタグは以下の通りです。

formタグ
textareaタグ（テキストエリア）
selectタグ（セレクトボックス）

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>