input 1行入力系

提供: ASCII.jp HTMLリファレンス

(input type="search" から転送)
ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 各種の1行テキストの入力
読み方 インプット

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
リスト化/ラベル付け可能/送信可能/リセット可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

<input 属性="値">

属性 概要
name 文字列 フィールドの名前
value 文字列 デフォルト値
autocomplete 「on」または「off」 オートコンプリート機能のオン/オフ
dirname 文字列 入力された文字列の読み方向を送信する際の名前(type="text"またはtype="search"の時だけ)
list 文字列 datalist要素のID(type="password"の時を除く)
maxlength 数値 入力可能な最大文字数
multiple 論理値 複数の値を入力できるかどうか(type="email"の時だけ)
pattern 文字列 バリデーション用の正規表現
placeholder 文字列 未入力状態の時にヒントとして表示する内容
readonly 論理値 読み込み専用にするかどうか
required 論理値 入力必須にするかどうか

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 type属性の値が「text」、「search」のinput要素は、改行を含まないテキストを入力するためのコントロールを表示します。

 「text」と「search」の違いは、コントロールの見た目です。OS環境によって、検索用のキーワードの入力欄と通常の入力欄の見た目が異なる場合があります。そのような環境では、Webブラウザーによっては「text」と「search」の見た目が違うことがあります。

 type属性の値が「url」、「tel」、「email」のinput要素は、それぞれURL、電話番号、メールアドレスを入力するためのコントロールを表します。入力値には改行は含まれません。

 Firefox 7、Google Chrome 14、Opera 11.5では、URLやメールアドレスとして不正な文字列を送信しようとすると、エラーメッセージが表示されます。

 type属性の値が「password」のinput要素は、入力した文字の代わりに「*」などが表示されるコントロールです。パスワードなど、他人に見られてはならないような情報を入力するのに使います。

オートコンプリート

 autocomplete属性は、オートコンプリート機能(既存の入力値などから、入力候補を補完する機能)をオンにするかどうかを指定します。

 「autocomplete="on"」にすると、オートコンプリート機能がオンになります。一方、「autocomplete="off"」にすると、オートコンプリート機能はオフになります。ワンタイムパスワードなど、オートコンプリート機能があると問題になるような場合は、offを指定します。

 autocomplete属性を指定しない場合、親のform要素のautocomplete属性の値に応じて、オートコンプリート機能のオン・オフが決まります。

バリデーション関係

 maxlength属性で、入力可能な最大文字数を指定できます。例えば、「maxlength="20"」とすると、20文字まで入力できます。

 required属性は論理属性で、この属性を指定すると、そのinput要素は値の入力が必須になります。ただし、筆時点では、Internet Explorer 8/9とSafari 5.1では、required属性の処理は実装されていません。

 pattern属性は、入力可能な文字列のパターンを、JavaScriptの正規表現で指定できます。ただし、常に入力値の最初から最後までとマッチするかどうかが検証されます(暗黙のうちに、正規表現に「^(?:」と「)$」を指定したことになります)。ただし、執筆時点では、Internet Explorer 8/9とSafari 5.1では、pattern属性の処理は実装されていません。

その他

 list属性は、入力候補値のdatalist要素のIDを指定します。type属性の値がpasswordの時は、list属性は指定できません。ただし、執筆時点では、Internet Explore 8/9とSafari 5.1では、list属性の処理が実装されていません。

 placeholder属性では、値が入力されていない時に、入力のヒントとなる文字列を指定します。ただし、執筆時点では、Internet Explorer 8/9はplaceholder属性の処理が実装されていません。

 readonly属性は論理属性で、この属性を指定すると、そのinput要素は読み取り専用になり、値を入力できません。

 size属性では、input要素の幅を文字数(正の整数)で指定します。

 type属性が「text」か「search」の場合は、dirname属性を指定できます。この属性は、入力された文字を左右どちらから読むかを表す文字列を、サーバーに送信するときの名前を指定します。例えば、「dirname="text_dir"」とし、右から左に読む文字列がサーバーに送信された場合、「text_dir」の値が「rtl」になります。ただし、執筆時点では、主要Webブラウザーではdirname属性の処理は実装されていません。
※Internet Explorer、Firefox、Google Chrome、Safari、Opera

 type属性が「email」の場合は、multiple属性を指定できます。multiple属性は論理属性で、この属性を指定した場合、複数のメールアドレスをコンマで区切って入力できます。multiple属性を指定していない場合、Firefox 7、Google Chrome 14、Opera 11.5では、複数のメールアドレスを送信しようとすると、エラーメッセージが表示されます。

サンプル

(body要素の内部のみ掲載)

<form action="server.cgi" method="post">
<p><label>text:<input type="text" name="name" required></label></p>
<p><label>search:<input type="search" name="keyword" maxlength="10"></label></p>
<p><label>url:<input type="url" name="siteurl"></label></p>
<p><label>tel:<input type="tel" name="phone" pattern="0\d+-\d+-\d+"></label></p>
<p><label>email:<input type="email" name="mail" placeholder="メールアドレス"></label></p>
<p><input type="submit" value="送信"></p>
</form>

 各コントロールに以下ような属性を指定しています。

  • 「text」を入力必須にします(required)。
  • 「search」は上限を10文字にします(maxlength="10")。
  • 「tel」は日本の電話番号の形式のみ入力できるようにします(pattern="0\d+-\d+-\d+")。
  • 「email」ではヒントとして「メールアドレス」と表示されるようにします(placeholder="メールアドレス")。

サンプル実行画像

 Internet Explorer 9での表示例です。placeholder属性が実装されていないので、emailの欄にはヒントは表示されません。

 Opera 11.5でフォームを表示し、「text」を未入力にしたまま送信しようとした時の例です。エラーメッセージが表示されています。

Powered by Web Professional

目次