HTML5フォーム入力タイプの日付、色、および範囲を調べる
フォームはWebサイトのいたるところにあります。 Facebook、Twitter、Google - ほんの数例を挙げると - フォームを通じてサイトにログインまたは登録する必要があります。実際には、ソーシャルサイトのツイートやツイートの更新にもフォームを使用します。要するに, フォームはWebサイトとやり取りするために非常に重要な部分です。.
Webフォームは入力で構築されています。これまでは、入力タイプにはいくつかの選択肢しかありません。といった テキスト, パスワード, 無線, チェックボックス そして 提出する. 今、HTML5は大きな改良を伴い、仕様に多くの新しい入力型を導入します.
そのため、この記事では、この記事の新しい興味深い部分をいくつか詳しく説明します。 HTML5フォーム 試してみるべきだと私たちは考えています。チェックしてみましょう.
日付ピッカー
最初に見てみたいことは 日付ピッカー. 日付の選択は、特にフライトやホテルの予約などのサイトやアプリケーションでは、登録フォームによくあることです。.
日付ピッカーを作成するためのJavaScriptライブラリはたくさんあります。これで、HTML5入力を使ってはるかに簡単な方法でも作成できます。 日付, 次のように;
の 日付ピッカー HTML 5では、基本的にJavaScriptライブラリと同じように動作します。フィールドに注目するとカレンダーが飛び出しますので、月と年をナビゲートして日付を選択できます。.
ただし、現在サポートしている各ブラウザは 日付 Chrome、Opera、Safariといった入力タイプでは、この入力タイプの表示方法が多少異なります。これは、ユーザーエクスペリエンスの不一致の問題につながる可能性があります。
上記のスクリーンショットから一目でわかるいくつかの注目すべき違い。 Operaは日名に英語の3文字の略語 - Sun、Mon、Thuなどを使用していましたが、Chromeは私の地元の言語を使用していましたが、Safariは一方ではかなり奇妙に動作し、カレンダーは表示されません。まったく.
いくつかの新しいもあります 入力 にタイプ 日付または時間をより具体的に選択してください; 月, 週間, 時間, 日付時刻 そして 日時ローカル, これは、キーワード自体がそれが何をするのかを示すためにかなり説明的であると確信しています。.
下記のリンクから実際にそれらすべてを見ることができますが、執筆時点では、これらの入力タイプのすべてをサポートするのはブラウザだけなので、必ずそれをOpera 11以上で見てください。.
- デートピッカーデモ
カラーピッカー
カラーピッカー このCSS3グラデーションジェネレータなど、特定のWebベースのアプリケーションで必要とされることが多くありますが、Web開発者は仕事をするために依然としてjsColorなどのJavaScriptライブラリに依存しています。しかし今、私たちはHTML5でネイティブブラウザのカラーピッカーを作成することができます 色 入力方式;
繰り返しになりますが、ブラウザ、この場合はChromeとOperaは、この入力タイプをわずかに異なります。
Operaは最初にクリック時に基本色オプションと現在選択されている色の16進数形式をドロップダウンで表示しますが、クリックされるとChromeは新しいウィンドウにカラーパレットを直接ポップアップします。.
さらに、デフォルトの色を 値 次のような属性
そのように、それがサポートされていないブラウザで見られるとき、 入力 テキストフィールドでは劣化し、デフォルト値が表示されます。これはユーザーにフィールドに何を入力するべきかのヒントを与えることができます。.
カラー値を表示する
コピーするためだけにPhotoshopを開くのではなく ヘックス 色フォーマットは、生成された色がすでに16進数であるため、実際にこの入力タイプに簡単なツールを作成して作業を実行できます。これは非常に簡単です。
まず、idを追加します カラーピッカー 入力に追加し、空も追加します div ID付き 六色 その隣に値を入れる.
私たちはjQueryをリンクする必要があります。 頭 私達の文書のそれからカラー値と新しく追加された値を保存します。 div 変数の中では、
var color = $（ '＃colorpicker'）。val（）; hexcolor = $（ '＃hexcolor'）;
から初期値を取得します。 ＃カラーピッカー;
hexcolor.html（色）。
…そして最後に、選んだ色が変わったときに値を変更します。
$（ '＃colorpicker'）。on（ 'change'、function（）hexcolor.html（this.value）;）;
それでおしまい;それでは実際に見てみましょう.
- カラーピッカーデモ
範囲
の 範囲 入力タイプにより、jQuery UIでも見つけることができる範囲内の数字を選択するために、ブラウザーにスライダーを追加することができます。.
上記のスニペットは、基本的な実装です。 範囲 入力方式。次のように、CSSを使用してスライダーの向きを垂直に変更することもできます。
入力[タイプ=範囲] 幅：20ピクセル;高さ：200ピクセル。 -webkit-appearance：slider-vertical;
さらに、我々は設定することができます 分 そして 最大 例えば数字の範囲。
以下のスニペットでは、 分 ゼロにして 225 最大のために。明示的に指定されていない場合は、デフォルトでブラウザが使用します。 0 最低のために 100 最大の.
番号を表示する
1つ制約があります、数は見えません、ブラウザのスライダーから生成された数/値を見ることができません。数値を表示するには、JavaScriptまたはjQueryを少し追加する必要があります。これを行う方法は次のとおりです。
まず空を追加します div 入力の横にある div 箱のように見える.
それ以外は以下のコードを入れてください。 スライダーから値を取得します.
$（function（）var val = $（ '＃slider'）。val（）; output = $（ '＃output'）; output.html（val）; $（ '＃slider'）。change（function（ ）output.html（this.value）;）;）;
これでデモを見ることができます。ちょっと注意してください、これらのブラウザでデモを見てください - ChromeとOperaとSafari。FirefoxとIEはサポートしていません。 範囲 現時点での入力タイプ.
- レンジデモ
最後の言葉
HTML5が多くの新しい入力型を導入することによって私たちの生活をずっと楽にすることは明らかです。しかし、他のHTML5機能と同様に、特に古いブラウザではサポートが非常に限られているので、これらの新機能は慎重に、特にこの記事で説明した新しい入力タイプで使用する必要があります。 日付、色と範囲.
しかし、最終的に私たちは今あなたがより多くの洞察力を持つことを願っています HTML5フォーム. この記事を読んでくれてありがとう、そして私たちはあなたがそれを楽しんだことを願っています.
- デモ
- ソースをダウンロード
参考文献
以下は、HTMLフォームをさらに深く掘り下げるための便利なリンクです。.
- HTML5の新しいフォーム機能 - Opera Dev.
- HTML5フォームの現状 - Wufoo
- HTML5フォーム属性 - w3school.org
- HTML 5フォームはいつ使用できますか？ - CanIUse.com
