HTML5フォーム：入力タイプ（パート1） - SitePoint

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

コアポイント

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

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

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

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

ボタン

チェックボックス

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

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

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

type="search"

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

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

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

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

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

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

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

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

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

を使用しましょう。

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

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

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



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

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

注：カスタム検証メッセージは、ブラウザが提供するデフォルトのエラーメッセージが気に入らない？
を使用して、独自のメッセージを設定します。
1つのパラメーターのみを受け入れます。これは、提供するエラーメッセージです。カスタム検証メッセージを設定した場合、値が有効な値になったら、フォームの提出を有効にするには、velidationメッセージを空の文字列（false値）に設定する必要があります。

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

url

<code class="language-html"><label for="email">My email address is:</label>
<input type="email" id="email" name="email"></code>

url入力（

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

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

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

<code class="language-javascript">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 {
      //如果有效，必须设置虚假值，否则将始终出错
      formControl.setCustomValidity('');
  }
}</code>

電話番号（電話番号）

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

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

のFAQ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がHTML5フォーム：入力タイプ（パート1） - SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。