フォームの詳細
フォーム送信とは何ですか? 簡単に言うと、フォーム内のデータをサーバーに送信することです。具体的には、ユーザーがフォームタグの間に入力したデータをメッセージ本文またはURLアドレスにカプセル化してサーバーにリクエストします。
通常、次の 2 つの状況によりフォームが送信されます。
- フォーム内の送信ボタンをクリックしました
- フォームオブジェクトのsubmitメソッドはjsで呼び出されます。
1.送信ボタンで送信
送信ボタンはボタンのテキストとは何の関係もありません。type="submit" のボタンを指します。また、type="image" の input タグを送信したり、送信ボタンとして使用したりすることもできます。
<!--下面的按钮都是提交按钮-->
<p><input type="submit" value="提交1"></p>
<p><button type="submit">提交2</button></p>
<p><input type="image" src="/img.png"></p>
知らせ：
- 送信ボタンはフォーム内に配置する必要があります
- 送信ボタンをクリックすると、そのフォーム内の内容のみが送信されます。
- 1 つのページに複数のフォームを表示できますが、1 つのフォーム内に別のフォームを表示することはできません。
2.jsの提出
具体的な方法は次のとおりです。フォーム form dom オブジェクトを取得し、dom オブジェクトの submit 関数を呼び出します。
<form id="f1">
<p>账号：<input type="text" name="loginid"></p>
<p>密码：<input type="password" name="loginpwd"></p>
<p><button onclick="jssubmit()">提交</button></p>
</form>
<script type="text/javascript">
function jssubmit() {
//获取form表单的dom对象
var formdom = document.getElementById('f1'); //调用对象的submit方法
formdom.submit();
}
</script>
フォーム送信イベント
送信ボタンを使用するか、JS を使用して送信するかに関係なく、フォームが送信されると、フォームの onsubmit イベントが最初にトリガーされます。
formタグにonsubmitイベントを登録しておくと、イベント実行中にfalseが返された場合はフォームの送信を阻止することができ、falseが返されなかった場合は正常にフォームが送信されるということを実現するためによく使います。
提出前の確認
<form id="f1" onsubmit="return vali()"></form>
//在该函数里可以做一些表单校验
function vali() {
return false;//返回false，阻止表单提交
}
nsubmit="return vali()" には特別な注意を払う必要があります。ここでは return を使用する必要があります。そうしないと、関数の戻り結果をページに渡すことができず、ページの送信を防ぐ効果が得られません。
送信されたデータ
フォームを送信すると、フォーム内のすべてのコンテンツが送信されるわけではありません。フォーム内のタグのデータをサーバーに送信したい場合は、次の 2 つの条件を満たす必要があり、どちらも必須です。
- タグには name 属性値が必要です。name 属性値のないタグはキーと値のペアを組み立てることができず、その値は送信されません
- input、select、textareaタグを必須とし、他のタグのデータはサーバーに送信されません
フォームフォームの関連属性:
1.action: この属性は、フォームの送信時に実行される操作を示します。通常は、サーバーがフォーム データを処理するファイル スクリプトにフォーム データを送信します。
2. target: この属性は、フォームが送信された後にサーバーの対応するデータが表示される場所を示します。
デフォルト値は _self で、これは現在のウィンドウに表示することを意味し、値 _blank は新しいウィンドウに表示することを意味します。
3.method: この属性は、フォームを送信するときに使用する HTTP メソッドを示します。
オプションの値は get と post で、デフォルト値は get です。
4. autocomplete: この属性はフォームのオートコンプリートを有効にするかどうかを示します。有効にすると、ユーザーが以前に入力した値に従ってブラウザが自動的に値を補完します。デフォルトで有効になっており、オプションの値はオン (開く) とオフ (閉じる) です。5. novalidate: この属性は、フォームの送信時にフォーム検証が実行されないかどうかを示します。設定されている場合、フォーム検証が実行されないことを意味します。
デフォルトでは、フォーム検証が実行されます
input の入力制限属性:
| 属性 | 説明 |
|---|---|
| 無効 | 入力フィールドを無効にすることを指定します。 |
| 最大 | 入力フィールドの最大値を指定します。 |
| 分 | 入力フィールドの最小値を指定します。 |
| 最大長 | 入力フィールドの最大文字数を指定します。 |
| サイズ | 入力フィールドの幅を文字数で指定します。 |
| ステップ | 入力フィールドの有効な数値間隔を指定します。 |
| 価値 | 入力フィールドのデフォルト値を指定します。 |
| パターン | 入力値をチェックする正規表現を指定します。 |
| 読み取り専用 | 入力フィールドが読み取り専用 (変更できない) であることを指定します。 |
| 必要 | 入力フィールドが必須 (必須) であることを指定します。 |