注意を払う価値のある新しいHTML5フォーム

新しいHTML5機能の目的は、ビデオやオーディオなどの埋め込みのサポートを改善し、開発者とエンドユーザーにシンプルなプログラミングとより良いユーザーエクスペリエンスを提供することです。これで、インターネットの世界が待っており、ブラウザは更新されたときにHTML5の新しいバージョンをサポートできます。 HTML5は、Safari、Chrome、Firefox、Opera、IE9など、多くのブラウザでサポートされています。後方互換性がありますが、今日のブラウザはHTML5と完全に互換性があることはできません。

WebサイトをHTML5にアップグレードするのは非常に簡単です。HTML4と互換性があります。 Doctypeを変更するだけです。この新しいアップデートは、物事をシンプルにするのに役立つため、すべてのWebサイトを更新できるようになり、すべてのHTML4タグがHTML5で100％サポートされているため、クラッシュしません。

HTML5フォームは、12を超える新しい入力タイプと機能を定義し、これらの新しい要素により、プログラマーがより簡単にプログラムできるようになります。以下のこれらの新機能について話しましょう。

1。入力ボックスプレースホルダー

HTML4では、開発者はJavaScriptとjQueryを入力ボックスプレースホルダーとして使用し、HTML5では、開発者はプレースホルダーを簡単に表示できます。プレースホルダーとは何ですか？プレースホルダーは、入力ボックスに表示されるプロンプトテキストです。入力フィールドをクリックすると、自動的に消えます。テキストサンプルに、ユーザーがテキストボックスに入力するようにプロンプ​​トできます。むしろ、プレースホルダー[email protected]を設定できる電子メール入力ボックスがあり、クリックすると消えます。

IE FF Safari Chrome Opera iPhone Android

-3.7+ 4+ 4+ 11+ 4+ -

2。自動フォーカスイベント

HTML5はWebページをロードするだけで、WebページはJavaScriptのように、フォーカスを特定の入力ボックスに自動的に移動します。違いは何ですか？現在、HTMLタグにすぎないため、ユーザーはブラウザでこのプロパティを簡単に無効にすることができます。すべてのブラウザがオートフォーカスをサポートするわけではありませんが、ブラウザはこのプロパティを単に無視するわけではありません。すべてのブラウザを動作させる場合は、新しいHTML5オートフォーカスプロパティを追加してから、ブラウザがオートフォーカスをサポートしているかどうかを確認してください。可能であれば、オートフォーカススクリプトを使用する必要はありません。持っていない場合は、オートフォーカススクリプトを追加する必要があります。

FF IE Safari Chrome Opera iPhone Android

-4+ 4+ 3+ 10+ ---

3。HTML新しく定義された入力タイプ

1。メール

私が言う最初の入力ボックスはメールアドレスです。新しいタイプをサポートしていない古いブラウザもテキストボックスとして扱うだけであり、99％のユーザーはフォームを送信するまでこの変更に気付かない（現時点ではフォーム検証があります）。

2。ウェブサイト

URL入力ボックスについて話しましょう。 URLを入力する必要がある場合は、http：//www.vevb.comのように入力することを期待してください。これで、URLタイプの入力ボックスで、可変仮想キーボードがiPhoneのように表示されます。ユーザーは、Slashesと.comを簡単に入力できます。同様に、ユーザーはフォームを送信する前にこれらに気付いていません。

3。番号

HTML4で一致する数値を取得するには、JQUERYスクリプトを使用して検証を支援する必要があります。 HTML5は数値タイプを追加します。いくつかの追加プロパティ（オプション）：min：入力ボックスで受け入れることができる最小入力数を指定します。 MAX：入力が許可されている最大数です。ステップ：属性入力ドメインの法的間隔、デフォルトは1です。

上の図に示すように、数のみが許可されます（ほとんどの場合、これらは提出時にエラーがプロンプトされるまで気づかれません）、0、2、4のみが合法です（6はステップが10であり、合法は0、10、20です）。

4。デジタルスライダー

HTML5を使用すると、範囲と呼ばれる新しいタイプを使用でき、入力ボックスはスライダーになります。あなたのウェブサイトフォームはスライダーを使用できます。その属性タグは数値タイプと同じです。タイプ設定タイプ= '番号'をtype = '範囲'に変更するだけです。

5。カレンダー

これまでの最高の新しい追加、日付、日付、および日付のピッカータイプ（時間、週、月、ローカルカレンダーなどの他の追加の日付/時刻タイプがあります）。 jQuery UIやYIUなどの多くのJavaScriptフレームワークにはすでにこれらのコントロールがありますが、カレンダーセレクターを追加するのは非常に迷惑です。 HTML5は、ページにスクリプトを使用する必要がない新しいローカル日付セレクターを定義します。現在のところ、オペラはこの機能を完全にサポートする唯一のものであり、他のブラウザの場合、ブラウザがそれをサポートしていない場合に代替スクリプトを実行できます。ただし、最終的には、すべてのブラウザが更新されます。

6。検索

HTML5は、検索入力ボックスタイプを追加します。これは何もありませんが、一部のユーザーにとっては良い変化です。入力ボックスのエッジを自動的に丸で囲むだけで、入力を開始すると、右側に小さなXがあります。すべてのブラウザが現在それをサポートしているわけではありません。

7。色

HTML5は、タイプの色も定義するため、色を選択して六十分子値を返すことができます。 Opera11は、このタイプのブラウザをサポートする唯一のブラウザです。ただし、このタイプを使用している人はたくさんいるはずではないので、サポートしないことは大きな問題ではありません。

8。フォーム検証

最もエキサイティングな新機能は、フォーム検証です。ほとんどの開発者は、クライアントまたはサーバーのいずれかのフォーム検証を行います。たぶん、HTML5のフォームバリデーターはサーバー側の検証に取って代わるものではないかもしれませんが、最終的にはクライアント側の検証に取って代わるでしょう。 JavaScriptの検証の問題は、ユーザーが簡単にバイパスできることです。JavaScriptを無効にするだけで簡単にバイパスできることです。 HTML5が関係しているので、これについて心配する必要はありません。エラーはすべてネイティブのHTML5プロンプトであり、JavaScriptは使用されません。

IE FF Safari Chrome Opera iPhone Android

-4+ 5+ 10+ 9+ ---

9。必要なフィールド

HTML5のフォーム検証は、検証フィールドのタイプに限定されず、新しい追加タグを呼び出すこともできます。この新しいプロパティにより、開発者はJavaScriptを使用せずに入力ボックスが入力されていることを確認できます。