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

最終更新日:-0001年11月30日  (初回投稿日:2013年03月19日)

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

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

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

<input>の type属性は、前回の「type属性の値一覧」でも分かるように い〜っぱい(23個ですが)あります。
が、デフォルトは type="text" です。
なので、<input>要素に type属性を指定しなければ、1行用のテキストフィールドになるんです。1行用のテキストフィールドなら typeは不要ってこと。

新しい値「tel, url, email」には、バリデーション機能

元々あった値は「text」と「password」だけなので、以前は電話番号やメールアドレス、URL も全部 <input type="text"> で作っていたんですが、HTML5から専用の「tel」「url」「email」の値ができました。
この「tel」「url」「email」にはデフォルトで、バリデーション(入力制約があり、それに沿ってないと送信できない)機能がついています。

例えば、
● url は「http://」または「https://」で始まる必要がある。
● email は「@(アットマーク)」が必要。など。

この決まりどおりに入力されないと、対応ブラウザなら、左のようにデフォルトでアラートが出ます。
(クリックでサンプルHTMLが開きます)

tel は、日本語入力でも送信できるので、いまいち。

でも、「pattern属性」を使えば、かなり細かく実用に沿うように指定できます。
pattern属性は、Opera, Chrome, Firefox は対応しています。
(Safari, IE9以下はやっぱダメ:2013年3月記)
pattern属性についてはこちらをご覧ください。)

テキスト関連の新しいtypeの値や、他の新しい属性への対応ブラウザは…

OperaChromeFirefoxは対応しているようです。サンプルはこれらで見てください。
Safari は、Win版もMac版も未対応。IE9以下も同じく未対応でした。(2013年3月記)

バリデーション、複数入力、ヒント表示など、新しい機能もいっぱい

このテキスト入力用の部品は、type属性以外の新しい属性を使って、さらにいろいろ機能を追加することができます。
(各属性については、それぞれのリンクで詳細をご覧ください。)

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

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

1行のテキストフィールドを作ります。
(ちなみに、複数行のテキストフィールドを作るのは<textarea>要素です)

●サンプルソース1
テキストフィールドに「郵便番号」を入力してもらう部品を作りました。
pattern属性で郵便番号用の正規表記を指定し、placeholder属性で入力見本を示しています。
title属性で「どのように記入して欲しいか」を書いておくと親切です。っていうか書こう。
name属性で部品名をつけておきます。ここでは「zipCode」にしました。
size属性でテキストフィールドの幅を文字数で指定します。
maxlength属性は記入できる最大値(文字数)を指定。これ以上書けないようになります。

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

指定どおりに記入されないと、アラートが出て、title属性で書いておいた指示も表示されます。
(クリックでサンプルHTMLが開きます)

ちなみに、type属性のデフォルト値が「text」なので、
「type="text"」無しでも同じ表示になります。

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

●サンプルソース2
list属性で選択肢を指定してみました。
これによってプルダウンメニューのようになるので、これは使える。(全ブラウザが対応すれば)
list属性は、<datalist>要素も併用します。
また、required属性で必須項目に指定しています。

<input type="text" name="code1" size="30" list="codeType" 
placeholder="ダブルクリックしてください" required>
<datalist id="codeType">
<option value="ロゴ入りTシャツ_半袖"></option>
<option value="ロゴ入りTシャツ_長袖"></option>
(略)
</datalist>

入力フィールドをクリック(ブラウザによってはダブルクリック)すると、リストが出てきます。
(クリックでサンプルHTMLが開きます)

required属性で必須に指定したので、何も書かずに(選択せずに)送信ボタンを押すと、アラートが出ます。


検索フィールドを作ります。
「search」も新しい値ですが、HTML記述上はテキストフィールドと同じ機能のようです。

●サンプルソース1(郵便番号検索)
郵便番号による店舗などの検索フィールドを作りました。
pattern属性で郵便番号用の正規表記を指定し、placeholder属性で入力見本を示しています。

<form action="ex.cgi" method="get">
<input type="search" name="zipCodeSearch" size="20" maxlength="8" 
  pattern="\d{3}-?\d{4}" title="3桁+ハイフン(-)+4桁で入力してください。" 
  placeholder="123-4567" required>
<input type="submit" value="検索">
</form>
required属性も指定したので、何も書かずに検索ボタンを押すと、アラートが出ます。
(クリックでサンプルHTMLが開きます)

●サンプルソース2(支店検索)
検索フィールドに、list属性で選択肢を設定。サイト内の支店情報を検索するサンプルを作ってみました。list属性は、<datalist>要素も併用します。

<form action="ex.cgi" method="get">
<span>支店別検索 :</span>
<input type="search" name="branchSerch" size="30" list="branchType" 
placeholder="ダブルクリックしてください" required>
<datalist id="branchType">
<option value="新宿支店"></option>
<option value="渋谷支店"></option>
(略)
</datalist>
<input type="submit" value="検索">
</form>

検索キーワードを<datalist>で指定したものだけに限定する事ができます。
(クリックでサンプルHTMLが開きます)

<input type="tel"> で電話番号を書いてもらおう

電話番号専用の入力欄を作ります。

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

<input type="tel" name="telNumber" size="30" maxlength="17" 
  placeholder="00-0000-0000" pattern="\d{1,5}-\d{1,4}-\d{4,5}" 
  title="市外局番からハイフン(-)を入れて記入してください。" required>

pattern属性でバリデーションを厳しくしたので、ハイフン無しで入力してもアラートが出ます。
(クリックでサンプルHTMLが開きます)

<input type="url"> でURLを書いてもらおう

URL専用の入力欄を作ります。対応するブラウザでは「URL」専用の入力欄であると認識します。

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

<input type="url" name="url" size="30" 
  placeholder="http://www.aaaaa.com/" pattern="https?://\S+" 
  title="http(s)で始まるURLで記入してください。" class="textbox" required>

pattern属性の設定で、
http:// か https:// で始まる入力でないと、アラートが出ます。
(クリックでサンプルHTMLが開きます)

<input type="email"> でメールアドレスを書いてもらおう

メールアドレス専用の入力欄を作ります。対応するブラウザでは「メールアドレス」専用の入力欄であると認識します。

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

<input type="email" name="email" size="30" maxlength="50" pattern=".+@.+\..+" 
  title="aaa@bbbbb.com のようなメールアドレスの形式で記入してください。" 
  placeholder="aaa@bbbbb.com"  required>

pattern属性の設定で「文字列@文字列 .(ドット) 文字列」で入力しないと、アラートが出るようにしています。
(クリックでサンプルHTMLが開きます)

<input type="password"> でパスワード記入欄を作ろう

パスワードの入力欄を作ります。これは以前からあった値です。
ブラウザは「パスワード」入力欄である事を認識します。

●サンプルソース
pattern属性正規表記で、半角英数字のみに制限しています。
これによって、pattern属性の対応ブラウザでは、自動的に入力モードが半角英数字になります。

<input type="password" name="password" size="30" maxlength="18" 
pattern="^[0-9A-Za-z]+$" title="半角英数字で入力してください。" required>

<input type="password">で指定すると、ブラウザ上では文字列が表示されずに
「•••」で表示されます。
(クリックでサンプルHTMLが開きます)

Safariは、新しくできた pattern属性に対応してませんが、デフォルトで英数字の入力しかできなくなるので問題なく使えます。
Operaの Mac版は、日本語入力できちゃうのですが、pattern属性が効くので問題無し。

HTML5のフォームサンプル

HTML5での新要素を使ったサンプルを作りました。
このサンプルでも、やっぱり<input type="">のテキスト入力用の部品の使用頻度が高いです。

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

HTML5からの新要素は、今は Operaほぼ対応しているようです。Chromeもまあまあ検討。
また、IE10 onWin8 も対応しているそうです。
Firefoxは、部分的に対応。
Safari は、これからってかんじ。
(2013年3月記)

次回予告

新しい属性や値って、ブラウザごとに対応状況が違ってて面倒くさいですが、
今回のテキスト関連の部品は、わりと多めのブラウザが対応していてホっとしました。(将来への期待が持てるという意味で)

次回は、同じ<input>要素で、ラジオボタンやチェックボックスを作りましょう。
ラジオボタンは1つしか選択できないボタン。
チェックボックスは複数選択できるボタンです。
これらは昔からある部品なので、安心(笑)して使えます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.