HTML inputタグとは？フォーム入力を担う基本要素を初心者向けに完全解説

HTML inputタグとは？フォーム入力を担う基本要素を解説

先生と生徒の会話形式で理解しよう

生徒

「HTMLのinputタグって何をするタグなんですか？」

先生

「inputタグは、Webページで名前やメールアドレスなどを入力してもらうためのとても大切なHTMLタグです。」

生徒

「文字を打つための箱みたいなものですか？」

先生

「その通りです。文字を入力する箱だけでなく、チェックボックスや送信ボタンもinputタグで作れます。」

生徒

「一つのタグでいろいろなことができるんですね。」

先生

「はい。ではHTML inputタグの基本から順番に見ていきましょう。」

1. HTML inputタグとは何か

HTML inputタグとは、Webページ上でユーザーが情報を入力するためのHTML要素です。フォーム入力の中心となる存在で、テキストボックスやパスワード入力欄、ラジオボタン、チェックボックス、送信ボタンなどを作ることができます。

フォームとは、問い合わせや会員登録、ログイン画面などで使われる入力画面のことです。紙の申込書に名前や住所を書くイメージと似ています。inputタグは、その申込書の記入欄にあたる部分です。

HTML初心者の方は、まず入力する場所を作るタグがinputタグだと覚えましょう。Web制作やホームページ作成では必ず登場する重要なHTMLタグです。

2. inputタグの基本的な書き方

HTML inputタグは、開始タグだけで完結するタグです。終了タグはありません。これを空要素と呼びます。空要素とは、開始と終了で囲まない特別なタグのことです。

もっとも基本的なテキスト入力欄は、次のように書きます。


<form>
  <input type="text">
</form>

ブラウザ表示

typeという属性は、入力の種類を決めるための指定です。属性とは、タグに追加情報を与える仕組みです。typeにtextと書くと、文字を入力できるテキストボックスになります。

3. type属性で入力の種類を変える

HTML inputタグの大きな特徴は、type属性によって役割が変わることです。これは同じ箱でも用途によって形が変わる道具箱のようなものです。

例えばパスワード入力欄は、次のように書きます。


<form>
  パスワード：
  <input type="password">
</form>

ブラウザ表示

passwordを指定すると、入力した文字が黒い丸などで隠されます。ログイン画面でよく使われます。

メールアドレス専用の入力欄もあります。


<form>
  メールアドレス：
  <input type="email">
</form>

ブラウザ表示

emailを指定すると、メール形式かどうかをブラウザが自動で確認してくれます。これを入力チェックといいます。

4. name属性とvalue属性の役割

HTMLフォームでは、入力されたデータをサーバーに送信します。そのとき重要になるのがname属性です。name属性は、入力データの名前を決めるものです。


<form>
  お名前：
  <input type="text" name="username" value="山田太郎">
</form>

ブラウザ表示

nameはデータの項目名、valueは初期値です。初期値とは、最初から入っている値のことです。会員情報編集画面などで使われます。

HTML inputタグを正しく使うためには、name属性の理解がとても大切です。

5. チェックボックスとラジオボタン

HTML inputタグは、選択式の入力も作れます。複数選べるものはチェックボックスです。


<form>
  好きな食べ物：
  <input type="checkbox" name="food" value="りんご">りんご
  <input type="checkbox" name="food" value="みかん">みかん
</form>

ブラウザ表示

一つだけ選ばせたい場合はラジオボタンを使います。


<form>
  性別：
  <input type="radio" name="gender" value="男性">男性
  <input type="radio" name="gender" value="女性">女性
</form>

ブラウザ表示

radioの場合、nameを同じにすることで一つだけ選択できる仕組みになります。これは初心者がつまずきやすいポイントです。

6. 送信ボタンの作り方

フォーム入力の最後には、送信ボタンを置きます。これもHTML inputタグで作れます。


<form action="example.php" method="post">
  お名前：
  <input type="text" name="username">
  <input type="submit" value="送信する">
</form>

ブラウザ表示

submitを指定すると送信ボタンになります。actionは送信先、methodは送信方法を指定します。これにより入力データがサーバーへ送られます。

HTML inputタグは、フォーム作成の中心となる基本要素です。テキスト入力、パスワード入力、メール入力、チェックボックス、ラジオボタン、送信ボタンなどを一つのタグで実現できます。Web制作初心者の方は、まずtype属性の違いとname属性の役割をしっかり理解することが大切です。

まとめ

HTML inputタグとは、Webページやホームページ作成においてフォーム入力を実現するための最重要HTMLタグです。テキストボックス、パスワード入力、メールアドレス入力、チェックボックス、ラジオボタン、送信ボタンなど、あらゆるフォーム部品を作ることができます。HTML初心者にとってinputタグの理解は、フォーム作成の第一歩であり、Web制作やフロントエンド開発の基礎力を高める大切な学習内容です。

特に重要なのはtype属性、name属性、value属性の役割です。type属性は入力形式を決める設定であり、text、password、email、checkbox、radio、submitなどを指定することでフォーム入力の見た目や機能が変わります。name属性は送信時のデータ名となり、サーバーへ正しくデータを渡すために必須です。value属性は初期値や送信される値を決定します。

また、radioボタンでは同じname属性を指定することで一つだけ選択できる仕組みになること、checkboxでは複数選択が可能であることも重要なポイントです。フォーム送信ではformタグのaction属性とmethod属性が連携し、入力データがサーバーへ送信されます。inputタグ単体ではなく、formタグと組み合わせて使うことが基本構造です。

HTML inputタグの正しい使い方を理解することで、ログイン画面、会員登録フォーム、お問い合わせフォーム、アンケートフォームなど、実践的なWebアプリケーションの土台を作ることができます。HTML基礎学習では、実際にコードを書きながら確認することが理解への近道です。

サンプルプログラムで総復習


<form action="confirm.php" method="post">
  お名前：
  <input type="text" name="username" placeholder="お名前を入力">

  メールアドレス：
  <input type="email" name="mail">

  パスワード：
  <input type="password" name="pass">

  性別：
  <input type="radio" name="gender" value="男性">男性
  <input type="radio" name="gender" value="女性">女性

  趣味：
  <input type="checkbox" name="hobby" value="読書">読書
  <input type="checkbox" name="hobby" value="運動">運動

  <input type="submit" value="送信する">
</form>

ブラウザ表示

上記のHTMLコードには、テキスト入力、メール入力、パスワード入力、ラジオボタン、チェックボックス、送信ボタンがすべて含まれています。これらはすべてinputタグで構成されています。HTMLフォーム入力の基本を網羅した構成です。

先生と生徒の振り返り会話

生徒

inputタグは文字を入力するだけでなく、チェックボックスやラジオボタンも作れるHTMLタグだと理解しました。

先生

その通りです。type属性を変えるだけで役割が変わるのがinputタグの大きな特徴です。

生徒

name属性はサーバーへ送るときのデータ名になるので重要なのですね。

先生

はい。フォーム送信ではname属性が無いとデータとして認識されません。Web制作では必ず意識してください。

生徒