フォーム、データバインディング、およびデータ検証を作成するための HTML5 入力ウィジェット-H5 チュートリアル-php.cn

フォーム、データバインディング、およびデータ検証を作成するための HTML5 入力ウィジェット

高洛峰

リリース： 2016-11-18 11:15:29

オリジナル

1632 人が閲覧しました

1. 入力タイプと入力属性

HTML5 の新しい入力タイプは初心者向けのチュートリアルで提供されており、基本的に日常の開発ニーズを満たすことができます。タイプの違いによる内部の違いは何ですか?主要なポイントは 3 つあります。まず、ブラウザは入力タイプ (type="email" など) に基づいて基本的なデータ検証を実行します。ユーザー入力に @ 記号が含まれていない場合、これは不正な入力です。対応するヒントを提供します。タイプの違いによる 2 番目の影響は、モバイル端末でブラウザーでページを閲覧するときに、入力項目のタイプが異なると、デバイスによって与えられる仮想キーボードがタイプに応じて異なることです。たとえば、type= の場合です。 "email" の場合、入力時に Apple 電話で指定されたキーボードの種類に @ 記号が追加されます。 3 番目の点は、入力した値が色の種類である場合、ブラウザに対応する色を選択または入力するための色選択パネルが表示されるため、このようなカラーセレクターを別途実装すると便利です。ユーザーは入力するのが少し面倒に思えます。

入力属性は、いくつかの特別なコンテンツを制御します。

プレースホルダー: この属性は、すべての人が最もよく使用するものだと思いますが、実際には、このプレースホルダーがすべて使用されます。ユーザーがコンテンツを入力すると、プレースホルダーは自動的に消え、プロンプトとして機能します。

autofocus: 例を見ると理解できますが、ページの読み込み時にフォーカスを取得する入力要素を定義するために使用されます。

必須: この属性を設定すると、ユーザーが内容を入力せずにフォームを送信した場合、ブラウザーは対応するプロンプトを表示します。

2. min max data-*input 属性

max min 属性は、数値と範囲入力の最大値と最小値を定義します。

data-* の機能は、キーと値のペアをいくつかの要素にバインドすることです。 dom 要素のデータセットオブジェクトを通じて取得されます:

<input type="number" data-price="21" >
js代码：
let element = document.getElementById(&#39;testid&#39;);
let price = element.dataset.price

ログイン後にコピー

要素の機能は、結果をユーザーに表示することです:

<body>
    <output id=&#39;test&#39;>122</output>
</body>
<script type="text/javascript">
    let ss = document.getElementById(&#39;test&#39;)
    ss.value = 888;
</script>

ログイン後にコピー

この小さな例では、出力値を 888; に設定します。