【初心者向け】HTMLのタグで作れるフォーム部品まとめ

Webサイトを制作していると、ユーザーから情報を入力してもらう「フォーム」を作る機会は必ず出てきます。

お問い合わせフォーム、会員登録、ログイン画面、検索フォームなど、Web上でのやり取りはすべてフォームから始まります。

その中心にあるのが <input>タグ です。

わかりやすさを意識しながら「<input>タグで作れるフォーム部品」を丁寧に解説していきます。

1.<input>タグとは？

HTMLの<input>タグは、ユーザーからデータを入力してもらうための要素です。
ひとつのタグですが、type属性の値を変えるだけで さまざまな入力部品 を作れます。

<input type="text" name="username" placeholder="ユーザー名を入力してください">

上記の例は、テキストボックスを作るコードです。

このように、typeの指定を変えると「テキスト」「パスワード」「チェックボックス」「ラジオボタン」「ファイルアップロード」など多彩なフォーム部品が作れるのです。

2. 基本の入力フィールド（テキスト系）

(1) テキスト入力欄

<input type="text" name="username" placeholder="ユーザー名">

• 一行の文字入力が可能
• 名前やID入力に使われる

(2) パスワード入力欄

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

• 入力文字が「●」や「＊」で隠される
• ログインフォームに必須

(3) メールアドレス入力欄

<input type="email" name="email" placeholder="example@mail.com">

• スマホでは「@」入力しやすいキーボードが表示される
• 入力値の形式チェックも自動で行われる

(4) URL入力欄

<input type="url" name="homepage" placeholder="https://example.com">

• 入力チェックが可能
• WebサイトのURL入力専用

(5) 電話番号入力欄

<input type="tel" name="phone" placeholder="090-1234-5678">

• スマホでは数字キーボードが表示される
• 電話番号入力に便利

3. 数値・日付・時間の入力フィールド

(1) 数値入力

<input type="number" name="age" min="0" max="120">

• 上下ボタンで数値を変更できる
• 数量や年齢入力に利用

(2) 日付入力

<input type="date" name="birthday">

• カレンダーUIで日付選択可能

(3) 時刻入力

<input type="time" name="meeting_time">

• 時刻を選べるUIが表示される

(4) 日時入力

<input type="datetime-local" name="appointment">

• 日付と時間をまとめて指定可能

動作確認用動画

4. 選択系のフォーム部品

(1) チェックボックス

<input type="checkbox" name="hobby" value="music"> 音楽
<input type="checkbox" name="hobby" value="sports"> スポーツ

• 複数選択が可能

(2) ラジオボタン

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

• グループの中から1つだけ選択可能

(3) カラーピッカー

<input type="color" name="favcolor">

カラー選択UIが出る(動作確認用動画▼クリック）

5. ファイル・ボタン関連

(1) ファイルアップロード

<input type="file" name="profile_image">

• 画像やPDFを送信できる
• 履歴書アップロードやプロフィール写真登録に使える

(2) 送信ボタン

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

• フォーム送信を実行するボタン

(3) リセットボタン

<input type="reset" value="リセット">

• 入力内容を初期化

(4) 普通のボタン

<input type="button" value="クリック">

• JavaScriptと組み合わせて使う

6. SEOとフォーム設計の関係

「フォーム＝SEO」と聞くと意外に思う方も多いでしょう。
しかし実は、フォームの設計がUX（ユーザー体験）に直結し、間接的にSEOにも影響します。

• 入力補助（placeholderやlabel）を適切に使うとユーザーの離脱率が減る
• スマホで入力しやすいtypeを指定するとコンバージョン率が上がる
• アクセシビリティに配慮したフォームは検索評価でもプラス

つまり、ユーザーが迷わず入力できるフォームはSEO的にも有利なのです。

7. よく使う<input>まとめ表

8. まとめ

<input>タグは、Webフォームを作る上で最も重要なタグです。
type属性を正しく使い分けることで、ユーザーが快適に入力できるフォームを作ることができます。

特に、スマホ対応やアクセシビリティを意識したフォーム設計は SEO効果にも間接的に貢献します。
単なる「入力欄」ではなく、ユーザー体験を左右する大事な要素として考えると良いでしょう。

これからWebデザインを学ぶ方は、ぜひ実際にコードを書いて試しながら覚えてください。
「使いやすいフォームが作れる」＝「ユーザーに優しいサイトが作れる」ということです。

✅ この記事を参考に、あなたのサイトにも最適なフォームを実装してみてください！

まだまだ学びたいと思った人はこの記事を読んでみて

関連

デジハリ・オンラインスクールで、クリエイティブな未来を掴もう