ホームページ  >  記事  >  ウェブフロントエンド  >  HTML でのフォームとフォーム送信操作のメソッドの概要

HTML でのフォームとフォーム送信操作のメソッドの概要

小云云
小云云オリジナル
2017-12-11 10:10:583134ブラウズ

この記事では主に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
ラジオボタン入力2ac7d647ce9adaa8d3754c3ed6d10759
チェックボックス入力7b4939e8b587775d10c70051ca3a84c7
数値入力e7f9e7bf130c9d9eea60848b3c333fbd 入力ボックスのみ数値を入力可能最大値と最小値を設定できます。
範囲入力 7a4313034c807dc840f651e5c24969b6 は数値と似ていますが、入力ボックスの代わりにスライダーが表示されます。
カラー入力d0335cf169d1c69d5fb760bfbec3b54d カラーピッカーが表示されます。
日付を入力6e290236d7c77fdce98cb15bf0dfeea2 すると日付ピッカーが表示されます。
メール入力 e8dc7451c84937575e38c52150e3cc83 がテキスト入力ボックスとして表示され、カスタマイズされたキーボードがポップアップします。
tel 入力 85f46f0e8aaaa3b9a68adb2fc5e483a4 はメール入力と同様です。
url 入力 b62e2bff68c9b56c3471a9e06cd94f80 はメール入力と同様で、カスタマイズされたキーボードがポップアップします。
textarea 要素は複数行のテキストエリアを作成できます。
da43b3cb4be0e2f03c200326eeb63a5240587128eee8df8f03d0b607fe983014
colsとrowの属性値は文字の幅と高さを表しますそれぞれテキスト領域。
select 要素と option 要素は、ドロップダウン メニューを作成するために一緒に使用されます。
701d81aaa14b8afd38d7545721c937f2 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 aba78b0dcb1db399ec615ce176d67bce ;4afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

ラジオ

異なる名前属性を設定するだけです

例:

0e328b74cc2ff2e2582f17aaf1d0e1ecゲームをプレイ
cf93b017451a7c7d8b846ea403fb20a2コードを書き込む

d0d3ad932cbf0ef934edf22fb74b4e93男性
2212a4b1f8e91c6f7f429d366b728928女性、
これらは 2 セットのラジオです

プレースホルダー

の期待値を説明するプロンプト情報を提供します入力フィールド(ヒント)。
入力フィールドが空の場合はプロンプトが表示され、フィールドにフォーカスが移るとプロンプトが表示されなくなります。

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(&#39;submit&#39;, function (e) {
  if (valid()) {
    ...
  } 
  e.preventDefault()
})

上記3つのボタンがフォーム要素に無い場合、ユーザーはフォームを送信することができません(この時、Enterキーも無効になります)。 form要素を使用することができます。 submit()方法执行提交表单,需要注意的是调用submit()方法并不会触发form元素的submit事件,表单的验证等操作应该在调用submit()

if (valid()) {
  form.submit()
}

フォーム送信とユーザーエクスペリエンス

人気の ajax + クロスドメイン POST (CORS) テクノロジーに基づいて、フォーム要素を使用せずにデータをサーバーに直接送信する可能性があります。これは機能しますが、ほとんどの場合、エクスペリエンスが低下します。

JavaScript フォームの検証

JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。

JavaScript によって検証される一般的なフォーム データは次のとおりです:

用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 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 表单的完整代码:







Email:

快捷键提交

在没有form元素包裹的情况下,即使当前页面的焦点在表单元素上,按回车键也不会触发表单提交,对于用户而言,需要从键盘控制切换到鼠标/手势控制,破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹,并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时,用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时,高级浏览器包括移动端浏览器,会询问用户是否需要记住用户账号密码,对于一般用户而言,这是一个十分有用的特性,特别是在移动端,可以为用户节省很多时间。在没有form元素的情况下,浏览器不会弹出该询问窗口。

我们在开发一个表单应用的时候,不应该尝试去除form元素直接进行提交,在form元素中应该包含一个提交按钮,如果是button元素,应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中,而非提交按钮的click事件。

相关推荐:

html中Form表单提交时页面不跳转的方法详解

序列化form表单教程详解

有关jquery中form表单序列化的一些问题指导

以上がHTML でのフォームとフォーム送信操作のメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。