検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML で HTML フォーム送信を使用する方法

HTML で HTML フォーム送信を使用する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-01-17 09:27:354158ブラウズ

今回は HTML で HTML フォーム送信を使用する方法を説明します。HTML フォーム送信を使用する際の 注意点 は何ですか?実際の事例を見てみましょう。

ここではフォーム要素とフォーム送信に関する知識を紹介します。

form 要素

form 要素の DOM インターフェースは HTMLFormElement であり、HTMLElement を継承しているため、他の HTML 要素と同じデフォルト属性を持ちますが、いくつかの固有の

プロパティとメソッド もあります。属性値

説明


accept-charset サーバーが処理できる文字セット。複数の文字セットはスペースで区切られます。

action この値は、入力またはボタンで使用できます。 formaction 属性は、

elements フォーム内のすべてのコントロールのコレクション (HTMLCollection) をオーバーライドします。

enctype 要求されたエンコード タイプ。この値は、form 要素の入力またはフォーム要素の formenctype 属性によってオーバーライドできます。 button 要素

length フォーム

method 内のコントロールの数。送信される HTTP

リクエスト タイプ

(通常は「get」または「post」)。この値は、form 要素の入力またはフォームメソッド属性の formmethod 属性によってオーバーライドできます。ボタン要素

name フォームの名前

reset() すべてのフォームフィールドをリセット デフォルト値に設定

submit() フォームを送信

target リクエストの送信とレスポンスの受信に使用されるウィンドウ名 この値は次のようにオーバーライドできます。 form要素内のinput要素またはbutton要素のformtarget属性

autocomplete form要素を自動的に補完するかどうか

input要素

input要素は、type属性の値に応じて、非常に広く使用されているform要素です。以下の一般的な用途があります:

テキスト入力9c0277ee990771d30fd543a38aca6c0e

入力を送信54b28e0e73a12e4a8ed487872a6fb5b8

ラジオボタン入力72b3ef87eebd2b8e1af4dcfb7ab0e495

チェックボックス入力dfe9b075ae6f62c2212f3b55a251ac55

数値入力a78682ec8752e382d1ac1281824f028f 入力ボックスには数値のみを入力して、最大値と最小値を設定します。

範囲入力 7a4313034c807dc840f651e5c24969b6 は数値と似ていますが、入力ボックスの代わりにスライダーが表示されます。

カラー入力d0335cf169d1c69d5fb760bfbec3b54d をクリックすると、カラーピッカーが表示されます。

日付を入力6e290236d7c77fdce98cb15bf0dfeea2 すると
日付ピッカー
が表示されます。
メール入力 e8dc7451c84937575e38c52150e3cc83 がテキスト入力ボックスとして表示され、カスタマイズされたキーボードがポップアップします。
tel 入力 85f46f0e8aaaa3b9a68adb2fc5e483a4 はメール入力と同様です。
url 入力 b62e2bff68c9b56c3471a9e06cd94f80 はメール入力と同様で、カスタマイズされたキーボードがポップアップします。
textarea 要素は複数行のテキストエリアを作成できます。
da43b3cb4be0e2f03c200326eeb63a5240587128eee8df8f03d0b607fe983014colsとrowの属性値は文字の幅と高さを表しますそれぞれテキスト領域。 select 要素と option 要素は、ドロップダウン メニューを作成するために一緒に使用されます。
701d81aaa14b8afd38d7545721c937f2 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 aba78b0dcb1db399ec615ce176d67bce ;4afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

ラジオ

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

例:

f742814dc59b470636ed3f44a5d1dbabゲームで遊ぶ

cf064acb13d6422c03d82eada8b1231dコードを書く

1ee74afe029b1ead5880fac0c57bef06女性、

これは、入力フィールドの期待値を説明するヒントを提供するラジオ

プレースホルダー

の 2 セットです。

プロンプトは、入力フィールドが空の場合に表示され、フィールドにフォーカスが移ると消えます。

type=hidden

は、非表示の入力を定義します。非表示フィールドはユーザーには表示されません。通常、非表示フィールドにはデフォルト値が保存され、その値は JavaScript によって変更することもできます。

たとえば、セキュリティ目的で使用され、ユーザーには見えない名前と値の値をバックグラウンドに送信し、バックグラウンドでページの偽造を防ぐための検証を実行できるようにします。


送信ボタン

ユーザーがフォームを送信できるように、フォームに送信ボタンを追加します。

次の 3 つのボタンは、クリックされたときにフォームの submit イベントをトリガーできます: 

<input type="submit" />
<button type="submit"></button>
<input type="image" />

仕様におけるボタン要素タイプのデフォルト値は submit ですが、IE678 ではデフォルト値は button であるため、互換性のための button 要素 type="submit" 属性を手動で追加します。

submitイベント

初心者は、フォームの送信は送信ボタンのクリックイベントによってトリガーされると考えるかもしれませんが、実際には、ボタン要素のクリックイベントとフォームの送信イベントは別の方法で実行されます。異なるブラウザで注文するため、フォームの送信イベントを正確に制御するために、フォームの送信イベントで検証などの操作を実行することを選択します。 

form.addEventListener(&#39;submit&#39;, function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

上記 3 つのボタンが form 要素に存在しない場合、ユーザーはフォームを送信できません (Enter キーも無効になります)。このとき、独自の submit() メソッドを使用できます。重要なのは、submit() メソッドを呼び出しても、フォーム要素の submit イベントがトリガーされないということです。submit() メソッドを呼び出す前に、フォームの検証やその他の操作を実行する必要があります。 

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

あなたはこれらの事例を読んだことがあるでしょう。あなたはこの方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTML Webページにビデオを挿入する方法

htmlJSONデータをフォーマットして出力する方法

HTMLを使用してモバイル固定フローティング半透明検索ボックスを作成する方法

以上がHTML で HTML フォーム送信を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript json ajax html select checkbox 表单验证 date 继承 接口 Length number 事件 dom 选择器 input http
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML Web ページにビデオを挿入する方法次の記事：HTML Web ページにビデオを挿入する方法

関連記事

続きを見る