さまざまなブラウザ上で動作する HTML5 フォームを作成する

このチュートリアルでは、Webforms2、Modernizr、jQuery UI、およびさまざまな jQuery プラグインを組み合わせて使用​​しながら、HTML5 フォームを最新のブラウザーに提供する方法を学習します。

HTML5 に向けた最初の取り組みは、当初 XForms Basic と呼ばれていた WHATWG の Web Forms 2.0 でした。この仕様では、新しいフォーム コントロール、検証などが導入されています。その後、それは HTML5 にマージされ、重複したモデルはその後削除され、その結果、今日私たちが知っている HTML5 フォームが完成しました。 块引用>

残念ながら、常に存在する下位互換性の問題は依然として頭の痛い問題です。開発者は、恐ろしい Internet Explorer に対処する必要があります。ご想像のとおり、IE9 は、最新の利用可能な IE9 ベータ版であっても、フォームの最新の進歩をあまりサポートしていません。 IE のバージョンが古いですか?

それについてファジェタ。

それにもかかわらず、私たちはこれらの新機能を使用したいと考えており、使用するつもりです。今日は、これらの新しい要素のいくつかを見ていきます。ブラウザーがこれらの機能をサポートしているかどうかを確認し、サポートしていない場合は CSS と JavaScript を使用したフォールバックを提供します。

ツール: 最新のツール

---

HTML5 フォームまたはその一部をサポートしていないブラウザーにのみフォールバックを提供します。ただし、正しい手法は、ブラウザーのスニッフィングに依存するのではなく、シグネチャ検出を使用することです。人気のある Modernizr ライブラリを使用します。

Modernizr は、現在のブラウザを多数の HTML5 および CSS3 機能に対してテストするための小さな JavaScript ライブラリです。

Modernizr についてさらに詳しく知りたい場合は、Tuts Marketplace で入手できる「Modernizr Video Crash Course」の高度なチュートリアルを確認してください。

块引用>ツール: Webフォーム2

---

Webforms2 は Weston Ruter の JavaScript ライブラリで、HTML5 フォームの「以前の」バージョンである「WHATWG Web Forms 2.0」仕様のクロスブラウザ実装を提供します。

これを使用して、現在の要素の機能を検証し、拡張します。

リーリー

ウィジェット: スライダー

---

仕様では、範囲入力を

要素の値を数値を表す文字列に設定するために使用される不正確な制御として説明しています。

リーリー Opera 10.63 でのプレビューは次のとおりです:

他のブラウザにフォールバックを提供するには、jQuery UI のスライダー ウィジェットを使用します。

まず、

まず、入力範囲要素からスライダーを作成する初期化関数を作成します。

リーリー 各範囲入力に対して新しい <div

> 要素を作成し、そのノードでスライダーを呼び出します。これは、input 要素上で jQuery UI のスライダーを直接呼び出すと機能しないためです。

min、max

や

step, などのプロパティを入力から取得し、それらをスライダーのパラメーターとして使用することに注意してください。これにより、フォールバック スライダーが実際の HTML5 スライダーを機能的に模倣することができます。

次块引用>では、Modernizr を使用して、現在のブラウザがこの入力タイプをサポートしているかどうかを確認します。 Modernizr はクラスをドキュメント要素 (

html) に追加し、スタイルシートで特定のブラウザー機能をターゲットにできるようにします。また、各機能のプロパティを含む自己タイトルのグローバル JavaScript オブジェクトも作成します。ブラウザーがサポートしている場合、このプロパティは true と評価され、そうでない場合は false と評価されます。 この知識を基に、入力型のサポートを検出するために Modernizr.inputtypes[type]

を使用します。

リーリー 範囲入力がサポートされていない場合は、initSlider

関数を jQuery の

document.ready に追加して、ページの読み込み後に関数を初期化します。 これは、範囲入力のネイティブ サポートがないブラウザーではスライダーがどのように表示されるかです。

---

小部件：数字微调器

引用马克·皮尔格林的话：

询问电话号码比询问电子邮件地址或网址更棘手。

这就是为什么我们提供了一个专门处理数字的单独表单控件：数字微调器，也称为数字步进器。

<input type="number" value="2">

ログイン後にコピー

在撰写本文时，它受到 Opera 和基于 Webkit 的浏览器的支持；这是 Opera 10.6 的快照。

因为 jQuery 不提供数字微调器，所以我们将使用 Brant Burnett 的 jQuery 插件，该插件构建为 jQuery UI 小部件。

我们实现了与之前相同的技术；构建函数来创建微调器，使用 Modernizr 进行测试，并将函数附加到 $(document).ready。

var initSpinner = function() {			
	$('input[type=number]').each(function() {
		var $input = $(this);
		$input.spinner({
			min: $input.attr('min'),
			max: $input.attr('max'),
			step: $input.attr('step')
		});
	});
};

if(!Modernizr.inputtypes.number){
	$(document).ready(initSpinner);
};

ログイン後にコピー

由于数字输入还支持 min、max 和 step，因此我们从字段中获取属性，并将它们用作初始化数字微调器插件的参数。

我们的后备小部件如下所示：

---

小部件：日期选择器

至少有六种输入类型可用作日期选择器。

• date
• 月
• 一周
• 时间
• 日期时间和
• 和本地日期时间

在撰写本文时，唯一正确支持它们的浏览器是 Opera 9+ 版本。

<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

ログイン後にコピー

目前，我们将仅使用 jQuery UI Datepicker 为 date 输入提供后备。请随意使用任何其他插件来完全模仿您的实现中的 HTML5 日期选择器输入的功能。

var initDatepicker = function() {
	$('input[type=date]').each(function() {
		var $input = $(this);
		$input.datepicker({
			minDate: $input.attr('min'),
			maxDate: $input.attr('max'),
			dateFormat: 'yy-mm-dd'
		});
	});
};

if(!Modernizr.inputtypes.date){
	$(document).ready(initDatepicker);
};

ログイン後にコピー

---

小部件：颜色选择器

目前，没有浏览器提供对颜色 input 的支持。因此，在他们赶上之前，他们都需要使用我们的后备技术。

<input type="color">

ログイン後にコピー

我们将使用 Stefan Petre 的 ColorPicker jQuery 插件，因为 jQuery UI 尚未提供基础包。

var initColorpicker = function() {
	$('input[type=color]').each(function() {
		var $input = $(this);
		$input.ColorPicker({
			onSubmit: function(hsb, hex, rgb, el) {
				$(el).val(hex);
				$(el).ColorPickerHide();
			}
		});
	});			
};

if(!Modernizr.inputtypes.color){
	$(document).ready(initColorpicker);
};

ログイン後にコピー

我们的结果：

---

输入类型：搜索

新的 search 输入类型隐式用于语义，但将来可以提供许多有趣的功能。

<input type="search">

ログイン後にコピー

目前，只有基于 Webkit 的浏览器提供对此功能的支持。该规范还支持 results 属性以在下拉列表中显示多个搜索术语。

在 OS X 上的 Safari 上，它应该如下所示：

其余浏览器将其显示为标准文本字段，因此您可以放心地将其与标准标记一起使用。

---

输入类型：URL 和电子邮件

这两种输入类型 url 和 email 用于验证目的。它们在移动浏览器中特别有用，可以更改屏幕键盘布局以适应焦点领域。这已经在 iOS（iPhone、iPad、iPod）和某些版本的 Android 上的 Safari 中实现。

<input type="email">
<input type="url">

ログイン後にコピー

这些输入类型可以通过Webforms2在其他浏览器中实现。

您可以在新项目中自由使用这些类型，因为它们会回退到简单的文本框。在您的手机上，如果您向输入提供这些类型，您会发现键盘会相应变化。

---

属性：必填字段

新规范引入了非常方便的 required attribute。现在我们可以轻松地使用此属性，而不是使用花哨的 JavaScript 来处理我们的必填字段。

<input type="email" required>

ログイン後にコピー

对于不支持该属性的浏览器，我们可以再次使用Webforms2。因此，由于我们从一开始就将其包含在内，因此无需担心。

注意：请务必将 a name 属性分配给您的表单元素，否则 required 属性将不会生效。

---

属性：模式

pattern 属性用于字段验证，并且仅当值与使用正则表达式定义的特定格式匹配时才接受值。如果输入的值与模式不匹配，表单将不会提交。

例如，要验证电话号码，我们必须使用以下 pattern 或正则表达式：

<input type="text" name="Tel" pattern="^0[1-689][0-9]{8}$">

ログイン後にコピー

pattern 属性可以通过使用 Webforms2 在不支持它的浏览器中实现。

---

属性：自动对焦

autofocus attribute 正如它所说：自动聚焦我们的控件之一。目前基于 Webkit 的浏览器（Safari、Chrome 等）和 Opera 支持它。请记住：只有一个表单控件可以接收此属性。

<input type="email" autofocus>

ログイン後にコピー

Webforms2 负责在不支持的浏览器中实现。

---

属性：占位符

placeholder 属性是我们多年来一直使用 JavaScript 做的事情。它添加了有关该字段的一条信息，例如简短的描述，当该字段获得焦点时该信息就会消失。

<input name="name" placeholder="First Name">

ログイン後にコピー

最新的 Beta Firefox 和 Webkit 浏览器支持此属性。

为了模仿旧版浏览器中的行为，我们将使用 Viget 设计实验室提供的 Placehold jQuery 插件。

var initPlaceholder = function() {
	$('input[placeholder]').placehold();
};

if(!Modernizr.input.placeholder){
	$(document).ready(initPlaceholder);
};

ログイン後にコピー

---

属性：最小值、最大值和步长

min、max 和 step 输入属性指定某些表单控件的约束，例如日期选择器、数字和范围。您肯定可以从 min 和 max 的名称中猜出它们的用途。 step 属性指定每次单击或“步骤”的多个范围。例如，如果步长值为 2，则可接受的值可以是 0、2、4 等。

<input type="range" name="slider" min="0" max="20" step="5" value="0">

ログイン後にコピー

这些属性目前仅受 Opera 和 Webkit 浏览器支持，并由 Webforms2 实现，作为其他浏览器的后备。

---

结论

今天我们了解到，创建表单并为大多数新添加的内容提供后备是一项相当简单的任务。如果今天人们仍然试图吓唬您不要使用 HTML5，请不要理会他们；立即开始使用您可以使用的出色工具！

Zoltan "Du Lac" Hawryluk の優れた html5Widgets を必ずチェックしてください。これは、同様のソリューションとネイティブ JavaScript ウィジェットを提供します。

---

＃＃＃参考文献＃＃＃

知っておくべき 28 HTML5 の機能、ヒント、テクニック

• HTML5 と CSS3: 間もなく使用するテクノロジ /a>
• Mark Pilgrim の Dive Into HTML5 のフォーム セクション
• Mozilla Developer Center の HTML5 フォーム
• W3C HTML5 フォーム仕様作業草案
• Wikipedia のレイアウト エンジン (HTML5) の比較

以上がさまざまなブラウザ上で動作する HTML5 フォームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。