HTML で HTML フォーム送信を使用する方法-htmlチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-01-17 09:27:35

オリジナル

4106 人が閲覧しました

今回は 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要素です。以下の一般的な用途があります:

テキスト入力

入力を送信

ラジオボタン入力

チェックボックス入力

数値入力<入力タイプ="number" min="" max=""> 入力ボックスには数値のみを入力して、最大値と最小値を設定します。

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

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

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

ラジオ

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

例:

ゲームで遊ぶ

コードを書く

女性、

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

プレースホルダー

の 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 サイトの他の関連記事を参照してください。