input要素

属性

type属性

コントロールの種類を表します。

区分 属性値 表示例
テキストボックス (未指定)
text
password
チェックボックス checkbox
ラジオボタン radio
ボタン ※1 submit
reset
button
画像 image
ファイル file
  hidden
※1 アイコンを表示するなど、ボタンの外観を変更するにはbutton要素で代用します。
type - input 要素 - HTML | MDN

HTML5以降

HTML5で下表の属性が追加されました。

属性値 特徴 表示例※1 資料
date
  • 年月日の入力
 
datetime
  • 年月日と時刻の入力 (UTCタイムゾーン)
廃止されている。<input type="datetime"> - HTML: HyperText Markup Language | MDN
 
datetime-local
  • 年月日と時刻の入力 (ローカルのタイムゾーン)
 
month
  • 年月の入力
 
week
  • 年と週の入力
 
time
  • 時刻の入力
 
number
  • 浮動小数点数の入力
step属性で非整数を指定しないと、整数しか入力できない。
 
range
  • 正確性が重要ではない値の入力
 
search
  • 改行が自動で除去
  • pattern属性で入力値を検証
 
tel
  • 改行が自動で除去
  • pattern属性で入力値を検証
  • maxlength属性で文字数を制限
 
url
  • 有効な絶対URLであるか検証
  • pattern属性で入力値を検証
  • maxlength属性で文字数を制限
 
email
  • 有効なEメールアドレスであるか検証
 
color
  • 色の指定
 
type - 4.10 Forms — HTML5 HTML5でinput要素に追加された新しいタイプ13連発 - @IT 白石俊平 (2011/03/07)

※1 対応しないブラウザでは適切に表示されず、対応してもブラウザによって異なる表示となります。

各type属性に適用できる属性
  type属性の値
  text url email search tel password file 数値系 日時系
autofocus
disabled
readonly  
size      
minlength      
maxlength      
placeholder        
pattern        
inputmode          
multiple              
min              
max              
step              

name属性

name属性を設定すると、formからsubmitされるときvalue属性とともに、name=valueとして送信されます。

name属性にはマルチバイト文字を含む任意の文字を設定できます。ただし空文字は認められず、設定されたときはその要素は送信されません。

<input type="text" name="名前" value="田中" />
name属性 value属性
name="名前" value=""
name="&" value=""
name="" value=""
id="foo" value=""

value属性

要素に表示する文字列や初期値、またはformが送信する値を設定します。

コード 表示例
<input type="button" value="ABC" />
<input type="text" value="ABC" />

formからvalueの値を送信するには、name属性が設定されている必要があります。

disabled属性

disabledとreadonlyの違い
  disabled readonly
値の表示
値の変更 ×
要素の選択 ×
formからの送信 ×

formからの送信を試行できます。

HTMLの情報サイトから、まとめて検索