【HTML】フォーム部品＜input＞について_Webの基礎知識

Webページの基礎、HTMLのフォーム <form> 内で使用する部品タグ <input> についてです。

はじめに

前回はHTMLのフォーム全体 (<form>タグ) について解説しました。
今回はその中でも最も重要な部品である <input> タグについて詳しく解説します。

<input> タグは、テキスト入力・チェックボックス・送信ボタンなど、ユーザーから情報を受け取るための基本要素です。type属性の種類を変えるだけで様々な入力欄を作れるのが特徴です。

<input>タグとは？

<input>タグは、ユーザーが情報を入力するためのフォーム部品 (HTML要素) です。

<input type="text" name="username">

下がプレビュー画像です。テキスト入力用の Input 枠が表示されました。

ポイント

• 1つのタグで様々な入力形式を指定できます
• type属性で入力型式の種類を指定します
• フォームの中で最も使用頻度が高い要素です

基本構文

<input type="種類" name="名前" value="初期値">

主な属性

よく使う <input type=””> の種類

① テキスト入力（text）

<input type="text" name="address" placeholder="住所を入力">

placeholder 属性で入力例を表示させたプレビュー画像がこちらです。

• 1行の文字入力（最も基本の入力欄）
• 氏名・住所などの入力欄に使用します
• value属性で初期値を表示したり placeholder属性で入力例を表示させたりできます

② パスワード（password）

<input type="password" name="password">

コードのプレビュー画像がこちらです。

• 入力文字が「●」で表示されて入力内容が隠れます
• パスワード入力欄などで使用します

③ メール（email）

<input type="email" name="email">

コードのプレビュー画像はつぎのとおりです。「@」を含めるよう促されます。

• メール形式 (@ の有無) を自動チェックします
• スマホでは入力しやすいUIキーボードが表示されます

④ 数値（number）

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

コードのプレビュー画像はつぎのとおりです。最大値以上を入力すると注意されます。

• 数字のみ入力可能です
• min属性、max属性で入力範囲を指定可能です
• 年齢・数量などの入力に使用されます

⑤ チェックボックス（checkbox）

<label>
  <input type="checkbox" name="hobby" value="読書"> 読書
  <input type="checkbox" name="hobby" value="映画鑑賞"> 映画鑑賞
</label>

コードのプレビュー画像はつぎのとおりです。「映画鑑賞」だけ選択していますが「読書」も (複数) 選択できます。

• 複数項目の選択が可能です
• 趣味・興味などの選択に使用されます

⑥ ラジオボタン（radio）

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

コードのプレビュー画像はつぎのとおりです。「女性」を選択すると「男性」の選択は解除されます。

• 選択肢から1つだけ選択可能です
• 性別などの選択に使用されます

⑦ 送信ボタン（submit）

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

コードのプレビュー画像です。「送信」ボタンが表示されます。

• 送信ボタンを表示します

⑧ リセットボタン（reset）

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

コードのプレビュー画像です。「リセット」ボタンが表示されます。

• 入力内容を初期状態に戻します

⑨ ファイル選択（file）

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

コードのプレビュー画像です。「ファイル選択」用のボタンが表示されます。

• ファイル選択ボタンを表示します
• ファイルアップロード・ダウンロード用などに使用します

HTML5で追加された入力タイプ

日時系 (date, time, datetime-local)

<label>日付:</label>
<input type="date">

<label>時刻:</label>
<input type="time">

<label>日時:</label>
<input type="datetime-local">

コードのプレビュー画像がこちらです。ラベルを付けてタイプ別に表示しています。

• カレンダーUI、時刻指定UIを表示します
• 入力ミスを減らすことができます

電話番号 (tel)・URL (url)

<label>電話:</label>
<input type="tel">

<label>URL:</label>
<input type="url">

コードのプレビュー画像がこちらです。ラベルを付けてタイプ別に表示しています。

• telタイプはスマホで数字キーボードを表示します
• URL形式を検証します

ポイント・注意点

name 属性は必須

→ サーバーにデータを送る際の識別子になります。

type の選択が重要

→ UX（使いやすさ）が大きく変わります。

HTMLだけでは送信処理はできない

→ 実際の処理は PHP や JavaScript が必要です。

おわりに

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

サンプルのダウンロードはこちらから

【Excel VBA】サンプルファイル_ダウンロードのページ ・最新の登録データが一番上になっています。・目次クリックでジャンプできますのでご利用ください。 ダウンロード一覧（1/7ページ目）新しい登録順です 記事ごとに使っ…