ホームページ > 記事 > ウェブフロントエンド > HTML でのフォームとフォーム送信操作のメソッドの概要
HTML でのフォームとフォーム送信操作のメソッドの概要
- 小云云オリジナル
- 2017-12-11 10:10:583144ブラウズ
この記事では主にHTMLのフォーム要素とフォーム送信に関する知識を紹介しますので、必要な方は参考にしていただければ幸いです。
form 要素
form 要素の DOM インターフェイスは HTMLFormElement，继承自HTMLElement であるため、他の HTML 要素と同じデフォルト属性を持ちますが、いくつかの固有の属性とメソッドもあります:
| 属性値 | 説明 |
|---|---|
| accept-charset | サーバーが処理できる文字セット、複数の文字セットはスペースで区切られます |
| action | リクエストを受け入れるためのURL、この値はform 要素 input 要素または button 要素の formaction 属性は、form 要素内の input 要素または button 要素によって要求されたエンコーディング タイプをオーバーライドします。プロパティは、フォーム内のコントロールの数 |
| メソッド | をオーバーライドします。送信する HTTP リクエストのタイプ。通常は「get」または「post」。この値は、form 要素の input 要素または button 要素に渡すことができます。formmethod 属性は、 |
| name | フォームの名前 | をオーバーライドします。
| reset() | すべてのフォームフィールドをデフォルト値にリセットします |
| submit() | フォームを送信します |
| target | リクエストの送信とレスポンスの受信に使用されるウィンドウの名前。この値は、form 要素の input 要素または button 要素の formtarget 属性によってオーバーライドできます |
| autocomplete | form 要素を自動的に補完するかどうか |
|
input 要素 input 要素は、type 属性の値に応じて、非常に広く使用されているフォーム要素です。 Text inputcd21f5bd7079ba99833c7c290ac8fc77 ラジオ 異なる名前属性を設定するだけです 例: 0e328b74cc2ff2e2582f17aaf1d0e1ecゲームをプレイ d0d3ad932cbf0ef934edf22fb74b4e93男性 プレースホルダー の期待値を説明するプロンプト情報を提供します入力フィールド（ヒント）。 type=hidden は、非表示の入力を定義します。非表示フィールドはユーザーには表示されません。通常、非表示フィールドにはデフォルト値が保存され、その値は JavaScript によって変更することもできます。 送信ボタン フォームに送信ボタンを追加すると、ユーザーはフォームを送信できるようになります。 次の 3 つのボタンは、クリックされたときにフォームの submit イベントをトリガーできます: <input type="submit" /> <button type="submit"></button> <input type="image" /> 仕様ではボタン要素の type のデフォルト値は submit ですが、IE678 ではデフォルト値は button なので、互換性から考慮事項 type="submit" 属性を button 要素に手動で追加する必要があります。 submitイベント 初心者は、フォームの送信が送信ボタンのクリックイベントによってトリガーされると考えるかもしれませんが、実際にはそうではなく、ボタン要素のクリックイベントとフォームの送信イベントが実行されます。異なるブラウザでは異なる順序で表示されるため、正確にするために、フォーム送信イベントを制御するために、フォームの送信イベントで検証やその他の操作を実行することを選択します。 form.addEventListener('submit', function (e) {
if (valid()) {
...
}
e.preventDefault()
})
上記3つのボタンがフォーム要素に無い場合、ユーザーはフォームを送信することができません（この時、Enterキーも無効になります）。 form要素を使用することができます。 if (valid()) {
form.submit()
}
フォーム送信とユーザーエクスペリエンス 人気の ajax + クロスドメイン POST (CORS) テクノロジーに基づいて、フォーム要素を使用せずにデータをサーバーに直接送信する可能性があります。これは機能しますが、ほとんどの場合、エクスペリエンスが低下します。JavaScript フォームの検証 JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。 JavaScript によって検証される一般的なフォーム データは次のとおりです:用户是否已填写表单中的必填项目？ 下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）： function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的代码： <html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证 下面的函数检查输入的数据是否符合电子邮件地址的基本语法。 意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号： function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的完整代码： 快捷键提交 在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。 浏览器记住账号密码 在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。
我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。 相关推荐： |
以上がHTML でのフォームとフォーム送信操作のメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。