JavaScript で HTML5_javascript スキルのいくつかのフォーム属性が検出される

入力属性:
プレースホルダー: 入力ボックスのデフォルト値。ユーザーに説明テキストまたはプロンプト情報を表示します

オートコンプリート: 値はオンとオフです。 。 「オン」は、フィールドに入力して送信し、ページに戻ると、再入力時に以前に入力した情報が表示されることを意味します。 off は、ユーザー入力データのセキュリティを含めて閉じられていることを意味します。デフォルトはオンです
autofocus: ページの読み込み時に自動的にフォーカスを取得するように入力を設定します。ページでは、複数の入力に対してのみこの属性を設定できることに注意してください。
リスト機能とデータリスト: リストを通じて入力ボックスにドロップダウン リストを追加します。 。 jsで実装されている「オートコンプリート」機能と同等ですが、ファジークエリは実行できません
データリストに「a34343」と「24234」という 2 つの値がある場合、ユーザーは 3 を入力すると両方の値が表示されることを期待しますが、実際にはどちらも表示されません。
たとえば、「a」と入力すると、ドロップダウン「a34343」が表示され、「4」と入力すると、ドロップダウン値が表示されなくなります。

必須: この要素はフォームを送信する前に入力する必要があります。つまり、空にすることはできません。プロンプト メッセージを置き換えることができる属性がない限り、「このフィールドに入力してください」というプロンプト メッセージが表示されるため、推奨されません。
Pattern:inputタグ内の規則的なパターンを記述する場所です。 。タイプが電子メールまたは URL である入力コントロールには、組み込みの関連正規表現が含まれており、値がその正規表現と一致しない場合、フォームは検証に失敗し、送信できません。 。
プロンプト情報は固定されており、規則的なパターンも固定されているため、タイプが電子メールまたは URL である要素には使用しないことをお勧めします。 。 jsで直接書き換えた方が良いです。

一部の入力設定:
rangeUnderflow は数値制御の最小値を制限します。Set min、input type="number" min="0" value="20"
rangeOverflow は数値制御の最大値を制限します。Set max、input type="number" max="100" value="20"
stepMismatch は、入力値が min、max、step の設定に準拠していることを確認します。Set max min step, input type="number" min="0" max="100" step="10" value="20"
bc5574f69a0cba105bc93bd3dc13c4ec

以下は、input=number で使用される小さな関数です:

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围：使用<input type="number" min="0" max="100"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN 不判断.因为值为空');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
return false;
}
return true;
}

リストのプロパティとデータリスト:

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<form action="http://localhost/test.php" method="post" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option> 
<option value="1980">1980</option> 
<option value="1990">1990</option> 
</select>
<input type="submit" value="注册" form="register"/>

通常: 77c360f9c68e2e9a94541bb951f65f9a

メール:c4807450d16722434bb54174da776390 ; br />
アドレス:f7c79162c0e524d73d44db095b6a86f8
日付:e535f83b2d4da9572ad682811dbb96c4df250b2156c434f3390392d09b1c9563
時間:ecce8baac87750407bd361850fbeb05a MONTH:12424f4308ab1ded8100fa3a813cca1e
週:e8ce2c6addb6f4614fb6d38713f2dfca
番号: c91b025bc073179e52c284ef5e2f4ed5df250b2156c434f3390392d09b1c9563
スライダー798d4ae7d9d52b50caa3abb416a13610
検索:e0eb08276351b89f6680adeb0e4142b6
カラー:9f9cb6021db7cc3e125dff1cb7e8877cdf250b2156c434f3390392d09b1c9563
0e9f73baf0273021f27a708f9b53d388

フォームの自動入力

<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>

出力フォーム出力

<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。