[49-2] input要素でテキストを入力してもらおう ( text, search, tel, url, email, password )

<input>要素の「type属性」で「テキスト入力」のフォーム部品を作りましょう。

このように ↓ テキストフィールドを作り、ユーザに入力してもらう部品です。

<input>の type属性の値のデフォルトは type="text" です。
ですので <input>要素の type属性を省略すれば、値は "text" になります。
（<input type="text"> にしたいなら <input> だけでOK）

下の表はインデックスになっています。各値をクリックすると、該当の項目にジャンプします。

	type属性の値	部品の役割
<input>要素で作る テキスト入力の部品	type="text"（デフォルト）	1行のテキストフィールド
	type="search"　 new	検索キーワードの入力フィールド
	type="tel"　 new	電話番号
	type="url"　 new	URL
	type="email"　 new	メール
	type="password"	パスワード

バリデーション, 複数入力, ヒント表示などの新機能も

テキスト入力用の部品は、type属性以外の属性を使って、さらに機能を追加することができます。

• required属性で「必須項目」にする（未記入だと送信不可のバリデート）
• pattern属性で、「正規表記」による制約（違う形式で書くと送信不可）
• multiple属性で、e-mailアドレスの「複数入力」を可能にする
• placeholder属性で、ヒントになる「入力見本テキスト」を表示しておく
• list属性で、テキストフィールドに選択肢を表示する（<datalist>要素を併用します）
• autofocus属性で、HTMLのロード後すぐに「フォーカス（記入のための選択）」
• form属性で <form>要素の外に出してレイアウトする
• autocomplete属性で「オートコンプリート（履歴から入力予測する）」機能
• readonly属性で「読み取り専用」にする
• disabled属性で「使用不可」にする

<input type="text"> で1行のテキストフィールドを

1行の（改行なしの）テキストフィールドを作ります。
（ちなみに、複数行のテキストフィールドを作るのは<textarea>要素です）
「type="text"」は type属性のデフォルトなので省略できます。

「郵便番号」を入力してもらうサンプル

type="text" で「郵便番号」を入力してもらいます。
pattern属性の正規表記で郵便番号の書式を指定しています。

郵便番号：

<input name="zipCode" size="20" maxlength="8" 
pattern="\d{3}-?\d{4}" title=" 半角英数字で 3桁 ハイフン(-) 4桁 で入力してください" 
placeholder="123-4567">

type属性は省略しています。（デフォなので可）
name属性で部品名をつけておきます。（サーバでの処理用に）
size属性でテキストフィールドの幅を文字数で指定します。
maxlength属性は記入できる最大文字数を指定。これ以上書けなくなります。
pattern属性で郵便番号用の正規表記を指定。
title属性で「どのように記入して欲しいか」を書いておくと親切。（アラートと共に表示されます）
placeholder属性で入力見本も表示しています。

list属性を使ったサンプル

list属性で選択肢を指定でき、入力フィールドをクリック（ブラウザによってはダブルクリック）すると、リストが出てきます。
list属性は、<datalist>要素も併用します。
また、required属性で必須項目に指定したので、何も書かずに（選択せずに）送信ボタンを押すとアラートが出ます。

ご希望商品 :

<form class="sample">
  <label><span>ご希望商品 :</span>
  <input type="text" name="code1" size="30" list="codeType" placeholder="ダブルクリックしてください" required>
  <datalist id="codeType">
    <option value="ロゴ入りTシャツ_半袖"></option>
    <option value="ロゴ入りTシャツ_長袖"></option>
    <option value="ロゴ入りトレーナー"></option>
    <option value="ロゴ入りパーカー"></option>
  </datalist></label>
  <input type="submit" value="送信">
</form>

<input type="search"> で検索フィールド

「search」は新しい値ですが、type="text" とあまり違いはありません。
（type="text" でも検索フォームは作れます）

type="search" も type="text" と同じように、他の属性を使って機能を追加したり、list属性でリストを表示したりできます。

下は list属性を使った type="search" のサンプルです。

支店検索 :

<form class="sample">
  <label><span>支店検索 :</span>
  <input type="search" name="branchSerch" size="30" list="branch" 
  placeholder="ダブルクリックしてください" required>
  <datalist id="branch">
    <option value="新宿支店"></option>
    <option value="渋谷支店"></option>
    <option value="恵比寿支店"></option>
    <option value="品川支店"></option>
  </datalist></label>
  <input type="submit" value="検索">
</form>

<input type="tel"> で電話番号を

電話番号専用の入力欄を作ります。
電話番号は多様なので（数字だけとは限らない）、 type="url" や type="email" と違って特にバリデート機能はありません。pattern属性で「正規表記」をしたほうが良いです。

下は、pattern属性で正規表記を指定したサンプルです。
title属性で「どのように記入して欲しいか」を書き、placeholder属性で入力見本を示しています。

電話番号：

<form class="sample">
  <label>電話番号：<input type="tel" name="telNumber" size="30" maxlength="17" 
  placeholder="12-3456-7890" pattern="\d{1,5}-\d{1,4}-\d{4,5}" 
  title="ハイフン（-）を入れて市外局番から記入してください。" required></label>
  <input type="submit" value="送信">
</form>

pattern属性でバリデーションを厳しくしたので、ハイフン無しで入力してもアラートが出ます。

<input type="url"> でURLを

「絶対URL」専用の入力欄を作ります。
対応するブラウザではデフォルトでバリデーション機能があり、「http://」か「https://」で始まらなければアラートが出ます。
pattern属性の正規表記（pattern="https?://\S+"）でバリデートを強化することもできます。

下のサンプルは、placeholder属性で入力のヒントを示しています。

URL：

<form class="sample">
  <label>URL：<input type="url" name="url" size="30" placeholder="http（またはhttps）から入力" required></label>
  <input type="submit" value="送信">
</form>

対応ブラウザのバリデーション機能により、http:// か https:// で始まる入力でないとアラートが出ます。

下のサンプルは、list属性であらかじめ選択肢を用意しています。（list属性は<datalist>要素も併用します）
下に「spec」と入力してみてください。候補のリストが開きます。
対応ブラウザは、該当する文字列がリストにあれば、その選択肢を表示します。

URL：

<form class="sample">
  <label>URL：<input type="url" name="location" list="urls">
  <datalist id="urls">
   <option label="MIME: Format of Internet Message Bodies" value="https://tools.ietf.org/html/rfc2045">
   <option label="HTML " value="https://html.spec.whatwg.org/">
   <option label="DOM " value="https://dom.spec.whatwg.org/">
   <option label="Fullscreen" value="https://fullscreen.spec.whatwg.org/">
   <option label="Media Session" value="https://mediasession.spec.whatwg.org/">
   <option label="The Single UNIX Specification, Version 3" value="http://www.unix.org/version3/">
  </datalist></label>
  <input type="submit" value="送信">
</form>

<input type="email"> でメールアドレスを

メールアドレス専用の入力欄を作ります。
対応するブラウザではデフォルトでバリデーション機能があり、「@（アットマーク）」が間にないとアラートが出ます。
ただ、これだと「aaa@bbb」と入力しても送信できてしまうブラウザもあるので、 pattern属性で正規表記の指定をしたほうが良さそうです。

下のサンプルは pattern属性で正規表記を指定して バリデート機能を強化しています。
title属性で「どのように記入して欲しいか」を書き、placeholder属性で入力見本を示しています。

メールアドレス：

<form class="sample">
  <label>メールアドレス：<input type="email" name="email" size="30" maxlength="50" 
  pattern=".+@.+\..+" title="[e-mail] のようなメールアドレスの形式で記入してください。" 
  placeholder="[e-mail]" required></label>
  <input type="submit" value="送信">
</form>

pattern属性で「文字列@文字列 .(ドット) 文字列」で入力しないとアラートが出ます。

multiple属性で複数のメールアドレスを入力してもらうこともできます。
（multiple属性は email と file にしか使えません）
ユーザーは「,（カンマ）」で区切ることで、複数のメールアドレスを入力できます

メールアドレス：

<form class="sample">
  <label>メールアドレス：<input type="email" name="email" size="30" maxlength="50" 
  pattern=".+@.+\..+" title="[e-mail] のようなメールアドレスの形式で記入してください。" 
  placeholder="「,（カンマ）」区切りで複数可" required multiple></label>
  <input type="submit" value="送信">
</form>

<input type="password"> でパスワードを

パスワードの入力欄を作ります。これは以前からあった値です。
対応ブラウザは、入力モードを「半角英数字」のみに制限しますので、pattern属性による正規表現（pattern="^[0-9A-Za-z]+$"）は、ほとんどの場合不要です。

パスワード：

<form class="sample">
  <label>パスワード：<input type="password" name="password" size="30" maxlength="18" 
   placeholder="パスワードを入力してください。" required></label>
  <input type="submit" value="送信">
</form>

ブラウザ上では文字列が表示されずに「•••」で表示されます。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「テキスト入力」の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は、同じ<input>要素で「ラジオボタン」「チェックボックス」を作りましょう。
ラジオボタンは1つしか選択できないボタン。
チェックボックスは複数選択できるボタンです。