HTML要素 ・ フォーム
<input>
入力欄
1行のテキストやチェックボックスなど、さまざまな入力欄を作る要素です。type 属性で種類を切り替えます。
01
サンプルコード
HTML
1<p><label>お名前 <input type="text" name="name" placeholder="山田 花子"></label></p>
2<p><label>人数 <input type="number" name="count" min="1" max="10" value="2"></label></p>
3<p><label><input type="checkbox" name="agree"> 利用規約に同意する</label></p>
CSS
1input[type="text"], input[type="number"] {
2 padding: 6px 10px;
3 border: 1px solid #bbb;
4 border-radius: 4px;
5 font: inherit;
6}
02
実行結果
ブラウザでの表示
03
解説
input は、type 属性の値によって見た目と機能が大きく変わる入力欄です。終了タグのない空要素です。
type="email" や type="tel" を使うと、スマートフォンでは入力に合ったキーボードが表示され、ブラウザが簡単な形式チェックもしてくれます。
入力欄には必ずラベルを付けます。placeholder は入力例を示すためのもので、ラベルの代わりにはなりません。
04
応用例・注意点
type の値
| 値 | 説明 |
|---|---|
text | 1行のテキスト |
password | パスワード（入力内容を伏せ字にする） |
email | メールアドレス |
tel | 電話番号 |
url | URL |
search | 検索ボックス |
number | 数値（min・max・step で範囲を指定） |
range | スライドゲージ（つまみで数値を選ぶ） |
date | 年月日 |
month | 年月 |
week | 週（年と何週目か） |
time | 時刻 |
datetime-local | 日時（年月日と時刻） |
color | カラーピッカー |
checkbox | チェックボックス（複数選択） |
radio | ラジオボタン（1つだけ選択） |
file | ファイル添付用のボタン |
submit | 送信ボタン |
reset | リセットボタン（入力内容を初期状態に戻す） |
button | 汎用ボタン（value の文字を表示。動きは JavaScript で付ける） |
image | 画像を使った送信ボタン（src で画像を指定） |
hidden | 画面に表示せず、値だけを送信する |
必須入力にする
required を付けると、空のまま送信しようとしたときにブラウザが警告します。
HTML
1<input type="email" name="email" required autocomplete="email">
ラジオボタンで1つ選ばせる
同じ name のラジオボタンは、1つしか選べません。
HTML
1<label><input type="radio" name="size" value="S"> S</label>
2<label><input type="radio" name="size" value="M" checked> M</label>
スライドゲージとカラーピッカー
range は min・max・step で範囲と刻みを指定します。color はクリックすると色を選ぶ画面が開きます。
HTML
1<label>音量 <input type="range" name="volume" min="0" max="100" step="10" value="50"></label>
2<label>テーマカラー <input type="color" name="theme" value="#b68235"></label>
ボタンの種類
value に書いた文字がボタンに表示されます。ボタンは button 要素でも作れ、中にアイコンなども入れられるため、button のほうがよく使われます。
HTML
1<input type="submit" value="送信する">
2<input type="reset" value="リセット">
3<input type="button" value="ボタン">
4<input type="image" src="button.png" alt="送信する">
ファイルを添付する
type="file" でファイルを送るときは、form に method="post" と enctype="multipart/form-data" が必要です。
HTML
1<form action="/upload" method="post" enctype="multipart/form-data">
2 <input type="file" name="photo" accept="image/*">
3 <button>アップロード</button>
4</form>
注意点
- 01placeholder だけで項目名を示すと、入力を始めた時点で見えなくなります。必ず label を付けます。
- 02フォームで送信するには name 属性が必要です。
- 03type="image" の送信ボタンには、画像の代わりになる alt 属性を必ず付けます。
- 04date・time・color などの見た目は、ブラウザやOSによって異なります。