HTML5は、検証、UI、およびモバイルキーボードレイアウトを改善することにより、フォーム機(jī)能とユーザーエクスペリエンスを強(qiáng)化する新しい入力タイプを?qū)毪筏蓼筏俊?1.メールアドレスを検証し、複數(shù)のエントリをサポートします。 2. URLは、有効なWebアドレスをチェックし、URL最適化されたキーボードをトリガーします。 3。數(shù)値では、増分/減少制御と範(fàn)囲の制限を備えた數(shù)値入力が許可されます。 4.範(fàn)囲は、定義された範(fàn)囲內(nèi)の値を選択するためのスライダーを提供します。 5。日付、時刻、および関連するタイプは、日付と時刻の入力を容易にするためにビルトインピッカーを提供します。 6.検索Auto Completeなどの機(jī)能を備えた検索フィールドを強(qiáng)化します。これらの入力は、開発性を合理化し、使いやすさを向上させながら、古いブラウザーで優(yōu)雅に分解し、サーバー側(cè)の検証とペアになった場合に価値があります。

HTML5は、Webフォームの機(jī)能とユーザーエクスペリエンスを強(qiáng)化するいくつかの新しい入力タイプを?qū)毪筏蓼筏俊￥长欷椁稳肓Ε骏ぅ驻?、より?yōu)れた検証、サポートブラウザーのユーザーインターフェイスの改善、およびモバイルデバイスのより適切なキーボードレイアウトを提供します。

1。 email - メールアドレスの入力

ユーザーに電子メールアドレスを入力したいときに、 email入力タイプが使用されます。この入力タイプをサポートするブラウザは、入力されたテキストが基本的な電子メール形式（例：user@example.com）と一致することを自動的に検証します。

例：

 <入力型= "email" name = "user_email" placeholder = "you@example.com">

• multiple屬性を使用して、コンマで區(qū)切られた複數(shù)のメールアドレスを許可できます。
• 有効な電子メールアドレスが必要なサインアップまたは連絡(luò)先フォームで特に役立ちます。

url - Webアドレス入力用

url入力タイプは、ユーザーから有効なURLを期待しています。ブラウザは、http：//またはhttps：//のような有効なプロトコルで値が始まるかどうかを確認(rèn)します。

例：

 <入力型= "url" name = "webサイト" placeholder = "https://example.com">

• モバイルデバイスでは、これにより、URLを入力するために最適化されたキーボードをトリガーすることがよくあります。
• ブラウザは基本的なチェックのみを?qū)g行するため、追加の検証サーバー側(cè)を必ず処理してください。

3。 number - 數(shù)値入力用

ユーザーに番號を入力する場合は、 numberを使用します。この入力タイプにより、値を増やして減少させるために矢印をアップ/ダウンが可能になり、多くのデバイスの數(shù)値への入力を制限します。

例：

 <入力型= "number" name = "數(shù)量" min = "1" max = "10" step = "1">

屬性を使用して動作を制御できます。

• minとmax制限を設(shè)定します
• step 、値がどれだけ増加または減少するかを定義します

4。 range - スライダー入力用

range入力により、ユーザーはスライダーを使用して範(fàn)囲から値を選択できます。ボリューム、明るさ、評価などの設(shè)定に最適です。

例：

 <input type = "range" name = "volume" min = "0" max = "100" step = "5">

• ユーザーは、選択している正確な値を常に知っているとは限らないため、精度が重要でない場合に使用するのが最適です。
• 現(xiàn)在の値を表示することが重要な場合は、視覚的なインジケーターまたはラベルとペアリングします。

5。 date 、 time 、 datetime-local 、 month 、 week - 日付と時刻の入力

これらの入力は、ビルトインピッカーを提供することにより、日付と時刻の入力を簡素化します。

• date ：完全な日付を選択します（yyyy-mm-dd）
• time ：時間を選ぶ（HH：mm）
• datetime-local ：TimeZoneなしで日付と時刻を組み合わせます
• month ：月と年を選択します
• week ：週と年を選択します

例：

 <input type = "date" name = "Birthday">
<入力型= "time" name = "Meeting_time">

• ブラウザのサポートはさまざまであるため、常にプラットフォーム全體でテストしてください。
• これらの入力により、データ入力が容易になり、フォーマットエラーが減少します。

6。 search - 検索フィールド入力のため

検索ボックス用に特別に設(shè)計されたsearch 、 textと同様に動作しますが、スタイルとは異なる方法や、一部のブラウザのオートコンプリートやクリアボタンなどの機(jī)能を提供する場合があります。

例：

 <入力型= "検索" name = "query" placeholder = "search ...">

• ネイティブのUI強(qiáng)化を活用することにより、検索フォームの使いやすさが向上します。
• サイトナビゲーションバーとアプリツールバーでうまく機(jī)能します。

これらの入力タイプは、開発者がJavaScriptが少ないよりスマートでより直感的なフォームを構(gòu)築するのに役立ちます。すべてのブラウザがすべてのタイプを等しくサポートするわけではありませんが、それらを古い環(huán)境でtextに優(yōu)雅に分解します。したがって、基本的に、彼らは今日使用する価値があります - サーバー側(cè)の検証でそれらをバックアップするだけです。

以上がHTML5フォームで利用可能な新しい入力タイプは何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。