<input type="入力項目の型"
form="form要素のid名"
name="項目の名前"
readonly
required
value="入力項目に埋め込む値"
autocomplete="自動補完機能の種類"
autofocus
disable
max="入力の最大値"
maxlength="入力の最大長"
min="入力の最小値"
minlength="入力の最小長"
multiple
pattern="正規表現値"
checked
dirname="文字方向"
size="表示項目の幅"
accept="ファイル形式ヒント"
capture="キャプチャメソッド"
placeholder="入力時の候補内容"
list="入力候補のdatalist要素のid名"
src="画像のURL"
width="画像の幅"
height="画像の高さ"
alt="代替テキスト"
step="数字の刻み値"
formaction="処理プログラムURL"
formmethod="フォーム送信時のHTTPメソッド"
formtarget="レスポンス表示位置"
formenctype="送信MIMEタイプ"
formnovalidate>
入力項目を定義します。入力する内容は type 属性で指定します。
主な固有属性
- type
-
入力項目の型を以下の値で指定します。実際に入力するためのコントローラー形状や入力時のチェック機能はブラウザによって異なります。
- button
- 汎用ボタンを指定します。
- checkbox
- 選択式のチェックボックスを指定します。
- color
- 色の入力項目を指定します。ブラウザによってはカラーピッカー表示になります。
- date
- 日付（年月日）の入力項目を指定します。ブラウザによってはカレンダーやホイール表示になります。
- datetime-local
- 日付と時刻（年月日・時分）の入力項目を指定します。ブラウザによってはカレンダーやホイール表示になります。
- email
- メールアドレスの入力項目を指定します。
- file
- ローカル環境に保存されているファイルの選択を指定します。
- hidden
- 可視化されない項目を指定します。使用者には可視化されませんが送信対象になります。
- image
- 画像を使ったボタンを指定します。
- month
- 日付（年月）の入力項目を指定します。ブラウザによってはカレンダーやホイール表示になります。
- number
- 数値の入力項目を指定します。
- password
- パスワードなどの入力項目を指定します。入力された文字は隠された表示になります。
- radio
- 選択可能なラジオボタンを指定します。複数の選択肢からひとつを選択することができます。
- range
- スライド式の範囲を指定可能な項目を指定します。最小値から最大値の範囲で任意の値を入力できます。
- reset
- 入力フォームの値を初期化するボタンを指定します。
- search
- 検索キーワードの入力項目を指定します。
- submit
- 送信ボタンを指定します。
- tel
- 電話番号の入力項目を指定します。
- text
- 任意のテキストの入力項目を指定します。（初期値）
- time
- 時刻（時分）の入力項目を指定します。ブラウザによってはホイール表示になります。
- url
- URL の入力項目を指定します。
- week
- 週間（年週番号）の入力項目を指定します。ブラウザによってはカレンダー表示になります。
- form
- 項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に input 要素を定義する場合に使用します。
- name
- 項目の名前を指定します。送信される値の識別子として使用されます。
- readonly
- 使用者は編集できない項目であることを指定します。type 属性が hidden | range | color | checkbox | radio | ボタン以外の時に指定できます。論理値で値はありません。
- required
- 入力必須の項目であることを指定します。type 属性が hidden | range | color | ボタン以外の時に指定できます。論理値で値はありません。
- value
- 項目に埋め込まれる値を指定します。
- autocomplate
- 入力欄の自動補完機能の種類を空白区切りリストで指定します。type 属性が checkbox | radio | ボタン以外の時に指定できます。
- autofource
- ページが表示された時にフォーカスを設定することを指定します。論理値で値はありません。
- disable
- 項目が無効であることを指定します。論理値で値はありません。
- max
- 最大値を指定します。type 属性が date | month | week | time | datetime-local | range の時に指定できます。
- maxlength
- 値の最大長（文字数）を指定します。type 属性が text | search | url | tel | email | password の時に指定できます。
- min
- 最小値を指定します。type 属性が date | month | week | time | datetime-local | range の時に指定できます。
- minlength
- 値の最短長（文字数）を指定します。type 属性が text | search | url | tel | email | password の時に指定できます。
- multiple
- 複数の値を許可することを指定します。type 属性が email | file の時に指定できます。論理値で値はありません。
- pattern
- 値が有効になるパターンを正規表現で指定します。type 属性が text | search | url | tel | email | password | number の時に指定できます。
- checked
- 項目がチェックされていることを指定します。type 属性が checkbox | radio の時に指定できます。論理値で値はありません。
- size
- 項目の大きさを指定します。type 属性が text | search | url | tel | email | password の時に指定できます。
- accept
- ファイルのアップロード時に選択可能なファイル形式（拡張子）をカンマ（,）区切りリストで指定します。type 属性が file の時に指定できます。
- capture
- キャプチャーするメディアを指定します。type 属性が file の時に指定できます。
- placeholder
- 項目が空の時に表示される内容を指定します。type 属性が text | search | url | tel | email | password | number の時に指定できます。
- list
- 自動補完の選択子が入った datalist 要素の id 名を指定します。type 属性が hidden | password | checkbox | radio | ボタン以外の時に指定できます。
- src
- 画像ファイルのパスを指定します。type 属性が image の時に指定できます。
- width
- 画像の幅を指定します。type 属性が image の時に指定できます。
- height
- 画像の高さを指定します。type 属性が image の時に指定できます。
- alt
- 画像の代替テキストを指定します。type 属性が image の時に指定できます。
- step
- 数値の刻み値を指定します。type 属性が date | month | week | time | datetime-local | range の時に指定できます。
- formaction
- フォームデータを処理する送信先の処理プログラムの URL を指定します。type 属性が image | submit の時に指定できます。
- formmethod
- フォームデータを送信する時に使用する HTTP メソッドを指定します。指定値は、form 要素を参照してください。type 属性が image | submit の時に指定できます。
- formtarget
- フォーム送信後に受け取ったレスポンスを開くフレーム名やウィンドウ名を指定します。指定値は、form 要素を参照してください。type 属性が image | submit の時に指定できます。
- formenctype
- formmethod 属性が post の場合にサーバーに送信するデータの MIME タイプを指定します。指定値は、form 要素を参照してください。type 属性が image | submit の時に指定できます。
- formnovalidate
- フォームデータを送信する時に検証しないことを指定します。type 属性が image | submit の時に指定できます。論理値で値はありません。
使用上の注意事項
使用例
input 要素は、type 属性によって入力内容や表示形式が異なります。
type 属性：button（汎用ボタン）
HTML例
<p>
<input type="button" name="button1" value="button">
</p>
表示例
type 属性：checkbox（チェックボックス）
HTML例
<p>
<label><input type="checkbox" name="checkbox1" value="1" checked>項目1</label>
<label><input type="checkbox" name="checkbox1" value="2">項目2</label>
<label><input type="checkbox" name="checkbox1" value="3">項目3</label>
</p>
表示例
type 属性：color（色）
HTML例
<p>
<input type="color" name="color1">
</p>
表示例
type 属性：date（年月日）
HTML例
<p>
<input type="date" name="date1">
</p>
表示例
type 属性：datetime-local（年月日・時分）
HTML例
<p>
<input type="datetime-local" name="datetime-local1">
</p>
表示例
type 属性：email（メールアドレス）
HTML例
<p>
<input type="email" name="email1">
</p>
表示例
type 属性：file（ファイル）
HTML例
<p>
<input type="file" name="file1">
</p>
表示例
type 属性：hidden（非表示）
HTML例
<p>
<input type="hidden" name="hidden1">
<small>※この項目は非表示になりますが送信対象です。</small>
</p>
表示例
type 属性：image（画像ボタン）
HTML例
<p>
<input type="image" name="image1" src="images/hamaya.png" alt="代替テキスト" width="100" height="100">
</p>
表示例
type 属性：month（年月）
HTML例
<p>
<input type="month" name="month1">
</p>
表示例
type 属性：number（数値）
HTML例
<p>
<input type="number" name="number1" min="1" max="10" value="1">
</p>
表示例
type 属性：password（パスワード）
HTML例
<p>
<input type="password" name="password1" minlength="8" maxlength="16">
</p>
表示例
type 属性：radio（ラジオボタン）
HTML例
<p>
<label><input type="radio" name="radio1" value="1" checked>項目1</label>
<label><input type="radio" name="radio1" value="2">項目2</label>
<label><input type="radio" name="radio1" value="3">項目3</label>
</p>
表示例
type 属性：range（範囲）
HTML例
<p>
<input type="range" name="range1" min="1" max="100" value="50">
</p>
表示例
type 属性：reset（リセットボタン）
HTML例
<p>
<input type="reset" name="reset1" value="reset">
</p>
表示例
type 属性：search（検索キーワード）
HTML例
<p>
<input type="search" name="search1" value="search">
</p>
表示例
type 属性：submit（送信ボタン）
HTML例
<p>
<input type="submit" name="submit1" value="submit">
</p>
表示例
type 属性：tel（電話番号）
HTML例
<p>
<input type="tel" name="tel1" placeholder="03-0000-0000">
</p>
表示例
type 属性：text（テキスト）
HTML例
<p>
<input type="text" name="text1" minlength="8" maxlength="32" size="28" placeholder="8～32文字">
</p>
表示例
type 属性：time（時分）
HTML例
<p>
<input type="time" name="time1" value="10:00">
</p>
表示例
type 属性：url（URL）
HTML例
<p>
<input type="url" name="url1" placeholder="https://sample.com">
</p>
表示例
type 属性：week（年週番号）
HTML例
<p>
<input type="week" name="week1" value="2024-W01">
</p>
表示例
）
