＜input要素＞ - フォームコントロール
公開日:
input要素は、ユーザーが値を入力できる、様々なフォームコントロールを設置するための要素です。
概要
- 名前
- input
- カテゴリー
- Flow content
- Phrasing content
- Interactive content: hidden属性を持たない場合のみ。
- Palpable content: hidden属性を持たない場合のみ。
- Form-associated element
- Labelable element: hidden属性を持たない場合のみ。
- Listed element
- Submittable element
- Resettable element
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- 空要素のため、子ノードを持ちません。
- タグの省略
- 省略できません。
- DOM Interface
- HTMLInputElement
- 仕様書
- https://html.spec.whatwg.org/multipage/forms.html#the-input-element
属性
accept
ファイルアップロードで受け付けるファイルの種類。MIMEタイプや拡張子で指定する。
alt
代替テキスト。
autocomplete
オートフィル機能を有効にするか否か。
autofocus
この属性を付けると、ページをロードした時に、自動でフォーカス状態になる。論理属性。
checked
この属性を付けると、チェック済みの状態になる。論理属性。
dirname
ユーザーが入力した文字の方向をサーバーサイド側で知りたい場合、この属性にキー名を指定する。すると、下記の2種類のうち、どちらかがキー名の値となって送信される。
- ltr
- 左から右。
- rtl
- 右から左。
disabled
この属性を付けると、操作が無効になる。値も送信されない。論理属性。
form
関連付けたいform要素のidを指定する。
formaction
form要素のaction属性と同じ。この属性の方が優先される。フォームに関連付いていないと無視される。
formenctype
form要素のenctype属性と同じ。この属性の方が優先される。
formmethod
form要素のmethod属性と同じ。この属性の方が優先される。
formnovalidate
form要素のnovalidate属性と同じ。この属性の方が優先される。
formtarget
form要素のtarget属性と同じ。この属性の方が優先される。
height
高さ。
inputmode
入力モードのヒントをキーワードで指定する。
- verbatim
- 逐語的ラテン。
- latin
- ラテン。
- latin-name
- ラテン名。
- latin-prose
- ラテン散文。
- full-width-latin
- 全角ラテン。
- kana-name
- かな。
- katakana
- カタカナ。
- numeric
- 数値。
- tel
- 電話番号。
- メールアドレス。
- url
- URLアドレス。
list
関連付けたいdatalist要素のid属性値を指定する。
max
上限値。
maxlength
最大の入力文字数。最大の入力文字数を指定した場合、初期値のままか、または、属性値以下の文字数を入力しないと検証エラーにかかります。
min
下限値。
minlength
最小の入力文字数。最小の入力文字数を指定した場合、初期値のままか、または、属性値以上の文字数を入力しないと検証エラーにかかります。
multiple
この属性を付けると、複数の項目の選択が可能になる。論理属性。
name
値のキー。JavaScriptでDOMを操作する時にも利用する。
pattern
入力値を制限する時の正規表現。
placeholder
プレースホルダー。
readonly
この属性を付けると、入力操作が無効になる。ただし、値は送信される。論理属性。
required
この属性を付けると、入力必須になる。論理属性。
size
入力フォームのサイズ。
src
画像ファイルのアドレス。
step
数値の間隔。
type
フォームコントロールの種類を表すキーワード。初期値であり、欠損値はtext。
- hidden
- 非表示。
- text
- テキスト。
- search
- 検索用ワード。
- tel
- 電話番号。
- url
- URLアドレス。
- メールアドレス。
- password
- パスワード。
- date
- 年月日。
- month
- 年月。
- week
- 年と週。
- time
- 時刻。
- datetime-local
- 年月日と時刻。
- number
- 正確な数値。
- range
- 曖昧な数値。
- color
- 色。
- checkbox
- チェックボックス。
- radio
- ラジオボタン。
- file
- ファイル。
- submit
- 送信ボタン。
- image
- 画像の送信ボタン。name属性を指定すると、末尾に
.x、.yを付けてクリックした座標の情報も送信される。 - reset
- リセットボタン。
- button
- 反応のないボタン。JavaScriptで操作するためのもの。
value
値。
width
高さ。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
基本的な使い方
input要素は、type属性に種類を表すキーワード、name属性にキーとvalue属性に値を指定して、form要素内に配置します。
HTML
<form action="./form.php">
<!-- foo=barというデータが送信される -->
<input type="hidden" name="foo" value="bar">
<button>内容を送信</button>
</form>もしも、form要素内に配置できない場合は、form属性にidを指定することで関連付けられます。
HTML
<!-- 離れた場所にあるform要素 -->
<form action="./form.php" id="syncer">
<button>内容を送信</button>
</form>
<!-- id=syncerのform要素に関連付ける -->
<input form="syncer" type="hidden" name="foo" value="bar">入力必須にする
required属性を付けると、そのフォームを入力必須にできます。
HTML
<!-- 入力しないと送信できない -->
<input type="text" name="foo" required>type属性の種類
input要素は、type属性を変更することで様々なフォームコントロールを作成することができます。各種類の特徴をデモと共に説明していきます。
hidden
非表示のフォームコントロールです。値が決まっていてユーザーに見せる必要がない場合に利用しましょう。このフォームは非表示ですが、ソースコード上には存在しています。パスワードなど、秘密のデータを指定するのは危険なので止めて下さい。
HTML
<input type="hidden" name="category" value="technology">text
汎用なテキスト入力フォームです。type属性を省略した場合も、このフォームになります。
HTML
<input type="text" name="comment">
<input name="comment">search
検索フォームで、検索キーワードを入力するためのフォームコントロールです。ブラウザによっては、1文字でも入力すると、文字を削除するボタンが表示されます。
HTML
<input type="search" name="q">tel
電話番号を入力するためのフォームコントロールです。対応している場合、電話番号と認識されない文字列を入力すると検証エラーになって送信できません。
HTML
<input type="tel" name="phone-number">url
URLアドレスを入力するためのフォームコントロールです。対応している場合、URLアドレスと認識されない文字列を入力すると検証エラーになって送信できません。
HTML
<input type="url" name="url-address">メールアドレスを入力するためのフォームコントロールです。対応している場合、メールアドレスと認識されない文字列を入力すると検証エラーになって送信できません。
HTML
<input type="email" name="mail-address">password
パスワードなど、秘密の情報を入力するためのフォームコントロールです。メソッドをPOSTにしないとURLアドレスで入力した値が見えてしまうため、危険です。デモはあえてGETにしているので確認して下さい。
HTML
<!-- POSTじゃないと危険 -->
<form method="post">
<input type="password" name="secret-key">
</form>date
年月日を入力するためのフォームコントロールです。
HTML
<input type="date" name="ymd">month
年月を入力するためのフォームコントロールです。
HTML
<input type="month" name="ym">week
年と週を入力するためのフォームコントロールです。
HTML
<input type="week" name="yw">time
時刻を入力するためのフォームコントロールです。
HTML
<input type="time" name="hi">datetime-local
年月日と時刻を入力するためのフォームコントロールです。
HTML
<input type="datetime-local" name="ymd-hi">number
数値を入力するためのフォームコントロールです。min属性で下限、max属性で上限、step属性で間隔を調整できます。
HTML
<!-- 1ずつ上下する -->
<input type="number" name="strict-number">
<!-- 3ずつ上下する -->
<input type="number" name="strict-number" step="3">range
数値を入力するためのフォームコントロールです。min属性で下限、max属性で上限、step属性で間隔を調整できます。正確な数値ではなく、大体の数値でいい場合に有用です。省略した場合は、下限は0、上限は100に設定されます。
HTML
<!-- 1ずつ上下する -->
<input type="range" name="loose-number">
<!-- 3ずつ上下する -->
<input type="range" name="loose-number" step="3">color
色を入力するためのフォームコントロールです。ブラウザが対応していれば、カラーピッカーが起動します。値はハッシュ(#)を付けた16進数で送信されます。
HTML
<input type="color" name="hex" value="#D36015">checkbox
選択肢の中から任意の数だけ項目を選択できるチェックボックスのフォームコントロールです。name属性の末尾に[]を付けると、同じキーに対して複数の値を配列形式で受け取れるので便利です。checked属性を付けると、最初から選択状態にできます。label要素で全体を囲むと、テキスト部分もクリック範囲になるのでユーザーに親切です。
HTML
<input type="checkbox" name="my-color[]" value="red">赤
<input type="checkbox" name="my-color[]" value="blue">青
<input type="checkbox" name="my-color[]" value="green" checked>緑
<input type="checkbox" name="my-color[]" value="purple">紫
<input type="checkbox" name="my-color[]" value="brown" checked>茶
<!-- テキスト部分もクリック範囲になる -->
<label><input type="checkbox" name="foo" value="bar">テキスト</label>radio
選択肢の中から1つだけを選ぶ列挙型のフォームコントロールです。checked属性を付けると、最初から選択状態にできます。label要素で全体を囲むと、テキスト部分もクリック範囲になるのでユーザーに親切です。
HTML
<input type="radio" name="my-color" value="red">赤
<input type="radio" name="my-color" value="blue">青
<input type="radio" name="my-color" value="green" checked>緑
<input type="radio" name="my-color" value="purple">紫
<input type="radio" name="my-color" value="brown">茶
<!-- テキスト部分もクリック範囲になる -->
<label><input type="radio" name="foo" value="bar">テキスト</label>file
ファイルをアップロードするためのフォームコントロールです。accept属性にMIMEタイプを指定することで、その種類以外のファイルを拒否できます。multiple属性を付けると、複数のファイルを選択できるようになります。
HTML
<!-- 全てのファイルを受け入れる -->
<input type="file" name="image">
<!-- 複数のファイルを選択できる -->
<input type="file" name="image" multiple>
<!-- 画像ファイルだけを受け入れる -->
<input type="file" name="image" accept="image/*">
<!-- PNGとJPGだけを受け入れる -->
<input type="file" name="image" accept="image/jpeg,image/png">submit
送信用のボタンになります。type属性がsubmitのbutton要素と同じです。value属性がラベルになります。name属性を指定すれば、他のフォームコントロールと同様にvalue属性の値を送信できます。
HTML
<!-- 送信ボタン -->
<input type="submit" value="内容を送信">
<!-- button要素でも同じ -->
<button type="submit">内容を送信</button>
<button>内容を送信</button>
<!-- name属性を追加 -->
<input type="submit" name="button" value="内容を送信">image
submitと同じですが、こちらは画像をボタンにできます。また、画像のどの部分をクリックしたのか、座標の情報も一緒に送信されます。name属性の末尾に.xが付いているのがX座標、.yが付いているのがY座標です。src属性で画像ファイルのアドレスを指定しましょう。
HTML
<!-- foo.xとfoo.yのパラメータが追加される -->
<input
type="image"
src="./image.png"
alt="送信ボタン"
name="foo"
value="bar"
>reset
リセットボタンです。全てのフォームコントロールを初期状態に戻します。type属性がresetのbutton要素と同じです。value属性がラベルになります。
HTML
<!-- 送信ボタン -->
<input type="reset" value="内容を送信">
<!-- button要素でも同じ -->
<button type="reset">内容を送信</button>button
押しても反応がないボタンです。JavaScriptで独自に操作する目的で設置します。type属性がbuttonのbutton要素と同じです。value属性がラベルになります。
HTML
<!-- 反応がないボタン -->
<input type="button" value="反応ないボタン">
<!-- button要素でも同じ -->
<button type="button">反応ないボタン</button>サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜input要素＞ - フォームコントロール</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/input/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>input要素は、フォームコントロールを設置するための要素です。type属性の値によって、様々な入力フォームに変わります。form要素の子要素にすると、サーバーサイドにユーザーが入力した値を送信できます。</p>
<h2>type=text</h2>
<p><input type="text"></p>
<h2>type=checkbox</h2>
<p><input type="checkbox"> チェックボックス</p>
<h2>type=color</h2>
<p><input type="color" value="#2660a1"></p>
</body>
</html>