HTML5フォーム入力タイプの詳細(xì)な説明とベストプラクティス

コアポイント

• HTML5フォームは、電子メール、検索、日付、時刻、數(shù)字、範(fàn)囲、色などの新しい入力タイプを?qū)毪筏蓼?。これらのタイプは、データ型とより一致するユーザーインターフェイス要素とネイティブデータ検証関數(shù)を提供します。古いブラウザでさえ、これらの新しい入力タイプは、デフォルトで標(biāo)準(zhǔn)のテキストフィールドとして表示されることを除いて、適切に機(jī)能します。
• 検索入力タイプ（type="search"）は、ユーザーに直感的な検索サイトのプロンプトを提供する検索フィールドを提供します。通常、組み込みのクリアボタンが付屬しており、ブラウザまたはオペレーティングシステムの検索ボックスに合わせてスタイルを整えることができます。
• 電子メール入力タイプ（>）は、1つ以上の電子メールアドレスを指定するために使用されます。複數(shù)のコンマ區(qū)切りの電子メールアドレスのブールtype="email"屬性をサポートします。タッチパッドデバイスは通常、このフィールドがフォーカスを取得したときに電子メール入力用に最適化されたキーボードを表示し、一部のブラウザも無効な電子メール入力のエラーメッセージを提供します。 multiple
url入力タイプ（
• ）は、通常のテキストフィールドとして表示される電子メール入力タイプと同様のネットワークアドレスを指定するために使用されますが、タッチスクリーンのネットワークアドレス入力用に最適化されたキーボードを提供します。最新のブラウザは、この入力タイプを使用して、URLの一般的なプロトコル形式を検証します。 type="url"

（以下は、Alexis Goldstein、Louis Lazaris、Estelle Weylが共著した本「HTML5＆CSS3、第2版」から抜粋しています。この本は世界中の店舗で入手できます。ここでは、電子書籍バージョンを購入できます 要素の

屬性にすでに精通している可能性があります。このプロパティは、ユーザーに提示されるフォーム入力のタイプを決定します。このプロパティが省略されている場合、または新しい入力タイプおよび古いブラウザの場合、ブラウザがタイプを理解していない場合、入力はデフォルトのままです。これが、古いブラウザをまだサポートしている場合でも、HTML5フォームを今日でも機(jī)能させるものです。電子メールや検索などの新しい入力タイプを使用する場合、古いブラウザはユーザーに標(biāo)準(zhǔn)テキストフィールドのみを表示します。

input登録フォームは現(xiàn)在、慣れ親しんでいる10個の入力タイプのうち4つを使用しています。チェックボックス、テキスト、パスワード、および送信。これは、HTML5の前に入手可能なすべてのタイプのリストです：type type="text"

ボタン

チェックボックス

• ファイル
• 隠し
• 畫像
• パスワード
• ラジオ
• reset
• 送信
• テキスト
HTML5仕様は、UI要素を提供する9つの新しい入力タイプと、よりデータタイプに準(zhǔn)拠したネイティブデータ検証機(jī)能を提供します。
• 検索
• メール
• url
• tel
• date
• 時間
• 番號
• 範(fàn)囲
• color

HTML5.1およびWhatWG HTML Living Standardには、4つの追加日付入力タイプが含まれています。

dateTime-local
月
週
dateTime（ブラウザはそれをサポートしていません）
新しいタイプのそれぞれとそれらの使用方法についてもっと學(xué)びましょう。
検索（検索）
検索入力タイプ（）は、1つ以上の検索用語を入力するためのシングルラインのテキスト入力コントロールを検索フィールドに提供します。仕様は次のように指摘しています：

type="search"

テキスト狀態(tài)と検索狀態(tài)の違いは主にスタイルです。検索フィールドが通常のテキストフィールドと異なるプラットフォームでは、検索狀態(tài)は、外観がプラットフォームの検索フィールドと一致する可能性があります。通常のテキストフィールド。

ブラウザまたはオペレーティングシステムの検索ボックスとして、多くのブラウザスタイルの検索入力を一貫した方法でスタイルします?，F(xiàn)在、図4.5に示すように、Chrome、Safari、Opera、およびIEは、マウスをクリックしてテキストを入力した後に×アイコンを提供することにより、入力をクリアする機(jī)能を追加しています。日付/時刻の入力タイプは、ChromeとOperaでクリアできます。これは、タイプテキストを含む入力を含むほとんどの入力タイプをクリアする×アイコンも含まれています。

図4.5は、検索入力タイプのスタイルがオペレーティングシステムの検索フィールドに似ています。 Appleデバイスでは、Chrome、Safari、およびOperaの検索フィールドは、デフォルトでコーナーを丸みを帯びており、デバイスの検索フィールドの外観に一致しています。ダイナミックキーボードを備えたタッチパッドでは、デバイスに応じて「GO」ボタンが検索アイコンまたは「検索」という単語として表示されます。標(biāo)準(zhǔn)以外のプロパティを含めると、ChromeとOperaが拡大ガラス/Findアイコンをフォームフィールドに表示します。

を使用して検索フィールドを作成できますが、新しい検索タイプはユーザーを直感的に促し、サイトの検索を行い、ユーザーが慣れるためのインターフェイスを提供することができます。

検索フィールドはありませんが、使用方法の例を次に示します。 results

検索は、すべての新しい入力タイプと同様に、サポートされていないブラウザの通常のテキストボックスとして表示されるため、必要に応じて使用しない理由はありません。

type="text"メールアドレス（電子メールアドレス）HTML5 Herald

電子メールタイプ（）は、1つ以上のメールアドレスを指定するために使用されます。 Boolean 屬性をサポートし、複數(shù)のコンマセパートされた（オプションのスペース）電子メールアドレスを許可します。フォームを変更して、登録者の電子メールアドレスに

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

を使用しましょう。

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

ここで行うように、入力タイプをテキストから電子メールに変更すると、ユーザーインターフェイスに顕著な変更がないことがわかります。ただし、舞臺裏では違いがあります。

タッチパッドデバイスを使用している場合、この変更が明らかになります。電子メールフィールドに焦點(diǎn)を當(dāng)てると、Chromiumを?qū)g行しているiPadやAndroidフォンなどのほとんどのタッチパッドデバイスは、図4.6に示すように、 @シンボル、期間、スペースボタン、カンマではなく、電子メール入力用に最適化されたキーボードを表示します。



Firefox、Chrome、Opera、およびInternet Explorer 10も無効な電子メール入力のエラーメッセージを提供します。1つ以上の電子メールアドレスとして認(rèn)識されないフォームを送信しようとする場合、ブラウザは何が悪いのかを教えてくれます。デフォルトのエラーメッセージを図4.7に示します。

図4.7オペラ（左）とfirefox（右）の電子メールアドレスの誤ってエラーメッセージ

を使用して、獨(dú)自のメッセージを設(shè)定します。
1つのパラメーターのみを受け入れます。これは、提供するエラーメッセージです。カスタム検証メッセージを設(shè)定した場合、値が有効な値になったら、フォームの提出を有効にするには、velidationメッセージを空の文字列（false値）に設(shè)定する必要があります。

.setCustomValidity(errorMsg)殘念ながら、メッセージのコンテンツを変更することはできますが、少なくとも當(dāng)面はその外観によってまだ制限されています。 setCustomValidity

url

<label for="email">My email address is:</label>
<input type="email" id="email" name="email"/>

url入力（

）は、ネットワークアドレスを指定するために使用されます。メールと同じように、それは通常のテキストフィールドとして表示されます。多くのタッチ畫面では、表示されている畫面上のキーボードがネットワークアドレス入力用に最適化され、フォワードスラッシュ（/）および「.com」ショートカットがあります。登録フォームを更新して、URL入力タイプを使用しましょう。
url

の検証 type="url"インターネットエクスプローラー10から始まるすべての最新のブラウザーは、URL入力タイプをサポートし、値がプロトコルで始まらない場合、入力は無効であると報告されます。 URLの一般的なプロトコル形式のみを検証するため、たとえば、q：//example.xyzは、q：//が実際のプロトコルでなくても、有効と見なされます。入力された値をより具體的な形式に適合させる場合は、タグ（またはプレースホルダー）に情報を提供してユーザーに通知し、前述のようにその正確性を確保するために

屬性を使用してください。

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age (required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half birthdays?');
  } else {
      //如果有效，必須設(shè)置虛假值，否則將始終出錯
      formControl.setCustomValidity('');
  }
}

電話番號（電話番號）

電話番號の場合は、電話番號を使用して、Tel入力タイプ（

）を使用します。 URLや電子メールの種類とは異なり、電話タイプは特定の構(gòu)文やパターンを強(qiáng)制しません。文字と數(shù)字（実際には、ラインが壊れたり、キャリッジの戻りが戻ったりすることを除くキャラクターが有効です。これには十分な理由があります。世界中で、すべての國にはさまざまな長さと句読點(diǎn)の有効な電話番號があるため、単一の形式を標(biāo)準(zhǔn)として指定することは不可能です。たとえば、米國では、1（415）555-1212は415.555.1212と同じくらい理解しやすいですが、企業(yè)は（800）のコールノーなどの電話番號で文字を使用する場合があります。特定のフォーマットを奨勵することができます。Placeholderを、入力後に正しい構(gòu)文またはコメントを含むとともに、例とともに含めることができます。さらに、type="tel"屬性を使用して形式を指定できます。 pattern屬性をpattern屬性に含めて、ツールチップを提供し、ネイティブ検証エラーメッセージのユーザーエクスペリエンスを改善します。また、titleメソッドを使用して、より有益なクライアント検証を提供することもできます。 Tel入力タイプを使用する場合、動的タッチパッドは通常、アスタリスクキーやポンドキーを含む電話キーボードを表示します。電話番號以外の目的でTelを使用できます。たとえば、社會保障番號フォーム入力に最適なキーボードかもしれません。 setCustomValidity HTML5フォーム入力タイプ（FAQ）

のFAQ

HTML5フォームの入力タイプのさまざまな種類は何ですか？

HTML5は、さまざまな新しいフォーム入力タイプを?qū)毪筏蓼?。これらには、「色」、「日付」、「DateTime-Local」、「電子メール」、「月」、「番號」、「範(fàn)囲」、「検索」、「Tel」、「TIME」、「URL」、「URL」が含まれます。 」。各入力タイプには特定の目的があり、より適切でユーザーフレンドリーな入力フィールドを提供することにより、ウェブサイトのユーザーエクスペリエンスを大幅に向上させることができます。

HTML5の「日付」入力タイプはどのように機(jī)能しますか？

HTML5の「日付」入力タイプは、ユーザーが日付を入力できるようにする入力フィールドを作成します。日付形式は、ユーザーのブラウザロケールに従ってフォーマットされ、通常、ユーザーの利便性のために日付セレクターが提供されます。ただし、この入力タイプのサポートはブラウザごとに異なります。

古いブラウザでHTML5フォーム入力タイプを表示するとどうなりますか？

サポートしていない古いブラウザでHTML5フォーム入力タイプを表示すると、ブラウザはデフォルトで標(biāo)準(zhǔn)の「テキスト」入力フィールドになります。これは、ユーザーが情報を入力できることを意味しますが、HTML5入力タイプ（「日付」入力タイプの日付セレクターなど）の特定の機(jī)能は利用できません。

HTML5フォームでユーザー入力を検証する方法は？

HTML5は、數(shù)値入力タイプの「必須」、「パターン」、「min」/「max」など、入力検証に複數(shù)の屬性を提供します。これらのプロパティを使用して、フォームが送信される前にユーザー入力が特定の基準(zhǔn)を満たすことを保証できます。

HTML5の「範(fàn)囲」入力タイプは何ですか？

HTML5の「範(fàn)囲」入力タイプは、ユーザーが特定の範(fàn)囲內(nèi)で値を選択できるスライダーを作成します。 「min」および「max」プロパティを使用して範(fàn)囲を指定し、「値」プロパティを使用してデフォルト値を指定できます。

HTML5の「電子メール」入力タイプは、ユーザーエクスペリエンスをどのように強(qiáng)化しますか？

HTML5の「電子メール」入力タイプは、ユーザーが電子メールアドレスを入力できる便利な方法を提供します。入力されたテキストが電子メールアドレス形式であるかどうかを確認(rèn)するための組み込みの確認(rèn)が含まれています。一部のブラウザは、この入力タイプにオートコンプリートを提供する場合があります。

HTML5の「検索」入力タイプの目的は何ですか？

HTML5の「検索」入力タイプは、検索フィールド向けに設(shè)計されています。この入力タイプは、ワンクリックで検索ボックスをクリアする、最新の検索結(jié)果をユーザーに表示するなど、検索固有の機(jī)能を提供できます。

HTML5で「番號」入力タイプを使用する方法は？

HTML5の「番號」入力タイプにより、ユーザーはデジタル入力を入力できます。 MINおよびMAXプロパティを使用して、許容可能な數(shù)値を指定し、「ステップ」プロパティを使用してステップ値を指定できます。

HTML5の「Tel」入力タイプは何ですか？

HTML5の「Tel」入力タイプは、電話番號を含む入力フィールドに使用されます。ただし、入力を確認(rèn)しないため、検証のためにJavaScriptまたは同様の手法を使用する必要があります。

HTML5の「URL」入力タイプはどのように機(jī)能しますか？

HTML5の「URL」入力タイプは、URLを含む入力フィールドに使用されます。入力されたテキストがURL形式であるかどうかを確認(rèn)するための組み込みの確認(rèn)が含まれています。一部のブラウザは、この入力タイプにオートコンプリートを提供する場合があります。

以上がHTML5フォーム：入力タイプ（パート1） - SitePointの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。