この記事では、主に HTML5 フォームの新しい属性を詳しく紹介し、シンプルでわかりやすい分析例を添付します。必要な友達、一緒に見てみましょう
1. フォーム内の要素の form 属性
H5 では、ページ上の任意の場所にフォームを配置し、その要素に form 属性を指定できます。属性値はフォームの ID であるため、要素が指定されたフォームに属することを宣言できます
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>ログイン後にコピー
2。フォーム内の要素の formaction 属性
H4 では、フォーム送信メソッド
<form action="1.jsp">
</form>
ログイン後にコピー
フォーム全体を送信
H5 では、フォームの各属性に送信先の JSP ページを追加できます
<form action="1.jsp">
<input type="submit" action="1-1.jsp">提交到1页面</form>
<input type="submit" action="1-2.jsp">提交到2页面</form>
<input type="submit" action="1-3.jsp">提交到3页面</form>
</form>ログイン後にコピー
3 フォーム内の要素の formmethod 属性。 フォームの要素ごとに送信方法を指定できます
<form action="1.jsp">
<input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
<input type="submit" action="1-2.jsp" formmethod="get">提交到2页面，get提交方法</form>
</form>ログイン後にコピー
4. フォーム
の要素のformenctype属性は上記と同じで各要素に影響し、コードは省略されています。
5. フォーム
の formtarget 属性は上記と同じで、すべての要素に影響します。コードは
と省略されます。6. 要素
の autofocus 属性は、に autofocus 属性を追加します。テキスト ボックス、選択ボックス、ボタン コントロールは、画面が開くと自動的にフォーカスされます。
<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>
ログイン後にコピー
ページ上で autofocus 属性を持つことができるコントロールは 1 つだけであり、悪用することはできません
7. 必須属性
は、入力値が空の場合、送信されません。許可されている場合、ブラウザはユーザーにコンテンツの入力を求めるテキスト情報を表示します。
8. ラベル属性
は、フォームのすべての要素にラベル属性を追加できます。属性値は、要素にバインドされたラベル要素のコレクションを表します。
<script type="text/javascript">
window.onload = function () {
var text = document.getElementById('text');
var btn = document.getElementById('btn');
var form = document.getElementById('form');
btn.onclick = function() {
if (text.value.trim() =="") {
//alert(text.labels.length)
if(text.labels.length==1) {
var label = document.createElement("label");
label.setAttribute("for","text");
form.insertBefore(label,btn);
text.labels[1].innerHTML = "请输入姓名";
text.labels[1].setAttribute(
"style","font-size:9px;color:red");
}
}
else if(text.labels.length>1)
form.removeChild(text.labels[1]);
}
}
</script>
<form id="form">
<label id="label" for="text">姓名：</label>
<input id="text">
<input id="btn" type="button" value="验证">
</form>ログイン後にコピー
ユーザーが値を入力しない場合は、[確認] をクリックすると、ラベル要素がテキスト ボックスの横に動的に追加されます。テキスト ボックスのテキストは、「名前を入力してください」ラベルが削除されます。
9. ラベルのcontrol属性
ラベル(label)内にform要素を配置し、ラベルのcontrol属性を通じてform要素にアクセスできます。
<script type="text/javascript">
function setValue() {
console.log(1);
var label =document.getElementById("label");
var textbox = label.control;
textbox.value = "231456"
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>ログイン後にコピー
ブラウザでページを開き、「デフォルト値を設定」ボタンをクリックすると、テキストボックスに231456が表示されます。
10.テキストボックスのプレースホルダー属性
または textarea) 選択状態のときにプロンプト情報 (灰色) を入力します
<input type="text" palceholder="hahah">
ログイン後にコピー
11. テキストボックスの list 属性
を h5 の新しい datalist 要素と組み合わせて、プロンプトボックスを作成します
text:<input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none";将datalist元素设置为不显示 -->
<datalist id="greetings" style="display:none">
<option value="你是人">你是人</option>
<option value="你是猪">你是猪</option>
<option value="你是狗">你是狗</option>
</datalist>ログイン後にコピー
テキストボックスに「あなた」と入力すると、下に「あなたは人間です」、「あなたは豚です」、「あなたは犬です」の３つのプロンプトが表示されます。キーワードを入力した場合、プロンプトは表示されません
12. テキスト ボックスの autocomplete 属性には、「on」、「off」、および「" (指定なし) の 3 つの値があります。指定しない場合は、ブラウザのデフォルト値が使用されます。使用方法は以下の通りです
<input type="text" name="greeting" list="greetings" autocomplete="on">
ログイン後にコピー
テキストボックスに「私は人間です」などと入力して送信をクリックすると、前のページに戻ってテキストボックスに「私」と入力すると、メッセージが表示されます「私は人間です」と言って現れます。
13. テキストボックス
のpattern属性は、HTML部分で正規表現を直接使用して、入力された値が要件を満たしているかどうかを判断するのと同じです。
内容を入力してください:
このコードは、入力が間違っている場合は数字と 3 文字の大文字を入力する必要があります。 , 「要求されたコンテンツと一致してください（Google）」というメッセージが表示されます。
14. テキストボックス
のselectionDirection属性は、inputのtext要素とtextarea要素に使用されます。ユーザーがこれら2つの要素でテキストの一部を選択すると、この要素を使用して選択範囲を取得できます。方向。
<script type="text/javascript">
function alertSelectionDirection() {
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="text">
<input type="button" value="惦记我" onclick="alertSelectionDirection()" >
</form>ログイン後にコピー
15. チェックボックスの不定属性
HTML5では、これまでチェックボックスは選択状態と非選択状態しかありませんでした。 js を使用して、チェックボックスの「明示的に選択されていない」ステータスを説明します。
16. 画像送信ボタンの高さ属性と幅属性
高さ: 画像ボタン内の画像の高さを指定します
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
