HTML5の実践とフォームの分析

HTML5 ではフォームにもいくつかの改良が加えられ、いくつかの新しいデータ検証機能が追加され、いくつかの新しいタグ属性が追加されました。これらの検証機能を使用すると、JavaScript が無効になっている場合でも、ストレスなくフォームを検証できます。開発者は JavaScript を使用しません。ブラウザはマークアップのルールに基づいて検証を実行し、適切なエラー メッセージを表示します。これらのユーザーフレンドリーな機能は、HTML5 をサポートするブラウザでのみ有効です。サポートされているブラウザには、Opera 10 以降、Safari 5 以降、Chrome、Firefox 4 以降が含まれます。

HTML5の新たに追加されたフォーム機能には、その他の入力タイプ、入力モード、値の範囲、必須フィールド、検証の無効化、有効性の検出が含まれます。以下ではこれらの機能について詳しく紹介していきます。

1. その他の入力タイプ

入力タイプというと、誰もがすぐに input タグを思い浮かべるでしょう。異なるタイプを指定できるのは入力タグのみです。 HTML5 は、入力の type 属性にいくつかの新しい属性値を追加するだけです。これらの新しい属性値は、データ型情報を反映するだけでなく、いくつかのデフォルトの検証関数も提供します。その中で、「電子メール」と「URL」の 2 つのタイプが最もサポートされており、各ブラウザーにはこれらのカスタマイズされた検証メカニズムも追加されています。新しく追加されたタイプは以下の通りです

email: メールテキストボックスは通常のものと変わりません。入力がメールでない場合、認証は通りません。モバイルキーボードが変わります

tel: 電話番号

url: WebページのURL

search: 検索エンジン。 Chrome でテキストを入力すると、追加の閉じた

color : カラーピッカー

datetime: 完全な日付を表示

datetime-local : タイムゾーンなしで完全な日付を表示

time :タイムゾーンなしで時刻を表示

date : 日付を表示 Week

: 周を表示

MONTHMONTH : 月を表示

HTMLコードの小さなサンプル

<form action="http://www.baidu.com">
    <input type="email" />
    <input type="tel" />
    <input type="url" />
    <input type="search"/>
    <input type="range" min="0" max="10" step="2" />
    <input type="number"/>
    <input type="color"/>
    <input type="date"/>
    <input type="datetime"/>
    <input type="datetime-local"/>
    <input type="time"/>
    <input type="month"/>
    <input type="week"/>
    <!-- placeholder是让密码输入框拥有默认提示 -->
    <input type="password" placeholder="请输入密码"/>
    <input type="submit"/>
</form>

2、入力モード HTML5だけではないいくつかの新しい入力タイプが追加され、新しい属性であるパターン属性も追加されました。 Patten 属性の値は、テキスト ボックスの値と一致するために使用される正規表現です。正規表現を記述するときは、先頭と末尾に ^ 記号と $ 記号を追加しないように注意してください (すでに存在しているものと仮定します)。これら 2 つの記号は、入力された値が最初から最後までパターンと一致する必要があることを示します。小さな例は次のとおりです

HTMLコード

<form action="#">
    <input type="text" name="user" pattern="\d{1,9}"/>
    <!-- 点击之后 会本页面提交-->
    <input type="submit"/>
</form>

Chromeプレビュー効果

3. 「メール」と「」を除く。 「URL」、 HTML5 では、いくつかの追加の入力要素も定義されています。これらの各要素には、何らかの数値ベースの値を入力する必要があります。しかし、これらの新しく追加された値とブラウザの互換性はあまり良くありません。したがって、これらの数値型の入力要素については、min 属性 (可能な最小値)、max 属性 (可能な最大値)、および step 属性 (最小値から最大値までの 2 つのスケールの差) を指定できます。小さな例は次のとおりです

HTML コード

<input type="range" min="0" max="10" step="2" id="range" />

JavaScript コード

var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次减1
oInput.stepDown(10) //每次减10

4. 必須フィールドこれをユーザーに要求するために、フォーム フィールドに必須の属性を指定します。は必須です。フィールドを空白のままにすることはできません。この属性は、input タグ、textarea タグ、および select タグ (Opera 12 以降でサポート) に適用されます。 JavaScript では、required 属性を通じてフォームが必須かどうかを確認できます。 ブラウザーが異なれば、空の必須フィールドの処理方法も異なります。 Opera 11 と Firefox 4 はフォームの送信を妨げ、対応するフィールドの下にヘルプ ボックスをポップアップ表示しますが、Chrome (9 より前) と Safari (5 より前) は何もせず、フォームの送信を妨げません。小さな例は次のとおりです

HTML コード

<input type="text" id="text" required/>

JavaScript コード

//检验是否支持必填属性
//支持的为true ，不支持的为false
var is = "required" in document.createElement("input");

5. novalidate 属性を form タグに追加すると、フォームは無効になります。それ自体を検証します。 JavaScript で novalidate を使用して取得できます。存在する場合は true、存在しない場合は false です。複数の送信ボタンがある場合、特定の送信ボタンをクリックするときにフォームの検証を必要としないことを指定するには、対応するボタンに formnovalidate 属性を追加します。検証を無効にする属性は、JavaScript を使用して追加することもできます。小さな例は次のとおりですHTMLコード

	<input type="text" id="text" required/>
    


	<input type="text" id="text" required/>
    

6、检测有效性，及新添属性和方法

　　在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。

　　valueMissing : 输入值为空时

　　typeMismatch : 控件值与预期类型不匹配

　　patternMismatch : 输入值不满足pattern正则

　　tooLong : 超过maxLength最大限制

　　rangeUnderflow : 验证的range最小值

　　rangeOverflow：验证的range最大值

　　stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

　　customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证

　　placeholder : 输入框提示信息

　　autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off

　　autofocus : 指定表单获取输入焦点

　　list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id

　　Formaction : 在submit里定义提交地址

小例子JavaScript代码

if(input.validity && !input.validity.valid){
	if(input.validity.valueMissing){
		alert("不能为空")
	}else if(input.validity.typeMismatch){
		alert("控件值与预期类型不匹配");
	}
}

　　HTML5の実践とフォームの分析就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（www.php.cn）！