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

最終更新日:2018年01月31日  (初回投稿日:2013年03月19日)

<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>

「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属性で入力のヒントを示しています。

<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」と入力してみてください。候補のリストが開きます。
対応ブラウザは、該当する文字列がリストにあれば、その選択肢を表示します。

<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="aaa@bbb.com のようなメールアドレスの形式で記入してください。" 
  placeholder="aaa@bbb.com" 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="aaa@bbb.com のようなメールアドレスの形式で記入してください。" 
  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>要素で「ラジオボタン」「チェックボックス」を作りましょう。
ラジオボタンは1つしか選択できないボタン。
チェックボックスは複数選択できるボタンです。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 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 - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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