HTML <input> タグ

定義と使用方法

<input> タグは、データを入力できるフィールドを定義します。

<input> 要素は最も重要なフォーム要素です。

<input> 要素は、以下のいずれかの方法で表示されます。 type 屬性。

以下は異なる入力タイプです：

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">（預設値）
  • <input type="time">
  • <input type="url">
  • <input type="week">

参照 type 屬性、以確認各種輸入類型的範例！

例

3つの入力フィールドを含むHTMLフォーム；2つのテキストフィールドと1つの提出ボタン：

<form action="/action_page.php">
  <label for="fname">名：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提出">
</form>

自分で試してみてください

ヒントとコメント

ヒント：以下の要素に対して常に<label>タグを使用してください：

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

属性

属性 値 説明
accept
  • ファイル拡張子
  • audio/*
  • video/*
  • image/*
  • メディアタイプ

ファイルアップロードを通じて提出されるファイルのタイプを指定します。

ユーザーがファイルインプットダイアログから選択できるファイルタイプのフィルタを指定します（type="file"にのみ適用されます）。
alt テキスト 画像の代替テキストを指定します（type="image"にのみ適用されます）。
autocomplete
  • on
  • off
 <input>要素が自動完成を有効にするかどうかを指定します。
autofocus autofocus ページが読み込まれたときに<input>要素が自動的にフォーカスを取得するかどうかを指定します。
checked checked ページが読み込まれたときに事前に<input>要素を選択する（type="checkbox"やtype="radio"に適用されます）。
dirname inputname.dir 提出されるテキストの方向を指定します。
disabled disabled フォームの<input>要素を無効にします。
form フォームid <input>要素が属するフォームを指定します。
formaction URL フォームの提出時に処理する入力コントロールのファイルのURLを指定します（type="submit"やtype="image"に適用されます）。
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 フォームデータをサーバーに送信する際にどのようにエンコードするかを指定します（type="submit"およびtype="image"に適用されます）。
formmethod
  • get
  • post
 データをaction URLに送信するために使用するHTTPメソッドを定義します（type="submit"およびtype="image"に適用されます）。
formnovalidate formnovalidate フォーム要素を提出する際に検証を行わないことを定義します。
formtarget
  • _blank
  • _self
  • _parent
  • _top
フレーム名 		フォームを提出した後にどこに応答を表示するかを指定します（type="submit"およびtype="image"に適用されます）。
height ピクセル input要素の高さを指定します（type="image"に限定されます）。
list datalist_id input要素を含むプレデファインドオプションを含むdatalist要素を参照します。
max
  • 数字
  • 日付
 input要素の最大値を指定します。
maxlength 数字 input要素が許可する最大文字数を指定します。
min
  • 数字
  • 日付
 input要素の最小値を指定します。
minlength 数字 input要素に必要な最小文字数を指定します。
multiple multiple ユーザーがinput要素に複数の値を入力できることを指定します。
name テキスト input要素の名前を指定します。
pattern 正規表現 input要素の値を検証する正規表現を指定します。
placeholder テキスト input要素の期待される値の短いヒントを指定します。
popovertarget 要素 id 呼び出すポップアップ要素を指定します（type="button"に限定されます）。
popovertargetaction
  • hide
  • show
  • toggle
 ボタンをクリックしたときにポップアップ要素が何が行われるかを指定します（type="button"に限定されます）。
readonly readonly 入力フィールドが読み取り専用であることを指定します。
required required フォームを提出する前に必ず入力フィールドを記入する必要があります。
size 数字 input要素の幅（文字数で指定されます）。
src URL 提出ボタンの画像のURL（type="image"に限定されます）。
step
  • 数字
  • any
 入力フィールド内の有効な数字の間隔を指定します。
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 表示するべき <input> 要素のタイプを指定します。
value テキスト <input> 要素の値を指定します。
width ピクセル type="image" に限定して、<input> 要素の幅を指定します。

グローバル属性

<input> タグは以下のイベント属性をサポートしています HTML 中のグローバル属性。

イベント属性

<input> タグは以下のイベント属性をサポートしています HTML 中のイベント属性。

デフォルトの CSS 設定

なし。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

関連ページ

HTML 課程：

HTML DOM 参考マニュアル：