ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML で HTML フォーム送信を使用する方法
HTML で HTML フォーム送信を使用する方法
- php中世界最好的语言オリジナル
- 2018-01-17 09:27:354190ブラウズ
今回は HTML で HTML フォーム送信を使用する方法を説明します。HTML フォーム送信を使用する際の 注意点 は何ですか?実際の事例を見てみましょう。
プロパティとメソッド もあります。属性値
説明accept-charset サーバーが処理できる文字セット。複数の文字セットはスペースで区切られます。
action この値は、入力またはボタンで使用できます。 formaction 属性は、
elements フォーム内のすべてのコントロールのコレクション (HTMLCollection) をオーバーライドします。
リクエスト タイプ
(通常は「get」または「post」)。この値は、form 要素の入力またはフォームメソッド属性の formmethod 属性によってオーバーライドできます。ボタン要素 name フォームの名前 reset() すべてのフォームフィールドをリセット デフォルト値に設定 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
ラジオ
異なる名前属性を設定するだけです
例:
cf064acb13d6422c03d82eada8b1231dコードを書く
1ee74afe029b1ead5880fac0c57bef06女性、
これは、入力フィールドの期待値を説明するヒントを提供するラジオ
プレースホルダー
プロンプトは、入力フィールドが空の場合に表示され、フィールドにフォーカスが移ると消えます。
type=hidden
は、非表示の入力を定義します。非表示フィールドはユーザーには表示されません。通常、非表示フィールドにはデフォルト値が保存され、その値は JavaScript によって変更することもできます。
たとえば、セキュリティ目的で使用され、ユーザーには見えない名前と値の値をバックグラウンドに送信し、バックグラウンドでページの偽造を防ぐための検証を実行できるようにします。
送信ボタン
ユーザーがフォームを送信できるように、フォームに送信ボタンを追加します。
次の 3 つのボタンは、クリックされたときにフォームの submit イベントをトリガーできます:
<input type="submit" /> <button type="submit"></button> <input type="image" />
仕様におけるボタン要素タイプのデフォルト値は submit ですが、IE678 ではデフォルト値は button であるため、互換性のための button 要素 type="submit" 属性を手動で追加します。
submitイベント
初心者は、フォームの送信は送信ボタンのクリックイベントによってトリガーされると考えるかもしれませんが、実際には、ボタン要素のクリックイベントとフォームの送信イベントは別の方法で実行されます。異なるブラウザで注文するため、フォームの送信イベントを正確に制御するために、フォームの送信イベントで検証などの操作を実行することを選択します。
form.addEventListener('submit', 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を使用してモバイル固定フローティング半透明検索ボックスを作成する方法
以上がHTML で HTML フォーム送信を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。