アップデート 2024年7月17日

★HTML Living Standard リファレンス

山田太郎

テック・リード

当サイトのリンクからサインアップしても、利用者の方に追加料金はかかりませんが、私たちが紹介手数料を受け取る場合があります。

<input> …… フォーム入力欄を表す
Internet Explorer

<input>タグは、フォーム入力欄を表す際に使用します。

input要素は、type属性の値によって様々なフォームコントロールに変化します。

<input type=hidden> …… 非表示データを表す
<input type=text> …… 1行プレーンテキストの入力欄を表す
<input type=search> …… 検索用テキストの入力欄を表す
<input type=tel> …… 電話番号の入力欄を表す
<input type=url> …… URLの入力欄を表す
<input type=email> …… 電子メールアドレスの入力欄を表す
<input type=password> …… パスワードの入力欄を表す
<input type=date> …… 日付の入力欄を表す
<input type=month> …… 月の入力欄を表す
<input type=week> …… 週の入力欄を表す
<input type=time> …… 時刻の入力欄を表す
<input type=datetime-local> …… ローカル日時の入力欄を表す
<input type=number> …… 数値の入力欄を表す
<input type=range> …… レンジ入力欄を表す
<input type=color> …… 色の入力欄を表す
<input type=checkbox> …… チェックボックスの入力欄を表す
<input type=radio> …… ラジオボタンの入力欄を表す
<input type=file> …… 選択ファイルを表す
<input type=submit> …… フォーム送信ボタンを表す
<input type=image> …… 画像ボタンを表す
<input type=reset> …… リセットボタンを表す
<input type=button> …… 汎用ボタンを表す

input要素には、type属性以外にも様々な属性が用意されています。

<input maxlength=文字数> …… 入力を許容する最大文字数を指定する
<input minlength=文字数> …… 入力を許容する最小文字数を指定する
<input size=サイズ> …… 入力欄のサイズを指定する
<input readonly> …… 読み取り専用にする
<input required> …… 入力必須にする
<input multiple> …… 複数選択可にする
<input pattern=入力パターン> …… 入力を許容するパターンを指定する
<input min=数値> …… 入力を許容する最小値を指定する
<input max=数値> …… 入力を許容する最大値を指定する
<input step=ステップ値> …… 入力のステップ値を指定する
<input list=データリストID> …… データリストを紐づける
<input placeholder=入力ヒント> …… 入力の際のヒントを表す

■属性

accept属性: ファイルアップロードで予期されるファイルタイプのヒントを指定します。
どのファイルタイプが受け入れられるかのヒントをユーザーエージェントに提供します。
alt属性: 画像が利用できない場合に使用する置換テキストを指定します。
autocomplete属性: フォーム自動入力機能のヒントを指定します。
checked属性: コントロールがチェックされているかどうかを指定します。
dirname属性: フォーム送信時に要素の方向性を送信するために使用するフォームコントロールの名前を指定します。
disabled属性: フォームコントロールが無効かどうかを指定します。
form属性: 要素をform要素に明示的に関連付けます。
formaction属性: フォーム送信に使用するURLを指定します。
formenctype属性: フォーム送信に使用するエントリリストのエンコードタイプを指定します。
formmethod属性: フォーム送信に使用するバリアントを指定します。
formnovalidate属性: フォーム送信時に入力必須などの制約の検証を省略します。
formnovalidate属性を指定すると、フォーム入力欄に関する制約の検証をしない送信ボタンを作成できます。
formtarget属性: フォーム送信のターゲット先を指定します。
height属性: 縦寸法を指定します。
list属性: オートコンプリートオプションのリストを指定します。
max属性: 最大値を指定します。
maxlength属性: 値の最大長を指定します。
min属性: 最小値を指定します。
minlength属性: 値の最小長を指定します。
multiple属性: 複数の値を許可するかどうかを指定します。
name属性: 要素の名前を指定します。
pattern属性: フォームコントロールの値と一致するパターンを指定します。
placeholder属性: フォームコントロール内に配置されるユーザーに見えるラベルを指定します。
popovertarget属性: ポップオーバー要素を切り替え、表示、または、非表示にする対象にします。
popovertargetaction属性: ターゲットのポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。
readonly属性: ユーザーによる値の編集を許可するかどうかを指定します。
required属性: フォーム送信にコントロールが必要かどうかを指定します。
size属性: コントロールのサイズを指定します。
src属性: リソースのアドレスを指定します。
step属性: フォームコントロールの値と一致する粒度を指定します。
type属性: フォームコントロールのタイプを指定します。
value属性: フォームコントロールの値を指定します。
width属性: 水平寸法を指定します。
title属性: （input要素のtitle属性には、特別なセマンティクスがあります）
input要素にpattern属性が指定されている場合、title属性の値にパターンの説明を指定します。

input要素の状態と使用可能な属性

以下の表は、input要素がどの状態のときに、
コンテンツ属性、IDL属性とメソッド、イベントのどれを適用できるかをまとめたものです。

input要素の状態→ ↓使用可能な属性など	Hidden	Text, Search	URL, Telephone	Email	Password	Date, Month, Week, Time	Local Date and Time	Number	Range	Color	Checkbox, Radio Button	File Upload	Submit Button	Image Button	Reset Button, Button
コンテンツ属性
`accept`	·	·	·	·	·	·	·	·	·	·	·	〇	·	·	·
`alt`	·	·	·	·	·	·	·	·	·	·	·	·	·	〇	·
`autocomplete`	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	·	·	·	·	·
`checked`	·	·	·	·	·	·	·	·	·	·	〇	·	·	·	·
`dirname`	·	〇	·	·	·	·	·	·	·	·	·	·	·	·	·
`formaction`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	·
`formenctype`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	·
`formmethod`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	·
`formnovalidate`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	·
`formtarget`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	·
`height`	·	·	·	·	·	·	·	·	·	·	·	·	·	〇	·
`list`	·	〇	〇	〇	·	〇	〇	〇	〇	〇	·	·	·	·	·
`max`	·	·	·	·	·	〇	〇	〇	〇	·	·	·	·	·	·
`maxlength`	·	〇	〇	〇	〇	·	·	·	·	·	·	·	·	·	·
`min`	·	·	·	·	·	〇	〇	〇	〇	·	·	·	·	·	·
`minlength`	·	〇	〇	〇	〇	·	·	·	·	·	·	·	·	·	·
`multiple`	·	·	·	〇	·	·	·	·	·	·	·	〇	·	·	·
`pattern`	·	〇	〇	〇	〇	·	·	·	·	·	·	·	·	·	·
`placeholder`	·	〇	〇	〇	〇	·	·	〇	·	·	·	·	·	·	·
`popovertarget`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	〇
`popovertargetaction`	·	·	·	·	·	·	·	·	·	·	·	·	〇	〇	〇
`readonly`	·	〇	〇	〇	〇	〇	〇	〇	·	·	·	·	·	·	·
`required`	·	〇	〇	〇	〇	〇	〇	〇	·	·	〇	〇	·	·	·
`size`	·	〇	〇	〇	〇	·	·	·	·	·	·	·	·	·	·
`src`	·	·	·	·	·	·	·	·	·	·	·	·	·	〇	·
`step`	·	·	·	·	·	〇	〇	〇	〇	·	·	·	·	·	·
`width`	·	·	·	·	·	·	·	·	·	·	·	·	·	〇	·
IDL属性とメソッド
`checked`	·	·	·	·	·	·	·	·	·	·	〇	·	·	·	·
`files`	·	·	·	·	·	·	·	·	·	·	·	〇	·	·	·
`value`	default	value	value	value	value	value	value	value	value	value	default/on	filename	default	default	default
`valueAsDate`	·	·	·	·	·	〇	·	·	·	·	·	·	·	·	·
`valueAsNumber`	·	·	·	·	·	〇	〇	〇	〇	·	·	·	·	·	·
`list`	·	〇	〇	〇	·	〇	〇	〇	〇	〇	·	·	·	·	·
`select()`	·	〇	〇	〇※	〇	〇※	〇※	〇※	·	〇※	·	〇※	·	·	·
`selectionStart`	·	〇	〇	·	〇	·	·	·	·	·	·	·	·	·	·
`selectionEnd`	·	〇	〇	·	〇	·	·	·	·	·	·	·	·	·	·
`selectionDirection`	·	〇	〇	·	〇	·	·	·	·	·	·	·	·	·	·
`setRangeText()`	·	〇	〇	·	〇	·	·	·	·	·	·	·	·	·	·
`setSelectionRange()`	·	〇	〇	·	〇	·	·	·	·	·	·	·	·	·	·
`stepDown()`	·	·	·	·	·	〇	〇	〇	〇	·	·	·	·	·	·
`stepUp()`	·	·	·	·	·	〇	〇	〇	〇	·	·	·	·	·	·
イベント
`input` event	·	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	·	·	·
`change` event	·	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	·	·	·
↑使用可能なイベントなど input要素の状態→	Hidden	Text, Search	URL, Telephone	Email	Password	Date, Month, Week, Time	Local Date and Time	Number	Range	Color	Checkbox, Radio Button	File Upload	Submit Button	Image Button	Reset Button, Button

input要素の終了タグについて

HTMLの仕様では、input要素には終了タグ</input>はありません。

■関連項目

<form> …… フォームを表す
<label> …… フォーム入力欄のキャプションを表す
<input> …… フォーム入力欄を表す

<input type=hidden> …… 非表示データを表す
<input type=text> …… 1行プレーンテキストの入力欄を表す
<input type=search> …… 検索用テキストの入力欄を表す
<input type=tel> …… 電話番号の入力欄を表す
<input type=url> …… URLの入力欄を表す
<input type=email> …… 電子メールアドレスの入力欄を表す
<input type=password> …… パスワードの入力欄を表す
<input type=date> …… 日付の入力欄を表す
<input type=month> …… 月の入力欄を表す
<input type=week> …… 週の入力欄を表す
<input type=time> …… 時刻の入力欄を表す
<input type=datetime-local> …… ローカル日時の入力欄を表す
<input type=number> …… 数値の入力欄を表す
<input type=range> …… レンジ入力欄を表す
<input type=color> …… 色の入力欄を表す
<input type=checkbox> …… チェックボックスの入力欄を表す
<input type=radio> …… ラジオボタンの入力欄を表す
<input type=file> …… 選択ファイルを表す
<input type=submit> …… フォーム送信ボタンを表す
<input type=image> …… 画像ボタンを表す
<input type=reset> …… リセットボタンを表す
<input type=button> …… 汎用ボタンを表す
<input maxlength=文字数> …… 入力を許容する最大文字数を指定する
<input minlength=文字数> …… 入力を許容する最小文字数を指定する
<input size=サイズ> …… 入力欄のサイズを指定する
<input readonly> …… 読み取り専用にする
<input required> …… 入力必須にする
<input multiple> …… 複数選択可にする
<input pattern=入力パターン> …… 入力を許容するパターンを指定する
<input min=数値> …… 入力を許容する最小値を指定する
<input max=数値> …… 入力を許容する最大値を指定する
<input step=ステップ値> …… 入力のステップ値を指定する
<input list=データリストID> …… データリストを紐づける
<input placeholder=入力ヒント> …… 入力の際のヒントを表す

<button> …… ボタンを表す
<select> …… セレクトボックスを表す
<datalist> …… 選択肢のデータリストを表す
<optgroup> …… 選択肢グループを表す
<option> …… 選択肢を表す
<textarea> …… 複数行プレーンテキストの入力欄を表す
<output> …… 実行結果の出力を表す
<progress> …… タスクの進行状況を表す
<meter> …… 既知の範囲内の測定値を表す
<fieldset> …… フォームグループを表す
<legend> …… フォームグループのキャプションを表す

山田太郎

山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

全ての投稿者山田太郎

★HTML Living Standard リファレンス

■属性

input要素の状態と使用可能な属性

input要素の終了タグについて

■関連項目

どのカジノが自分に最適か分からないですか?