トップ > スキル : Web > HTML5

Web

各要素のリファレンス19

フォーム関連要素(2/4)

input要素(フォーム・コントロール)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
typeがhiddenでなければ、インタラクティブ・コンテンツ
コンテンツモデル
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 禁止(ただし、<input />は表記可)
要素固有のコンテンツ属性 本文で説明
デフォルトスタイル input[type=hidden] {
    display:none;
}

input要素は、さまざまなフォーム・コントロールを表すことができます。HTML5では新たなタイプが規定されていますが、対応していないブラウザでは単なるテキスト・フィールドとして表示されます。
input要素には、多くの固有のコンテンツ属性があります。それらを紹介していきます。

★ typeコンテンツ属性

typeコンテンツ属性によって、そのコントロールの種類が変わります。

■typeコンテンツ属性の値
属性値 種類
hidden 非表示
text テキスト
search 検索
tel 電話
url URL
email 電子メール
password パスワード
datetime 日時
date 日付
month
week
time 時間
datetime-local ローカルの日時
number 数値
range 範囲
color
checkbox チェックボックス
radio ラジオ・ボタン
file ファイル・アップロード
submit サブミット・ボタン
image イメージ・ボタン
reset リセット・ボタン
button ボタン

input要素には、typeコンテンツ属性の他にも数多くのコンテンツ属性が規定されています。しかし、コントロールの種類によって、利用可能なコンテンツ属性が変わってきます。以下に、それぞれのフォーム・コントロールのタイプごとに紹介します。

hidden
種類 非表示
入力データ 任意の文字列
コントロール なし
利用可能なコンテンツ属性 autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にhiddenが指定されると、ユーザに対して非表示として、その内容をスクリプトなしに変更できないようにします。

■利用例
  <input type="hidden" name="usr_id" value="5" />
      

name属性に名前をセットし、valueコンテンツ属性に値をセットしておくことで、フォームがサブミットされた際に、ユーザに見せることなく、サーバにそのデータを送信することができます。ただし、name="_charset_"とした場合は、valueコンテンツ属性は指定できません。name="_charset_"として指定するとvalueコンテンツ属性にそのフォームの文字エンコーディング名がセットされたものとして、サーバに送信されます。

text
種類 テキスト
入力データ 改行なしのテキスト
コントロール テキスト・フィールド
利用可能なコンテンツ属性 autocomplete、list、maxlength、pattern、placeholder、readonly、required、size、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にtextがセットされると、1行テキストの入力フィールドを表します。

■利用例
  <input type="text" name="username" />
    
■レンダリング表示(Firefoxの場合)
input要素

フォーカスをあてると、文字を入力できるようになります。このコントロールに指定できる値に、改行を入れることはできません。つまり、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

search
種類 検索
入力データ 改行なしのテキスト
コントロール 検索・フィールド
利用可能なコンテンツ属性 autocomplete、list、maxlength、pattern、placeholder、readonly、required、size、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にsearchがセットされると、1行テキストの入力フィールドを表し、さらにそれが検索向けであることを表します。

■利用例
  <form action="search.php" method="get">
  	<p>サイト内検索:<input type="search" name="p" /></p>
  </form>
    
■レンダリング表示(Safariの場合)
input要素

基本的にtextタイプのinput要素と、機能上の違いはありません。textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

現状では、MacOX版では、検索用ではテキスト・フィールドの両端に丸みを加えて、スタイリングを変えて表示されます。将来的に、視覚的に単なる文字の入力ボックスなのか、検索用の入力ボックスの違いを狙った規定になっています。

tel
種類 電話
入力データ 改行なしのテキスト
コントロール テキスト・フィールド
利用可能なコンテンツ属性 autocomplete、list、maxlength、pattern、placeholder、readonly、required、size、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にtelがセットされると、1行テキストの入力フィールドを表し、さらにそれが電話番号向けであることを表します。

■利用例
  <p><label>電話番号:<input type="tel" name="tel" /></label></p>
    
■レンダリング表示(Chromeの場合)
input要素

基本的にtextタイプのinput要素と、機能上の違いはありませんし、入力値に制限が設けられることもありません。また、textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

現在では、telタイプのinput要素を区別してレンダリングするブラウザはありませんが、iPhoneでは、入力の際に表示される入力パッドが数字入力モードになります。

url
種類 URL
入力データ 絶対URL(絶対パス)
コントロール テキスト・フィールド
利用可能なコンテンツ属性 autocomplete、list、maxlength、pattern、placeholder、readonly、required、size、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にurlがセットされると、1行テキストの入力フィールドを表し、さらにそれがURL向けであることを表します。

■利用例
  <p><label>URL:<input type="url" name="url" /></label></p>
    
■レンダリング表示(Safariの場合)
input要素

urlタイプのinput要素のテキスト・フィールドに入力できる値は、「http://」から始まる絶対URLのみです。不適切なURLを入力をすると、Operaではエラーであるメッセージを表示します。

■誤った入力をした時のレンダリング表示(Operaの場合)
input要素
email
種類 Eメール
入力データ メールアドレス
コントロール テキスト・フィールド
利用可能なコンテンツ属性 autocomplete、multiple、maxlength、pattern、placeholder、readonly、required、size、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にemailがセットされると、1行テキストの入力フィールドを表し、さらにそれがメールアドレス向けであることを表します。

■利用例
  <p><label>メールアドレス:<input type="email" name="email" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

emailタイプのinput要素のテキスト・フィールドに入力できる値は、メールアドレスのみです。不適切なメールアドレスを入力すると、Operaではエラーであるメッセージが表示されます。

■誤った入力をした時のレンダリング表示(Operaの場合)
input要素

textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。なお、multipleコンテンツ属性をセットすると、複数のメールアドレスを入力できます。なお、multipleコンテンツ属性は、論理属性です。

  <p><label>
  	メールアドレス:<input type="email" name="email" multiple="multiple" />
  </label></p>
    
password
種類 パスワード
入力データ メールアドレス
コントロール テキスト・フィールド(ただし、何が入力されているか分からない)
利用可能なコンテンツ属性 autocomplete、maxlength、pattern、placeholder、readonly、required、size、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にpasswordがセットされると、1行テキストの入力フィールドを表し、さらにそれが機密情報向けであることを表します。テキスト・フィールドに入力しても、ブラウザ上ではそれを読むことはできないように表示されます。

■利用例
  <p><label>パスワード:<input type="password" name="pwd" /></label></p>
    
■レンダリング表示(Firefoxの場合)
input要素

基本的に、textタイプのinput要素と、レンダリング上の違いを除き、機能上の違いはありません。また、textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

datetime
種類 日時
入力データ タイムゾーンがUTCの日時(年、月、日、時、分、秒、小数点以下の秒)
コントロール 日時コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1秒

typeコンテンツ属性の値にdatetimeがセットされると、日付と時間をセットするためのコントロールを表します。

■利用例
  <p><label>希望日時:<input type="datetime" name="dt" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

利用例をOperaでレンダリングすると、日付にプルダウンメニュー、時間を指定するための入力コントロール、最後にUTCという文字が表示されます。
日付を指定するためのプルダウンメニューをクリックすると、カレンダーが表示されて、その日付をクリックすることで日付がセットされます。

input要素

HTML5仕様では、このコントロールが表す日時のタイムゾーンをUTCと定めています。つまり、グリニッジ標準時間と同じで、日本時間と比べて9時間前の日時となります。

date
種類 日付
入力データ タイムゾーンなしの日付(年、月、日)
コントロール 日付コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1日

typeコンテンツ属性の値にdateがセットされると、日付をセットするためのコントロールを表します。

■利用例
  <p><label>希望日:<input type="date" name="dt" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

利用例をOperaでレンダリングすると、日付にプルダウンメニューが表示されます。プルダウンメニューをクリックするとカレンダーが表示され、希望日をクリックするだけで日付がセットされます。

month
種類
入力データ タイムゾーンなしの年月
コントロール 月コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1ヶ月

typeコンテンツ属性の値にmonthがセットされると、年月をセットするためのコントロールを表します。

■利用例
  <p><label>年月:<input type="month" name="mt" /></label></p>
    
■レンダリング表示(Safariの場合)
input要素

利用例をSafariでレンダリングすると、スピンボタンが表示されます。スピンボタンをクリックすると、年月が自動入力されます。Operaでレンダリングすると、カレンダーが表示されて年月がクリックするだけで入力できます。

week
種類
入力データ タイムゾーンなしの年と週番号から構成されるデータ
コントロール 週コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1週間

typeコンテンツ属性の値にweekがセットされると、週をセットするためのコントロールを表します。

■利用例
  <p><label>週:<input type="week" name="wk" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

利用例はOperaでレンダリングしたものです。プルダウンメニューをクリックするとカレンダーが表示され、そこから希望する週を選択すると、週を表す値がセットされます。ただし、このカレンダーから日付を選択することはできません。例えば、下の図のような値が入力されたとします。

input要素

これは、西暦2011年の33番目の州ということを表します。ここで表される週とは、月曜から日曜日で終わる7日間を指します。

time
種類 時間
入力データ タイムゾーンなしの時間(時、分、秒、小数点以下の秒)
コントロール 時間コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1秒

typeコンテンツ属性の値にtimeがセットされると、時間をセットするためのコントロールを表します。

■利用例
  <p><label>時間:<input type="time" name="t" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

利用例は、Operaでレンダリングした結果で、時間入力欄の右にあるスピンボタンをクリックすることで、時と分を調整できます。なお、時間を直接入力もできます。

datetime-local
種類 ローカルの日時
入力データ タイムゾーンなしの日時(年、月、日、時、分、秒、小数点以下の秒)
コントロール 日時コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1秒

typeコンテンツ属性の値にdatetime-localがセットされると、タイムゾーンを持たない日付と時間をセットするためのコントロールを表します。

■利用例
  <p><label>日時:<input type="datetime-local" name="dt" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

datetime-localタイプのコントロールは、タイムゾーンを持たない点を除いて、datetimeタイプと同じになります。datetimeタイプはタイムゾーンがUTCに固定されますので、日本においては使いにくいと言えます。datetime-localタイプであれば、単純に年月日と時分秒のみを扱うことができますので、日本に特化したサイトであれば使いやすいです。

number
種類 数値
入力データ 数値
コントロール テキスト・フィールドまたはスピナー・コントロール
利用可能なコンテンツ属性 autocomplete、list、max、min、readonly、required、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1

typeコンテンツ属性の値にnumberがセットされると、数値をセットするためのコントロールを表します。

■利用例
  <p><label>番号:<input type="number" name="nb" /></label></p>
    
■レンダリング表示(Safariの場合)
input要素

利用例はSafariでレンダリングした結果です。入力欄の右側のスピンボタンで簡単に数値を入力することができます。なお、数値を直接入力することもできます。このコントロールは、マイナス値も指定することができますが、小数点を入れることはできません。
しかし、stepコンテンツ属性を指定することで、小数点の入力が可能となります。

  <p><label>番号:<input type="number" name="nb" step="0.1" /></label></p>
    

上のマークアップであると、0.1刻みで数値を入力することができます。

range
種類 範囲
入力データ 数値
コントロール スライダーコントロールなど
利用可能なコンテンツ属性 autocomplete、list、max、min、step、autofocus、disabled、form、name、type、value
デフォルト・ステップ 1
デフォルト値 50
デフォルトの最小値 0
デフォルトの最大値 100

typeコンテンツ属性の値にrangeがセットされると、数値をセットするためのコントロールを表しますが、それに範囲を設けたものとなります。

■利用例
  <p><label>番号:<input type="range" name="nb" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素
■レンダリング表示(Chromeの場合)
input要素

利用例のように、HTML5仕様がサポートされているブラウザではスライダーとしてレンダリングされます。デフォルトでは、スライダーが表す値の範囲は、0~100でValueコンテンツ属性の値がセットされていなければ、範囲の中間となる50が適用されます。
スライダーだけでは、実際にどんな数値がセットされているか分かりません。そのため、通常はoutput要素とJavaScriptを組み合わせて値を表示させます。シンプルなマークアップは次のようにします。

  <form>
  <p>
  	<label>番号:<input type="range" name="nb" /></label>
  	<output onformchange="value = form.elements.nb.value"></output>
  </p>
  </form>
    

ただ、output要素、onformchangeコンテンツ属性をサポートしているブラウザでないと表示されません。最新のOperaは、サポートしていてその結果が下の図のようになります。

input要素

また、スライダーを縦長に表示するにはスタイルシートで次のように記述します。

  	input[type=range] {
  		height:150px;
  		width:30px;
  	}
    

Operaでのレンダリングの結果は次のようになります。

input要素
color
種類
入力データ 赤、緑、青のコンポーネントを8ビットずつで表したsRGB値
コントロール 色選択
利用可能なコンテンツ属性 autocomplete、list、autofocus、disabled、form、name、type、value
デフォルト値 #000000

typeコンテンツ属性の値にcolorがセットされると、色をセットするためのコントロールを表します。

■利用例
  <p><label>色:<input type="color" name="iro" /></label></p>
    
■レンダリング表示(Operaの場合)
input要素

利用例はOperaでレンダリングした結果です。プルダウンメニューをクリックすると、カラーピッカーが表示され、そこから色を選択できるユーザ・インターフェイスを提供します。
指定可能な値は、#000000~#FFFFFFまでの色を表現でき、それ以外の値がセットされると#000000が適用されます。また、このコントロールでは未指定の状態は許されないので、指定がなければ#000000が適用されます。

checkbox
種類 チェックボックス
入力データ 事前に定義されたリストからの0個以上の値をセット
コントロール チェックボックス
利用可能なコンテンツ属性 checked、required、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にcheckboxがセットされると、チェックボックスを表します。

■利用例
  <label><input type="checkbox" name="ok" value="ok" />同意します。</label>
    
■レンダリング表示(Safariの場合)
input要素

チェックボックスにチェックを入れると、そのチェックボックスのvalueコンテンツ属性の値が、フォームをサブミットした時に、サーバに送信されます。
checkedコンテンツ属性を使うと、初めからチェックをした状態にすることができます。checkedコンテンツ属性は論理属性になります。

  <label>
  <input type="checkbox" name="ok" value="ok" checked="checked" />同意します。
  </label>
    
■レンダリング表示(Safariの場合)
input要素
radio
種類 ラジオ・ボタン
入力データ 指定の値
コントロール ラジオ・ボタン
利用可能なコンテンツ属性 checked、required、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にradioがセットされると、ラジオボタンを表します。

■利用例
  <p>
  	<label><input type="radio" name="sex" value="man" />男性</label>
  	<label><input type="radio" name="sex" value="woman" />女性</label>
  </p>
    
■レンダリング表示(Safariの場合)
input要素

ラジオ・ボタンにチェックを入れると、そのラジオ・ボタンのvalueコンテンツ属性の値が、フォームをサブミットした時に、サーバに送信されます。
ラジオ・ボタンは、選択肢の中から1つだけを選択できるコントロールですから、同じラジオ・ボタンに属するradioタイプのinput要素を2個以上用意する必要があります。同じフォームの中で、name属性の値が同じradioタイプのinput要素が、同じラジオ・ボタンのグループに属します。
checkboxタイプと同様に、checkedコンテンツ属性を指定することで、初めから選択した状態にすることができます。

file
種類 ファイルアップロード
入力データ 0個以上のファイル
コントロール ラベルとボタン
利用可能なコンテンツ属性 checked、required、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にfileがセットされると、選択ファイルのリストを表します。リストには、それぞれのファイルごとに、ファイル名、ファイルの種類、ファイルの本体が含まれます。fileタイプのinput要素は、ファイルのアップロード時に使います。

■利用例
  <form action="test.cgi" method="post" entype="multipart/form-data">
  	<p><label>ファイル選択<input type="file" name="image" /></label></p>
  </form>
    
■レンダリング表示(Firefoxの場合)
input要素
■レンダリング表示(Safariの場合)
input要素

利用例をFirefoxとSafariでレンダリングすると、ブラウザによって表示が異なることが分かります。いずれかの場合でも、該当のボタンをクリックすることで、OSに依存したファイル選択ダイアログボックスが表示され、そこからファイルを選択することになります。
なお、ファイルのデータをアップロードするには、entypeコンテンツ属性にmultipart/form-dataを指定します。もし、この指定がなければ、ファイルの中身をサーバ側で受け取ることができませんので注意します。
fileタイプにacceptコンテンツ属性を使うと、選択可能なファイルの種類を示すことができます。ただ、ブラウザ側でファイルを選択する際に、指定のファイルの種類ではないファイルを選択できないように制限するものではありません。例えば、選択ボタンをクリックして、ファイルの種類をイメージのjpegに限定したいのであれば以下のようにマークアップします。

  <label>ファイル選択
  	<input type="file" name="image" accept="image/jpeg" />
  </label>
    
input要素

Operaは、このacceptコンテンツ属性をサポートしていますので、ファイル選択ウィンドウが開くと、ファイルの種類が「image/jpeg」と最初から指定されます。
また、複数のファイルを選択できるようにするためには、multipleコンテンツ属性を使用します。multipleコンテンツ属性は論理属性です。

submit
種類 サブミット・ボタン
入力データ 指定の値
コントロール ボタン
利用可能なコンテンツ属性 formaction、formenctype、formmethod、formnovalidate、formtarget、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にsubmitがセットされると、サブミット・ボタンを表し、このボタンを押すことでフォームの内容がサーバへ送信されることになります。ボタンに表示される文字はvalueコンテンツ属性の値が適用されます。

■利用例
  <p><input type="submit" value="送信" /></p>
    
■レンダリング表示(Operaの場合)
input要素
image
種類 イメージ・ボタン
入力データ イメージのサイズに対する座標
コントロール クリッカブルなイメージ、またはボタン
利用可能なコンテンツ属性 alt、formaction、formenctype、formmethod、formnovalidate、formtarget、height、src、width、autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にimageがセットされると、サブミット・ボタンを表しますが、ボタンの代わりにイメージを指定することができます。そして、このボタンを押すことでフォームの内容がサーバへ送信されることになります。

■利用例
  <p><input type="image" src="button.png" alt="送信ボタン" /></p>
    
■レンダリング表示(Operaの場合)
input要素

利用例のように、srcコンテンツ属性にイメージのURLを、altコンテンツ属性にテキスト・ラベルを指定します。いずれの属性も必須です。altコンテンツ属性はイメージを見ることができないユーザ向けに、正しい情報を伝えるためのテキストを指定します。
このタイプは、ブラウザによって座標の扱い方が異なります。

reset
種類 リセット・ボタン
入力データ なし
コントロール ボタン
利用可能なコンテンツ属性 autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にresetがセットされると、リセット・ボタンを表します。このボタンを押すと、該当のフォームのすべてのコントロールが初期状態に戻ります。ボタンに表示される文字はvalueコンテンツ属性の値が適用されます。

■利用例
  <p><input type="reset" value="リセット" /></p>
    
■レンダリング表示(Operaの場合)
input要素
button
種類 ボタン
入力データ なし
コントロール ボタン
利用可能なコンテンツ属性 autofocus、disabled、form、name、type、value

typeコンテンツ属性の値にbuttonがセットされると、デフォルトではアクションを伴わないボタンを表します。このタイプのinput要素をアークアップしただけでは、このボタンを押しても何も起こりません。JavaScriptを使った、サブミットやリセット以外のアクションを発生する時に使用します。

■利用例
  <form action="test.cgi" method="post">
  	<p><label>自宅の住所<input type="text" name="addr1" /></label></p>
  	<p>
  		<label>勤務先住所<input type="text" name="addr2" /></label>
  		<input type="button" name="copy" value="自宅の住所をコピー" />
  	</p>
  	<p><input type="submit" value="送信" /></p>
  </form>
  
  <script>
  (function() {
  	ar btn = document.getElementsByName("copy").item(0);
	btn.onclick = function() {
		var addr1 = document.getElementsByName("addr1").item(0);
		var addr2 = document.getElementsByName("addr2").item(0);
		if(addr2.value != "") {
			var res = confirm("コピーして良いですか?");
			if (! res) {return;}
		}
	addr2.value = addr1.value;
	}
  })();
  </script>
    
■レンダリング表示(Operaの場合)
input要素
★ 共通のコンテンツ属性

input要素には、共通で使用できるコンテンツ属性が多く規定されています。しかし、typeコンテンツ属性に指定されたタイプに応じて、利用可能な属性と、利用できない属性がありますので、タイプに応じて使い分ける必要があります。

autocompleteコンテンツ属性

autocompleteコンテンツ属性は、テキスト入力フィールドなどで、オートコンプリート機能の有効/無効を定義できます。このコンテンツ属性は列挙属性ですので、オートコンプリートを有効にするのであればon、無効であればoffをセットします。なお、デフォルト値は有効になり、指定されていない場合はデフォルト値が適用されます。

■利用例
  <p><label>お名前:<input type="text" name="user" autocomplete="off" /></label></p>
    

利用例では、オートコンプリートを無効にしています。
オートコンプリート機能は、以前に入力したデータはブラウザに記憶されており、次回以降、同じフォームにアクセスしたら、過去の入力データの候補が表示され、候補欄を選択することで入力の手間を省けるので、使いやすいユーザインターフェイスを提供します。

input要素
listコンテンツ属性

listコンテンツ属性は、テキスト・フィールドなどにサジェストを定義するために使います。サジェストとは、事前に定義しておいた値の候補をリスト形式でユーザに見せ、そこから選択することができるようにするものです。
リストからの選択だけでなく、ユーザが任意のテキストや値を入力することもできます。見た目はオートコンプリート機能に酷似していますが、HTML内に予めリスト候補を定義している点が異なります。

■利用例
  <form action="test.cgi" method="post">
  	<p>
  		<label>好きなブラウザ:<input type="text" name="browser" ist="blist" /></label>
  		<input type="submit" value="送信" />
  	</p>
  	<datalist id="blist">
  		<option value="Internet Explorer"></option>
  		<option value="Firefox"></option>
  		<option value="Safari"></option>
  		<option value="Opera"></option>
  	</datalist>
  </form>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素

利用例のように、事前に用意する候補はdatalist要素を使ってマークアップします。datalist要素には、idコンテンツ属性をセットして、input要素のlistコンテンツ属性と同じ値をセットします。datalist要素の中に、空文字列ではない値がセットされたoption要素があれば、それがサジェストの選択肢となります。

readonlyコンテンツ属性

readonlyコンテンツ属性は、読み取り専用にするための論理属性です。input要素にこのコンテンツ属性をセットすると、ユーザは値を編集することができなくなります。

■利用例
  <label>URL:
  	<input type="url" name="url" value="http://www.google.com" readonly="readonly" />
  </label>
    

利用例のようにURLの値を予め指定しておき、ユーザはそれを書き換えできないようにすることができます。

sizeコンテンツ属性

sizeコンテンツ属性は、該当のコントロールで入力値が見える文字数を指定します。概ね、コントロールの幅を定義するものですが、CSSのように固定的な幅を指定することはできません。あくまでも、該当のコントロールに入力した文字のレンダリング幅に依存します。そのため、コントロールに入力される文字のフォントに大きく依存することになります。

■利用例
  <p><label>日本語:
  	<input type="text" name="jat" value="こんにちは" size="10" /></label></p>
  <p><label>英語:
  	<input type="text" name="ent" value="HALLO" size="5" /></label></p>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素

利用例のように、日本語は全角文字となるので半角文字の2倍のサイズをセットすると、5文字分の日本語が入力できるテキストボックスの幅となります。また、英語は5文字分の英数文字を入力できるテキストボックスの幅が定義されます。
なお、CSSでinput要素のフォントを指定すると、同じブラウザでもコントロールの幅が基準と変わる場合があります。

requiredコンテンツ属性

requiredコンテンツ属性は、そのinput要素が表すコントロールに値が必須であるかどうかを指定する論理属性です。このコンテンツ属性が指定されたコントロールに値がセットされないと、サブミットするときにエラーが表示されます。

■利用例
  <form action="test.cgi" method="post">
  	<p><label>メールアドレス:
  		<input type="email" name="email" required="required" /></label></p>
  	<p>input type="submit" value="送信" /></p>
  </form>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素
mutipleコンテンツ属性

multipleコンテンツ属性は、該当のコントロールに2つ以上の値を入力できるようにする論理属性です。

■利用例
  <label>メールアドレス:
  		<input type="email" name="email" multiple="multiple" /></label>
    

利用例では、メールアドレスを複数の値をセットすることができるようにしています。

maxlengthコンテンツ属性

maxlengthコンテンツ属性は、コントロールに入力できる最大の文字数を指定します。入力する文字数がmaxlengthコンテンツ属性で指定した文字数に達した場合、それ以上の文字は入力できなくなります。

■利用例
  <label>コメント(15文字まで):
  		<input type="text" name="comment" maxlength="15" /></label>
    

maxlengthコンテンツ属性はバイト数を表すのではなく、純粋に文字数を表します。全角であろうが半角であろうが、それぞれ1文字として扱います。

pattemコンテンツ属性

patternコンテンツ属性は、コントロールに指定可能な値の正規表現を表します。正規表現によって、指定可能な値のフォーマットを詳細に指定することができます。

■利用例
  <form action="test.cgi" method="post">
  	<p><label>日付入力:
  		<input type="text" name="hiduke" pattern="\d{4}\/\d{2}\/\d{2}" /></label></p>
  	<p>input type="submit" value="送信" /></p>
  </form>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素

利用例では、日付の入力を「1985/12/01」の形式で行うためのフォーマットを指定しています。その形式に従っていない入力でサブミットされれば、エラーメッセージが表示されます。
指定できる正規表現は、JavaScriptの正規表現と同じですが、完全一致のみとなり、不完全一致は指定できません。
入力形式をユーザに促したい場合はtitleコンテンツ属性を使って、正規表現のパターンの説明を入れます。

■利用例
  <label>日付入力:
  		<input type="text" name="hiduke" pattern="\d{4}\/\d{2}\/\d{2}" 
  				title="2000-01-01の形式で入力してください。" /></label>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素
minコンテンツ属性とmaxコンテンツ属性

minコンテンツ属性とmaxコンテンツ属性は、入力する値の最小値と最大値を表します。どちらのコンテンツ属性も指定できる値は、typeコンテンツ属性の値によって異なります。

■利用例
  <label>好きな数字(5から10までの間):
  		<input type="number" name="num" min="5" max="10" /></label>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素

利用例では、5から10までの数値しか入力できないように指定しています。日付や数値をある範囲の中から指定してもらいたい時に利用します。

stepコンテンツ属性

stepコンテンツ属性は、コントロールに指定できる値の精度を指定します。例えば、numberタイプのコントロールで、偶数のみの数値だけを入れてほしい場合は、stepコンテンツ属性に2を指定します。ただし、minコンテンツ属性に1がセットしてある場合は、1、3、5…となり奇数しか受け付けなくなります。minコンテンツ属性が指定されていなければ、ステップ・ベースは0となります。
stepコンテンツ属性を指定することで、最小値から見て、stepコンテンツ属性に指定した単位でしか、値を受け付けないようにします。

■利用例
  <label>開始時刻(15分刻み):
  		<input type="time" name="tm" min="08:30" max="18:00" step="900" /></label>
    
■ブラウザでのレンダリング結果(Operaの場合)
input要素

利用例では、8:30から18:00までの範囲を15分間隔で入力できる指定となります。

placeholderコンテンツ属性

placeholderコンテンツ属性は、ユーザに対して、そのテキスト・フィールドに何を入れたらよいかを気付かせるようなヒントを表します。このコンテンツ属性にセットされたヒントは、該当のテキスト・フィールドに何も値がセットされていなければ、そのフィールド内に表示されます。

■利用例
  <input type="search" name="q" placeholder="検索キーワード" />
  <input type="submit" value="送信" />
    
■ブラウザでのレンダリング結果(Safariの場合)
input要素

利用例では、テキストボックスに入力のヒントとなる文字列を表示させています。テキストボックスにフォーカスを当てる(カーソルを入れる)とヒントは消えます。
なお、このコンテンツ属性にセットするヒントは、改行を入れることはできませんので、長い文章には向きません。もし、長い文章であればtitleコンテンツ属性を使うべきです。

autofocusコンテンツ属性

autofocusコンテンツ属性は、ページがロードされたらすぐに該当のコントロールにフォーカスが当たるように指示する論理属性です。ユーザがマウスをクリックするなどして、フォーカスをわざわざ当てる必要がなく、ページが表示されたらすぐに入力できるようにします。

■利用例
  <form action="test.cgi" method="post">
  	<p>
  		<label>ログイン:
  			<input type="password" name="pw" autofocus="autofocus" /></label>
  		<input type="submit" value="送信" />
  	</p>
  </form>
    
■ブラウザでのレンダリング結果(Safariの場合)
input要素
disabledコンテンツ属性

disabledコンテンツ属性は、該当のコントロールを無効にする論理属性です。このコンテンツ属性が指定されたテキスト・フィールドには文字が入力できず、ボタンであれば押すことができなくなります。

■利用例
  <label>ログイン:
  		<input type="password" name="pw" disabled="disabled" /></label>
  <input type="submit" value="送信" disabled="disabled" />
    
■ブラウザでのレンダリング結果(Chromeの場合)
input要素
formコンテンツ属性

formコンテンツ属性は、input要素が表すフォーム・コントロールを指定のform要素と結びつけるために使います。このコンテンツ属性には、結びついたform要素のid属性の値を指定します。

■利用例
  <form action="test.cgi" method="post" id="email-send">
  	<p>
  		<label>メールアドレス:
  			<input type="email" name="email" required="required" /></label>
  	</p>
  </form>
  <p>上のメールアドレスを送信したい場合は・・・</p>
  <p><input type="submit" value="送る" form="email-send" /></p>
    

利用例では、サブミットボタンがフォームの外にマークアップされています。formのidコンテンツ属性の値と、input要素のsubmitタイプのformコンテンツ属性に同じ値をセットすることで、関連付けを行っています。

nameコンテンツ属性

nameコンテンツ属性は、フォームコントロールの名前を表し、フォームをサブミットすると、サーバ側でそのコントロールの値を特定するための名前として使われます。指定する場合は、空文字列はしないように注意します。
また、nameコンテンツ属性は、JavaScriptのgetElementsByName()メソッドや、form要素のelementsIDL属性で、該当の要素を特定するためにも利用されます。

valueコンテンツ属性

valueコンテンツ属性は、該当のinput要素の値を表します。このコンテンツ属性はが指定されていれば、その値がデフォルトでセットされた状態でページが表示されます。

【各要素のリファレンス19】