catnose
catnose
HTMLの<input>タグは、さまざまな種類の入力欄（フィールド）を作るために使います。文字列の入力欄だけでなく、チェックボックスやラジオボタン、ファイルのアップロードボタンなども<input>で作ることになります。
このページでは、<input>の種類や使い方、JavaScriptで操作する方法などをまとめて解説します。
inputの種類（type）
<input>を使うときにはtype属性を指定します。これは「どんな入力欄を作るか」を決めるものです。たとえば<input type="text">とすれば「文字列」の入力欄になります。
以下で<input>のtype一覧と、具体的なサンプルを紹介します。
text：1行のテキストフィールド 重要
<input type="text" name="example" placeholder="ここにテキストを入力">
<input type="text">は、1行のテキスト入力欄を作るために使います。nameやplaceholderなどの属性の使い方はのちほど解説します。なお、複数行の入力欄にしたい場合は<textarea>タグを使いましょう。
checkbox：チェックボックス 重要
<label>
<input type="checkbox" name="fruits" value="apple">
りんご
</label>
<label>
<input type="checkbox" name="fruits" value="orange">
みかん
</label>
<label>
<input type="checkbox" name="fruits" value="peach">
もも
</label>
複数の項目を選べる
<input type="checkbox">は、チェックボックスを作るために使います。チェックボックスでは複数の項目にチェックを入れることができます。複数選択可のときや、チェックする項目が1つだけのとき（例「利用規約に同意する」）にtype="checkbox"を使いましょう。
詳しい使い方や、CSSでデザインをカスタマイズする方法は👇のリンク先で解説しています。
詳しくはこちら
radio：ラジオボタン 重要
<label>
<input type="radio" name="fruits" value="apple">
りんご
</label>
<label>
<input type="radio" name="fruits" value="orange">
みかん
</label>
<label>
<input type="radio" name="fruits" value="peach">
もも
</label>
どれか1つだけ選べる
<input type="radio">は、ラジオボタンを作るために使います。ラジオボタンとは、複数の選択肢の中からどれか1つだけを選んでもらうボタンのことです。
詳しくはこちら
file：ファイルのアップロード 重要
<input type="file" name="example" accept="image/jpeg, image/png, image/gif" multiple>
HTMLの<input type="file">は、画像などのファイルのアップロードボタンを設置するために使います。multiple属性を指定すると、複数ファイルの選択が可能になります。accept属性では、選択可能なファイルの形式（拡張子）を指定します。
下記のリンク先でJavaScriptでファイルを操作する方法なども解説しています。
range：レンジ入力欄（スライダー）
小
<input type="range" name="speed" min="1" max="11">
大
<input type="range">は、レンジ入力欄（数値を選べるスライダー）を設置するために使います。minとmax属性により選択できる数値の範囲を決められます。「大きさ」や「速さ」の調整など、ユーザーにざっくりとした数値を選んでもらうときに最適です。
👇のリンク先で詳しい使い方や、CSSでスライダーのデザインを変更する方法などを解説しています。
number：数値の入力欄
<input type="number" name="example" value="133">
数字しか入力できない
<input type="number">は数値の入力欄を設置するために使います。type="text"と違い、数字のみを入力できます。また、入力欄の矢印ボタンや、キーボードの↑ ↓を使って数値を上下に変えられます。
email：メールアドレスの入力欄
<form>
<input type="email" name="example" required>
<button type="submit">送信</button>
</form>
メールアドレス以外を入力して送信するとエラーに
メールアドレスの入力欄を設置するときは<input type="email">を使いましょう。見た目はtype="text"と変わりませんが、type="email"であれば正しいメールアドレスの形式になっているかブラウザがチェックしてくれます。
url：URLの入力欄
<form>
<input type="url" name="example" required>
<button type="submit">送信</button>
</form>
URL以外の文字列を送信しようとするとエラーに
URLの入力欄を設置するときは<input type="url">を使いましょう。見た目はtype="text"と変わりませんが「URLの形式として正しいか」をブラウザがチェックしてくれます。
password：パスワードの入力欄
<form>
<input type="password" value="pass1234">
<button type="submit">送信</button>
</form>
文字列が記号で隠される
<input type="password">はパスワードの入力欄を設置するために使います。入力したテキストは「●」などの記号で隠されます。type="password"を使えば、1Passwordなどのパスワード管理ツールが「パスワードの入力欄であること」を検知できます。
tel：電話番号の入力欄
<form>
<input type="tel" name="example">
<button type="submit">送信</button>
</form>
エラーチェックはしてくれない
<input type="tel">は、電話番号の入力フィールドを設置するために使います。type="tel"を使うと、スマホやタブレットで入力欄にフォーカスが当たったときに、数字入力のキーボードを表示してくれます。
ただし、電話番号の形式が正しいかどうかのチェックはしてくれないので注意しましょう。
date：日付の入力欄
<form>
<input type="date" name="birthday">
<button type="submit">送信</button>
</form>
<input type="date">は、日付の入力欄を作成するために使います。「年」「月」「日」の3つの値を入力するフィールドとなります。Chromeなどのブラウザでは、日付選択時にカレンダー型のピッカーを表示してくれます。
日は不要、年と月だけの入力欄にしたいという場合は<input type="month">を使いましょう。
time：時刻の入力欄
<form>
<input type="time" name="alarm">
<button type="submit">登録</button>
</form>
<input type="time">は、時刻の入力欄を作成するために使います。パソコン版のChromeやFirefoxでは、入力欄の矢印や「↑」「↓」キーで数値を操作できます。iOSではスワイプで時刻を選べるピッカーが表示されます。
color：色の入力欄
<label>色を選択
<input type="color" name="favorite_color">
</label>
<input type="color">はカラーピッカー（色を選ぶ入力欄）を設置するために使います。カラーピッカーのUI（見た目や操作方法）は、ブラウザやOSにより大きく異なることに注意しましょう、
hidden：隠しフィールド
<form>
<input type="text" name="name" placeholder="テキストフィールド">
<!-- 👇type="hidden"は表示されない -->
<input type="hidden" name="user_id">
<button type="submit">送信</button>
<form>
<input type="hidden">は、ユーザーには見えない隠しフィールドを設置するために使います。主に「ユーザーは知る必要がないけど、サーバーには送りたい情報」を格納するために使います。
inputタグの使い方
基本的にフォーム（form）の中で使用する
<input>タグはフォーム部品の1つで、<form>タグの中で使われることが多いです。<form>の中に入れることで、複数の<input>の値をまとめてサーバーに送信することができます。
<form action="送信先のURL">
<div>
<label>
ニックネーム
<input type="text" name="nickname">
</label>
</div>
<div>
<label>
年齢
<input type="number" name="age">
</label>
</div>
<div>
<label>
生年月日
<input type="date" name="dob">
</label>
</div>
<button type="submit">送信</button>
</form>
👆<form> ~ </form>で囲まれた部分が1つのフォームを表します。ユーザーが<input>を入力し、フォームを送信すると、ニックネーム、年齢、生年月日の値がまとめてサーバーに送られます。
✍️メモ
<input>は<form>なしで単独で使用することもできます。- サンプルHTMLの
<div>タグは入力欄どうしの間に改行を入れる目的で使いました。
ラベル（label）と合わせて使おう
何の入力欄なのかを表すテキスト（ラベル）は<label>タグ内に書くようにしましょう。<label>は、テキストを1つ1つの入力欄と紐付けてくれます。
<!--👇文字列をクリックしても無反応-->
<div>
labelなし
<input type="name" name="name">
</div>
<!--👇文字列をクリックするとフォーカス-->
<label>
labelあり
<input type="name" name="name">
</label>
それぞれのテキストをクリック
👆<label>タグに囲まれているテキストをクリック（タップ）すると、紐づく入力欄にフォーカスがあたります。<label>の使用は必須ではありませんが、以下の理由から積極的に使うようにしましょう。
labelタグを使うメリット
- ラベル（
<label>内のテキストや画像など）をクリックしたときに、紐づく<input>にフォーカスがあたる - チェックボックスやラジオボタンなら、ラベルのクリックでチェックが入る
- 読み上げソフトを使っているユーザーが「
<label>のテキストが入力欄の説明であること」を知ることができる（アクセシビリティの向上）
知っておきたいinputタグの属性
入力欄の種類（<input type="◯◯">）により、使用できる属性は異なります。ここでは最低限おさえておきたい、よく使う属性を紹介します。
name：フィールドに名前をつける
<form>
<div>
<label>ニックネーム
<input type="text" name="nickname">
</label>
</div>
<div>
<label>好きな映画
<input type="text" name="movie">
</label>
</div>
<form>
👆name="nickname"により、そのinputタグの名前がnicknameになります。サーバーへ送信したときにnickname=太郎 movie=スパイダーマンのようにどの値が、どの入力欄に対応しているのか分かるようになります。
✍️name属性が指定されていない場合、フォームを送信してもその入力欄の値は送られません。
value：初期値を指定する
value属性は、入力の値となります。フィールドの値はユーザーが入力することになるので基本的には不要ですが、初期値を入れておきたいときに使うと便利です。
<label>名前
<input
type="text"
name="nickname"
value="匿名"
>
<!-- 👆見やすさのためにタグ内で改行してもOK! -->
</label>
👆value="匿名"と入力したことにより、入力欄の初期値が「匿名」になりました。
placeholder：プレースホルダーを指定する
<input
type="text"
name="nickname"
placeholder="ニックネーム"
>
👆placeholder属性に指定された値が、入力欄にうっすらと表示されるようになります。<input type="text">など文字列の入力欄でのみ使えます（たとえばtype="checkbox"では使えません）。
required：入力を必須にする
<form>
<input type="text" name="nickname" required>
<button>送信する</button>
</form>
👆このようにrequiredとだけ書けばOKです。チェックボックスやラジオボタンなら選択が必須になります。
requiredの注意点
- ブラウザのバリデーションを有効にするためには
<form>の中に<input>と送信ボタンを入れる必要があります。 - あくまでもブラウザ上でのバリデーションです。少し詳しい人がやろうと思えば
requiredがついていても空欄で送ることができてしまうので注意しましょう。
なおブラウザのバリデーションでエラーになったときの入力欄のスタイルはCSSで変更できます。
disabled：フィールドを無効にする
<input type="text" name="name1" disabled>
<input type="checkbox" name="name2" value="value" disabled>
<input type="file" name="file" disabled>
クリックしても反応しない
👆disabled属性は、入力欄を無効にするために使います。クリック（タップ）しても何も起きません。「使う意味あるの？」と思うかもしれませんが、たとえば以下のようなシーンで使います。
- 特定の条件を満たしたユーザーのみ入力できるようにする
- フォームの送信中には入力不可にしたい（JavaScriptで
disabledのON/OFFを切り替える）
tabindex：Tabキーを押したときに入力欄にフォーカスするかどうか
<input type="text" name="name1">
<input type="text" name="name2" tabindex="-1">
<input type="text" name="name3">
Tabを押しても2番目の欄はスキップされる
👆通常、キーボードの「Tab」キーを押すと、入力欄やボタンに順番にフォーカスがあたっていきます。tabindex="-1"を指定した入力欄は、フォーカスがスキップされます。
autofocus：ページ読み込み時に自動でフォーカスする
<input type="text" name="nickname" autofocus>
👆autofocus属性を指定すると、ページ読み込み時に自動でその入力欄にカーソルがあたるようになります。基本的に文字列の入力欄でのみ使います。
JavaScriptでinputを操作
<input>は、JavaScriptを使えばより高度な操作ができます。
inputの値を取得する
JavaScript
// 入力欄の値を取得する
document.getElementById("inputのid").value;
👆document.getElementById("inputのid")でinput要素を取得しています。入力欄の値の取得はinput要素.valueで行います。テキストフィールドでもラジオボタンやチェックボックスでもこの方法で値を取得できます。
inputの値を設定する
JavaScript
// 入力欄の値を書き換える
document.getElementById("inputのid").value = "書き換え後の値";
👆input要素.value = ◯◯という形で、現在の値を変更できます。
入力欄にフォーカスをあてる
JavaScript
document.getElementById("inputのid").focus();
👆フォーカスをあてたいinput要素.focus()により、好きなタイミングでフォーカスをあてられます。
逆に入力欄からフォーカスを外すときにはinput要素.blur()を使います。
JavaScriptでinputのイベント処理
input要素.addEventListener(種類, 実行する関数)により、フィールドに入力や変化があったときに処理を実行できます。
入力（input）時に処理を実行
入力時に処理を実行するためにはaddEventListener('input', 実行する関数)を使います。
JavaScript
const inputElem = document.getElementById("inputのid"); // input要素オブジェクト
inputElem.addEventListener('input', (event) => {
console.log(event.target.value); // 入力欄の新しい値を出力
});
👆実行する関数は引数にeventを受け取ります。入力欄の新しい値はevent.target.valueで取得できます。
入力時に文字数を表示するサンプル
👆このサンプルコードでは、入力があったときに文字数をカウントして表示しています。文字数はevent.target.value.lengthで取得できます。
変更（change）時に処理を実行
addEventListener('input', ~ )に似たものにaddEventListener('change', ~ )があります。inputイベントは入力後すぐに発火するのに対し、changeイベントは入力を終えてフォーカスを外したときに発火します。
👆さきほどのサンプルの'input'を'change'に変えたバージョンです。入力後フォーカスを外してから反映されるのが分かると思います。
このようなイベント処理を活用すれば「入力された値が不正な場合にアラートを表示する」のようなことが可能になります。
CSSでinputのスタイルを変更する
<input>はテキストフィールドや、ラジオボタンやチェックボックス、アップロードボタンなどなど、さまざな種類の入力欄を作るときに使われます。たとえば「テキストフィールドのデザインのみを変えたい」というような場合はどうすれば良いのでしょうか？
input[type="◯◯"]セレクタを使う
そのような場合、CSSの「属性セレクタ」と呼ばれるものを使うと便利です。具体的にはinput[type="◯◯"] { ~ }というような指定をします。
CSS
input[type="text"] {
/* このスタイルはtype="text"のinput要素にのみ適用される */
}
👆セレクタがinput[type="text"]なので<input type="text">にのみスタイルが適用されます。
サンプルCSS
input[type="text"] {
width: 100%; /* 幅 */
font-size: 0.95em; /* フォントサイズ */
margin: 1em 0; /* 前後の余白 */
padding: 0.5em; /* テキスト周りの余白 */
border: solid 2px #e3e6ea; /* 線の色 */
border-radius: 4px; /* 角丸 */
}
/* フォーカス時のスタイル */
input[type="text"]:focus {
border-color: #529fff; /* 線の色 */
outline: 0;
}
フォーカスをあてると線の色が変わる
👆テキストフィールドのスタイルのみを変える例です。フォーカス時（カーソルが入力欄にあたっているとき）のスタイルはinput[type="text"]:focus { ~ }という形で指定できます。
このようにinput[type="◯◯"]セレクタを使えば、特定のtypeの<input>のみスタイルを変えることができます。
フォーム内の
<input>にrequired属性を指定すると、入力を必須にすることができます。エラーの表示はブラウザによって違います。