HTML

<input> type - テキスト型

詳細を開く 詳細を閉じる

<input>type属性 - テキスト型

テキスト型
textテキストボックス
passwordパスワード
number数値
emailメールアドレス
urlURL
tel電話番号
search検索語
ボタン型
submit送信ボタン
resetリセットボタン
button一般のボタン
image画像ボタン(送信)
特殊型
radioラジオボタン
checkboxチェックボックス
hidden隠しエリア
fileファイル送信
range数値レンジ
colorカラーパレット
日付型
date日付
datetime日付と時刻
datetime-localローカルタイム
month
time時刻
week

テキスト型の基本的な属性

# 属性 説明
必須 type 「text」の場合のみ、デフォルトであるので省略可能。
name サーバにデータを受け取る場合の識別名になります。
1つのフォームの中で一意である必要があります。
オプション placeholder テキストボックス内にユーザに対するヒントを表示します。
何かを入力すると消えます。
value 初期値を指定します。
placeholderと共に使用した場合valueが優先されますが、
入力内容を削除した場合placeholderの内容が表示されます。
maxlength 入力可能な最大の長さを指定します。
size テキストボックスの見た目の長さを指定します。
ただし、あくまでも見た目だけであり、
maxlength属性を指定しない場合は無制限に入力可能です。
required 入力必須になります。
readonly 読取専用になります。
詳しくは、読取専用と無効を参照。
disabled 無効になります。
詳しくは、読取専用と無効を参照。

text : テキストボックス

# 属性 説明
必須 name サーバ側の識別名
例1 type 通常、type属性は必須ですが、
「text」がデフォルトであるので、特に指定する必要はありません。
例2 type属性を指定している例です。
例3 placeholder ヒント
例4 value 初期値
例5 maxlength 入力可能な最大長
例6 size 見た目の長さ
例7 required 入力必須
例8 readonly 読取専用
例9 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
例1: <input name="t1"><br><br>
例2: <input name="t2" 
		   type="text"><br><br>
例3: <input name="t3" 
		   placeholder="入力してください。"><br><br>
例4: <input name="t4" 
		   value="初期値です。"><br><br>
例5: <input name="t5" 
		   maxlength="3" placeholder="最長3文字"><br><br>
例6: <input name="t6" 
		   size="10" placeholder="見た目10文字"><br><br>
例7: <input name="t7" 
		   required placeholder="入力必須"><br><br>
例8: <input name="t8" 
		   readonly value="読取専用"><br><br>
例9: <input name="t9" 
		   disabled value="無効"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

password : パスワード

  • パスワード用のテキストボックスです。
  • 入力した文字が●で表され、周りにいる人には見えません。
  • ただし、見えないのは見た目だけで、PC内部でのデータの取り扱いや、データが送信される場合には、平文(暗号化されていない状態)で送られていることに注意しましょう。
  • パスワードなど重要なデータを送る場合、HTTPサーバなどにURLのログが残るので、GETメソッドを使うべきではありません。<form>要素のmethod属性は「POST」にしましょう。詳細は、こちらを参照。
  • また、プロトコルはHTTPではなく、HTTPSを使うことが望ましいでしょう。
  • 以下は属性の一覧です。詳細は基本的な属性も参照。
# 属性 説明
必須 type 「password」を指定
name サーバ側の識別名
例2 placeholder ヒント
例3 value 初期値
例4 maxlength 入力可能な最大長
例5 size 見た目の長さ
例6 required 入力必須
例7 readonly 読取専用
例8 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="POST">
	
例1: <input type="password" name="p1"><br><br>
例2: <input type="password" name="p2" 
		   placeholder="パスワードを入力"><br><br>
例3: <input type="password" name="p3" 
		   value="1234"><br><br>
例4: <input type="password" name="p4" 
		   maxlength="3" placeholder="最長3文字"><br><br>
例5: <input type="password" name="p5" 
		   size="10" placeholder="見た目10文字"><br><br>
例6: <input type="password" name="p6" 
		   required placeholder="入力必須"><br><br>
例7: <input type="password" name="p7" 
		   readonly value="読取専用"><br><br>
例8: <input type="password" name="p8" 
		   disabled value="無効"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

number : 数値

  • 数値用のテキストボックスです。
  • HTML5で追加された機能です。
  • デフォルトでは整数しか入力できませんが、step属性を指定することで、小数も入力できます。
  • minmax属性で、入力可能な最小値/最大値を指定できます。
  • マイナス値も入力できます。(ただし、min属性の範囲内であること)
  • 数値を入力する場合、「range : 数値レンジ」を使った方が使いやすくなる場合もあります。
  • 以下は属性の一覧です。詳細は基本的な属性も参照。
# 属性 説明
必須 type 「number」を指定
name サーバ側の識別名
例2 placeholder ヒント
例3 min 入力可能な最小値を設定します。
例4 max 入力可能な最大値を設定します。
例5 min max 入力可能な最小値と最大値を設定します。
例6 step ステップを「10」を設定しているので、10の倍数のみ入力できます。
例7 ステップを「0.1」を設定しているので、小数点以下1桁の数値が入力できます。
例8 ステップを「0.05」を設定しているので、0.05刻みの数値が入力できます。
また、minmaxも指定しています。
例9 value 初期値
例10 required 入力必須
例11 readonly 読取専用
例12 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
例1: <input type="number" name="n1"><br><br>
例2: <input type="number" name="n2" 
		   placeholder="数値を入力"><br><br>
例3: <input type="number" name="n3" 
		   min="10" placeholder="10以上"><br><br>
例4: <input type="number" name="n4" 
		   max="10" placeholder="10以下"><br><br>
例5: <input type="number" name="n5" 
		   min="-10" max="10" placeholder="-10以上10以下"><br><br>
例6: <input type="number" name="n6" 
		   step="10" placeholder="10の倍数"><br><br>
例7: <input type="number" name="n7" 
		   step="0.1" placeholder="小数点1桁"><br><br>
例8: <input type="number" name="n8" 
		   min="0" max="0.5" step="0.05" placeholder="0以上0.5以下、0.05刻み"><br><br>
例9: <input type="number" name="n9" 
		   value="10" placeholder="数値を入力"><br><br>
例10: <input type="number" name="n10" 
			required placeholder="入力必須"><br><br>
例11: <input type="number" name="n11" 
			readonly value="10"><br><br>
例12: <input type="number" name="n12" 
			disabled value="10"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

email : メールアドレス

  • メールアドレス用のテキストボックスです。
  • HTML5で追加された機能です。
  • @」を含んだ文字列のみが許可されます。
  • 複数のメールアドレスを入力するにはmultiple属性を指定して「 , (カンマ)」で区切ります。
  • 以下は属性の一覧です。詳細は基本的な属性も参照。
# 属性 説明
必須 type 「email」を指定
name サーバ側の識別名
例2 placeholder ヒント
例3 multiple 複数のメールアドレスが入力可能になります。
それぞれのアドレスは、カンマで区切ります。
なお、multiple属性を指定しないで、カンマを入力すると警告が出ます。
例4 value 初期値
例5 maxlength 入力可能な最大長
例6 size 見た目の長さ
例7 required 入力必須
例8 readonly 読取専用
例9 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
例1: <input type="email" name="e1"><br><br>
例2: <input type="email" name="e2" 
		   placeholder="メールアドレスを入力"><br><br>
例3: <input type="email" name="e3" 
		   multiple placeholder="カンマで区切る"><br><br>
例4: <input type="email" name="e4" 
		   value="@"><br><br>
例5: <input type="email" name="e5" 
		   maxlength="10" placeholder="最長10文字"><br><br>
例6: <input type="email" name="e6" 
		   size="10" placeholder="見た目10文字"><br><br>
例7: <input type="email" name="e7" 
		   required placeholder="入力必須"><br><br>
例8: <input type="email" name="e8" 
		   readonly value="読取専用"><br><br>
例9: <input type="email" name="e9" 
		   disabled value="無効"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

url : URL

  • URL用のテキストボックスです。
  • HTML5で追加された機能です。
  • プロトコルID(「http:」、「https:」、「ftp:」など)」から始まる文字列のみが許可されます。
  • エンドユーザが混乱しやすいため、初期値value="http://"などを指定しておいた方が良いでしょう。
  • 以下は属性の一覧です。詳細は基本的な属性も参照。
# 属性 説明
必須 type 「url」を指定
name サーバ側の識別名
例2 placeholder ヒント
例3 value 初期値
例4 maxlength 入力可能な最大長
例5 size 見た目の長さ
例6 required 入力必須
例7 readonly 読取専用
例8 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
例1: <input type="url" name="u1"><br><br>
例2: <input type="url" name="u2" 
		   placeholder="URLを入力"><br><br>
例3: <input type="url" name="u3" 
		   value="http://"><br><br>
例4: <input type="url" name="u4" 
		   maxlength="10" placeholder="最長10文字"><br><br>
例5: <input type="url" name="u5" 
		   size="10" placeholder="見た目10文字"><br><br>
例6: <input type="url" name="u6" 
		   required placeholder="入力必須"><br><br>
例7: <input type="url" name="u7" 
		   readonly value="読取専用"><br><br>
例8: <input type="url" name="u8" 
		   disabled value="無効"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

tel : 電話番号

  • 電話番号用のテキストボックスです。
  • HTML5で追加された機能です。
  • デフォルトのチェックでは、数字以外にもアルファベットや日本語も許可されます
  • よって、運用上はJavaScriptなどでチェックを追加する必要があるでしょう。
  • 以下は属性の一覧です。詳細は基本的な属性も参照。
# 属性 説明
必須 type 「tel」を指定
name サーバ側の識別名
例2 placeholder ヒント
例3 value 初期値
例4 maxlength 入力可能な最大長
例5 size 見た目の長さ
例6 required 入力必須
例7 readonly 読取専用
例8 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
例1: <input type="tel" name="t1"><br><br>
例2: <input type="tel" name="t2" 
		   placeholder="電話番号を入力"><br><br>
例3: <input type="tel" name="t3" 
		   value="初期値です。"><br><br>
例4: <input type="tel" name="t4" 
		   maxlength="10" placeholder="最長10文字"><br><br>
例5: <input type="tel" name="t5" 
		   size="10" placeholder="見た目10文字"><br><br>
例6: <input type="tel" name="t6" 
		   required placeholder="入力必須"><br><br>
例7: <input type="tel" name="t7" 
		   readonly value="読取専用"><br><br>
例8: <input type="tel" name="t8" 
		   disabled value="無効"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>
  • 検索語用のテキストボックスです。
  • HTML5で追加された機能です。
  • 以下は属性の一覧です。詳細は基本的な属性も参照。
# 属性 説明
必須 type 「search」を指定
name サーバ側の識別名
例2 placeholder ヒント
例3 value 初期値
例4 maxlength 入力可能な最大長
例5 size 見た目の長さ
例6 required 入力必須
例7 readonly 読取専用
例8 disabled 無効

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
例1: <input type="search" name="s1"><br><br>
例2: <input type="search" name="s2" 
		   placeholder="検索語を入力"><br><br>
例3: <input type="search" name="s3" 
		   value="初期値です。"><br><br>
例4: <input type="search" name="s4" 
		   maxlength="10" placeholder="最長10文字"><br><br>
例5: <input type="search" name="s5" 
		   size="10" placeholder="見た目10文字"><br><br>
例6: <input type="search" name="s6" 
		   required placeholder="入力必須"><br><br>
例7: <input type="search" name="s7" 
		   readonly value="読取専用"><br><br>
例8: <input type="search" name="s8" 
		   disabled value="無効"><br><br>

<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ