<input>
input（インプット）要素はフォームにおける入力コントロール （入力欄） を表します。type属性の値に入力コントロールの種別を与えることで、様々な入力コントロールを表示させることができます。
type属性で指定したキーワードによって様々な種類の入力・選択用部品となる要素。
| input要素 | 説明 |
|---|---|
| カテゴリー | ・インタラクティブコンテンツ ・サブミット可能なフォーム関連要素 ・パルパブルコンテンツ ・フォーム関連要素 ・フレージングコンテンツ ・フローコンテンツ ・ラベル付け可能な要素 ・リスト可能なフォーム関連要素 ・リセット可能なフォーム関連要素 ・自動大文字化継承フォーム関連要素 type属性値がhiddenでない場合はインタラクティブコンテンツ type属性値が hiddenでない場合はパルパブルコンテンツ type属性値がhiddenでない場合はリスト、ラベル付け、サブミット、リセット可能なフォーム関連要素、自動大文字化継承フォーム関連要素、フォーム関連要素 type属性値がhiddenの場合はリスト、ラベル付け、リセット可能なフォーム関連要素、自動大文字化継承フォーム関連要素、フォーム関連要素 |
| コンテンツモデル | 空 |
| 使用できる場所 | フレージングコンテンツが期待される場所 |
type属性表示例
type属性に指定できるキーワード
| キーワード | フォーム部品の種類 |
|---|---|
| text | 1行のテキスト入力フィールド（defualt） |
| password | パスワード入力フィールド |
| search | 検索用入力フィールド |
| メールアドレス用入力フィールド | |
| url | URL入力用フィールド |
| tel | 電話番号用入力フィールド |
| number | 数値の入力 |
| range | スライダー（おおまかな数値） |
| checkbox | チェックボックス |
| radio | ラジオボタン |
| submit | 送信ボタン |
| reset | リセットボタン |
| button | 汎用ボタン |
| image | 画像の送信ボタン |
| file | 送信するファイの選択 |
| color | 色の入力 |
| date | 日付の入力 |
| month | 年と月の入力 |
| week | 年と週番号の入力 |
| time | 時刻の入力 |
| datetime-local | タイムゾーンなしのローカルな日付と時刻の入力 |
| hidden | 表示されずに送信されるテキスト |
input要素に指定できる属性
| 属性名 | 値の示すもの | 指定可能な値 |
|---|---|---|
| グローバル | すべてのHTML要素で使用できる属性 | グローバル属性一覧を参照 |
| type | フォーム部品の種類 | フォーム部品の種類を表すキーワード |
| accept | type=”file”の時に受付可能なファイルの種類 | MIMEタイプ（カンマ区切り） |
| alt | 画像が利用できない場合に代わりに使用されるテキスト | テキスト（代替テキスト） |
| autocomplete | 要素のオートコンプリート機能のオン／オフまたは自動入力すべき値を示すキーワードなど | autocomplete=”on” または autocomplete=”off” または 自動入力詳細トークン |
| inputmode | 入力モード | キーワード |
| autofocus | ページが読み込まれたら自動的にこの要素にフォーカスする | 論理属性（属性名だけで指定可） |
| checked | チェックボックスまたはラジオボタンが選択済みの状態になっていることを示す | 論理属性（属性名だけで指定可） |
| dirname | 文字表記の方向を示す値を送信するフィルードの名前 | テキスト（空文字は不可） |
| disabled | フォーム部品を無効にする | 論理属性（属性名だけで指定可） |
| form | フォーム部品を特定のform要素（id属性の値で指定）と関連づける | id属性の値 |
| formaction | フォーム送信先のURL | URL（空文字は不可 |
| formenctype | フォームのデータを送信する際のデータ形式をMIMEタイプで指定 | formenctype=”application/x-www-form-urlencoded” または formenctype=”multipart/form-data”または formenctype=”text/plain |
| formmethod | フォームのデータを送信する際のHTTPメソッドを指定 | formmethod=”GET” または formmethod=”POST” |
| formnovalidate | 入力（選択）内容のチェックを行わない | 論理属性（属性名だけで指定可）（HTML5で追加） |
| formtaget | 送信結果を表示させるブランジングコンテキスト（ウィンドウやタブなど）を指定 | ブラウジングコンテキスト名またはキーワード |
| width | 幅 | 整数（負の値は指定不可） |
| height | 高さ | 整数（負の値は指定不可） |
| list | サジェスト機能で使用する選択肢を持ったdatalist要素 | datalist要素のid属性の値（HTML5で追加） |
| max | 最大値 | type属性の値によって異なる |
| maxlength | 最大文字数 | 整数（負の値は指定不可） |
| min | 最小値 | type属性の値によって異なる |
| minlength | 最小文字数 | 整数（負の値は指定不可） |
| multiple | 複数の入力・選択を許可する | 論理属性（属性名だけで指定可）（HTML5で追加） |
| name | フォーム部品の名前 | テキスト |
| pattern | フォーム部品の値にマッチする正規表現パターン | javascriptの正規表現 |
| placeholder | プレースホルダー（入力すべき値がわかるように入力欄内に表示される入力例や簡単な説明） | テキスト（HTML5で追加） |
| readonly | 値の編集（変更）ができないようにする | 論理属性（属性名だけで指定可）（HTML5で追加） |
| required | 入力・選択されていることが必須であることを示す | 論理属性（属性名だけで指定可）（HTML5で追加） |
| size | 幅を文字数で指定 | 整数（負の値は指定不可） |
| src | データのアドレス | URL（空文字は不可） |
| step | この属性で指定した数値の間隔でしか入力できなくなる | 0より大きい浮動小数点数 または step=”any” |
| value | フォーム部品の値 | type属性によって異なる |
inputmode属性に指定できるキーワード
| キーワード | 入力モードの種類 |
|---|---|
| latin | 英字 |
| latin-name | 英字（名前の入力用） |
| latin-prose | 英字（文書の入力用） |
| verbatim | 半角英数字（文書ではなく短い入力用） |
| kana | 全角ひらがな |
| kana-name | 全角ひらがな（名前の入力用） |
| katakana | 全角カタカナ |
| full-width-latin | 全角英字 |
| numeric | 数値（<input type＝”number”>を推奨） |
| tel | 電話番号（<input type＝”tel”>を推奨） |
| Eメール（<input type＝”email”>を推奨） | |
| url | URL（<input type=”url”>を推奨） |
使用例
<p>text:<input type="text" value="テキスト"></p>
<p>password:<input type="password" value="password"></p>
<p>search:<input type="search" name="" value="検索"></p>
<p>email:<input type="email" name="mail"></p>
<p>url:<input type="url" name="" value=""></p>
<p>tel:<input type="tel" name="" value=""></p>
<p>number:<input type="number" name="number" value=""></p>
<p>range:<input type="range" name="" value=""></p>
<p>checkbox:<input type="checkbox" name="" value="" checked></p>
<p>radio:<input type="radio" name="" checked></p>
<p><label>color:<input type="color" name="color" value="#ff0000"></label></p>表示
text:
password:
search:
email:
url:
tel:
number:
range:
checkbox:
radio: