JavaScript で HTML5_javascript スキルのいくつかのフォーム属性が検出される-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:51:19

オリジナル

1196 人が閲覧しました

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

オートコンプリート: 値はオンとオフです。。「オン」は、フィールドに入力して送信し、ページに戻ると、再入力時に以前に入力した情報が表示されることを意味します。 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"

以下は、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"/>

ログイン後にコピー

通常:

メール: ; br />
アドレス:
日付:

時間: MONTH:
週:
番号:

スライダー
検索:
カラー:

フォームの自動入力

<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>

ログイン後にコピー

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