無制限にHTMLを送信できます。 HTML フォーム送信の奇妙な動作。 例: 送信とリセットの使用
この記事にどんなタイトルを付けるか長い間考えましたが、これ以上良いタイトルが思いつきませんでした。 これは、少なくとも何らかの形で述べられている内容の本質を反映している唯一のタイトルです。 正直に言うと、正確に何と呼ばれているのかわかりません。そのため、このトピックに関する検索エンジンで少なくともいくつかの情報を見つけようとしたのと同じ方法で記事に名前を付けました。
あるサイトでは、1 つのフォームで 2 つのボタンを使用する必要がありました 提出する、ボタンの押下に応じて、入力されたデータがさまざまな PHP 「ハンドラー」に送信されます。 Google はまともな答えを何も返してくれませんでした。どうやら私が正しい質問をしなかっただけのようです。そのため、自分で答えを考え出す必要がありました。
そこで、ご検討いただくために並べてみました。
問題の本質
自分で実装した後も、JS がねじ込まれた通常のボタンの使用に基づく解決策がいくつか見つかりました。
ほぼ同じ方法で計画を実装しましたが、標準の送信タイプを使用しました。 すべてが機能しているようで、私の意見では、私の解決策は論理的により正しいです。
このソリューションは、無料のホスティングでもプロのホスティングを選択した場合でも同様に機能します。 このメソッドは完全にクライアント側で実装されるため、サーバーの速度が低下することはありません。
私が何を望んでいるのか、そしてそれがどのように機能するのかを理解しやすくするために、ここでは実際に機能する例を示します。これは、データを異なるページに送信する 2 つの送信を持つフォームの形式です。
フォームは、ユーザーから Web サーバーにデータを送信するように設計されています。 HTML のフォームは、テキスト フィールドとテキスト領域、チェックボックスとラジオ ボタン、ドロップダウン リストで構成できます。 これらはすべて形式の要素です。 各要素はサイトに何らかの意味を伝える役割を果たします。
HTML フォームの中核は、情報を入力するための領域が表示される Web ページです。 フォームに記入して「送信」をクリックすると、フォームからの情報がパッケージ化されて Web サーバーに送信され、サーバー側のスクリプト (ハンドラー ファイル) によって処理されます。 処理後、別の Web ページが応答として返されます。 次の図は、フォームがどのように機能するかを明確に示しています。
HTML フォームの作成に難しいことは何もありません。 フォームについて理解する最も簡単な方法は、HTML コードを少し解析して、それがどのように機能するかを確認することです。 次の例は、単純な HTML フォームを作成するための構文を示しています。
例: 単純な HTML フォーム
- 自分で試してみてください」
私の最初のフォーム:
名前：
姓：
要素
フォームは、要素を使用して Web ページに挿入されます。 。 これは、テキスト フィールドやボタン、その他の HTML タグなどの要素を含む、すべてのフォーム コンテンツのコンテナを提供します。 ただし、別の要素を含めることはできません
.
フォームをサーバーに送信するには、「送信」ボタンを使用します。フォーム内で「Enter」キーを押しても、同じ結果が得られます。 フォームに「送信」ボタンがない場合は、「Enter」キーを使用して送信できます。
ほとんどの要素の属性 フォームのデザインではなく処理に影響します。 最も一般的なのは、 アクションそして 方法。 属性 アクションサーバーによる処理のためにフォーム内の情報が送信される URL が含まれます。 属性 方法ブラウザがフォーム データを送信するために使用する必要がある HTTP メソッドです。
要素
ほとんどすべてのフォームフィールドは要素を使用して作成されます。 （英語の入力 - 入力から）。 要素の外観 属性の値に応じて変化します タイプ:
以下にいくつかの属性値を示します タイプ:
テキストとパスワードを入力する
フォーム要素の最も単純なタイプの 1 つはテキスト フィールドで、テキストを 1 行に入力するように設計されています。 このテキスト入力タイプはデフォルトで設定されているため、属性の指定を忘れた場合に表示される 1 行フィールドです。 タイプ。 フォームに 1 行のテキスト入力フィールドを追加するには、要素内に次のようにする必要があります。 属性を登録する タイプテキスト値の場合:
パスワード入力フィールドは、通常のテキスト フィールドの一種です。 単一行のテキスト フィールドと同じ属性がサポートされます。 属性 名前ユーザーが入力したパスワードとともにサーバーに送信されるパスワード入力フィールドの名前を設定します。 パスワードフィールドを作成するには、パスワード属性を次のように設定する必要があります。 タイプ(パスワード(英語) - パスワード):
パスワードフィールドを含むフォームの作成例:
例: パスワードフィールド
- 自分で試してみてください」
あなたのログイン:
パスワード：
この属性と組み合わせて使用できます。 最大長、その値によって、特定の文字列に入力できる最大文字数が決まります。 属性を使用して入力フィールドの長さを設定することもできます。 サイズ。 デフォルトでは、ほとんどのブラウザではテキスト フィールドの幅が 20 文字に制限されています。 属性の代わりに新しいフォーム要素の幅を制御するには サイズ、カスケード スタイル シート (CSS) の使用をお勧めします。
属性 価値フォームがロードされたときにテキストフィールドにデフォルトで表示される値を指定します。 フィールドにデフォルト値を入力すると、ユーザーがここにどのようなデータをどの形式で入力するかを正確に説明できます。 これはサンプルのようなものです。ユーザーは目の前で例を見ながらフォームに記入する方がはるかに便利です。
スイッチ（無線機）
要素 タイプ 無線論理「OR」原理を使用するスイッチを作成し、複数の値のうち 1 つだけを選択できるようにします。1 つの位置を選択すると、他の値はすべて非アクティブになります。 トグル要素の基本構文は次のとおりです。
属性 名前 for switch は必須であり、複数のスイッチ要素を 1 つのグループに結合する際に重要な役割を果たします。 ラジオ ボタンをグループに結合するには、同じ属性値を設定する必要があります 名前と異なる属性値 価値。 属性 価値選択したラジオ ボタンの値をサーバーに送信するように設定します。 ユーザーが選択した応答オプションをサーバーが認識できるように、各ラジオ ボタン要素の値はグループ内で一意である必要があります。
属性の存在 チェック済み switch 要素の (英語から - インストール済み) は、必要に応じて、ページをロードするときに提案されたオプションのうちどれをデフォルトで選択する必要があるかを示します。 この属性は、グループ内の 1 つのラジオ ボタン要素に対してのみ設定できます。
- 自分で試してみてください」
何歳ですか？
- 18歳以下
- 18時から24時まで
- 25から35まで
- 35以上
アクション属性。
要素のメイン 属性です アクション、フォームのデータ ハンドラーを指定します。 データ ハンドラーは、フォーム データの処理方法を記述したファイルです。 この処理の結果、新しい HTML ページがブラウザに返されます。 つまり、属性では アクションフォームを処理するためのサーバー上のハンドラー ファイル (スクリプト ページと呼ばれることもあります) への URL パスを指定します。 構文は次のとおりです。
処理ファイルはサーバー上にあります mytestserver.comフォルダ内 ネームフォルダーおよびデータを処理するサーバー スクリプトの名前 - オブラボチク.php。 Web ページ上のフォームに入力したすべてのデータが彼に転送されます。 .php 拡張子は、指定されたフォームが PHP で記述されたスクリプトによって処理されることを示します。 ハンドラー自体は別の言語で作成できます。たとえば、Python、Ruby などのスクリプト言語を使用できます。
常に属性値を設定することをお勧めします。 アクション。 フォームが配置されている同じページに値を渡す必要がある場合は、action 属性の値として空の文字列を指定します: action=""。
メソッド属性
属性 方法情報をサーバーに転送する方法を指定します。 選択するフォーム送信方法は、フォームで送信するデータによって異なります。 ここでは、このデータの量が大きな役割を果たします。 最も一般的なのは、フォーム ソース データをブラウザからサーバーに転送する 2 つの方法です。 得るそして 役職。 メソッドは任意に設定できます。指定しない場合はデフォルトが使用されます。 得る。 それぞれの使い方を考えてみましょう。
POSTメソッド
方法 役職データはメッセージの本文に含まれているため、ユーザーが気付かないうちにデータをパッケージ化してサーバーに送信します。 Webブラウザ（メソッド使用時） 役職特別なヘッダーとそれに続くフォーム データで構成されるリクエストをサーバーに送信します。 このリクエストの内容はサーバーのみが利用できるため、メソッドは 役職パスワード、銀行カードの詳細、ユーザーのその他の個人情報などの機密データを送信するために使用されます。 方法 役職とは異なり、大量の情報を送信するのにも適しています。 得る、送信文字数に制限はありません。
GETメソッド
すでにご存知のとおり、ブラウザの主な仕事はサーバーから Web ページを受信することです。 したがって、このメソッドを使用すると、 得るの場合、ブラウザはいつものように Web ページを取得するだけです。 方法 得るフォーム データもラップしますが、リクエストをサーバーに送信する前に URL の末尾に追加します。 メソッドがどのように機能するかを理解するには 得る、実際に見てみましょう。 このレッスンの最初の例 (例: 単純な HTML フォーム) をメモ帳 (Notepad++ など) で開き、HTML コードに少し変更を加えます。
現在は状況が変わり、新しいプロパティ「formmethod」と「formaction」が HTML に追加されました。 投稿メソッドと URL を「送信」ボタンに直接追加できるため、フォームに何も追加する必要はありません。 これらのパラメータをフォームではなく「送信」ボタンに接続すると、フォームの柔軟性がさらに高まります。 これで、フォームに必要な数のボタンを作成できるようになりました。
各「送信」ボタンが異なる URL に属するようになり、レイアウト中に JavaScript コードを記述する必要がなくなります。 これはすべて正常に機能し、ボタンをクリックすると、フォームは formmethod と formaction を受け取り、標準のメソッドとアクションのパラメーターを上書きします。 フォームに新しいパラメーターのない通常の「送信」ボタンが含まれている場合、フォーム要素に設定されたフォーム値が返されます。
formmethod プロパティと formaction プロパティは、すべての一般的なブラウザでサポートされています
フォーム外のフォーム要素 (input、select、textarea)
フォームに属するすべての要素は要素内に配置する必要があることは、一般に受け入れられている事実です。
現在、form 属性は、Internet Explorer (バージョン 10 まで) を除くすべての一般的なブラウザーでサポートされています。
この質問はおそらくフォーラムのトップ 10 の質問の 1 つです :) おそらく、これは設計者または顧客の要件です。
したがって、解決策は一見すると簡単です。
<a href = "#" onclick = "document.getElementById("myform").submit(); return false;"> 送信</a>
しかし、その後（奇妙なことに）次の疑問が生じます。 訪問者に対して JS が無効になっている場合はどうなりますか?
コードを次のように変更しましょう。
<入力タイプ = "送信" 値 = "送信" class = "link" / > !}
そして、いくつかの JS を追加しましょう。
addEvent(window, "load" , windowLoad) ;/* クロスブラウザーによるイベント ハンドラーの追加 */
関数 addEvent(obj, evType, fn) (
if (obj.addEventListener) (
obj.addEventListener(evType, fn, false);
) else if (obj.attachEvent) (
obj.attachEvent("on" + evType, fn);
}
}/* 要素の親フォームを取得します */
関数 getParentForm(obj) (
while ((obj = obj.parentNode ) ) (
if (obj.nodeName == "FORM" ) (
壊す ;
}
}
オブジェクトを返します。
}/* リンク クラスを持つすべての送信ボタンを検索し、リンクに置き換えます */
関数 windowLoad() (
var button = document.getElementsByTagName("input" ) ;
for (var i = 0; i< buttons.length ; i++ ) {
link.appendChild(document.createTextNode(buttons[ i].getAttribute("value") ));
link.setAttribute ("href" , "#" ) ;
addEvent(link, "click" , linkClick) ;var 親 = ボタン[i].parentNode ;
parent.removeChild (ボタン[ i] ) ;
親.appendChild(リンク) ;
}
}
}/* リンクをクリックしてフォームを送信します */
関数 linkClick(e) (
var e = window.event || e;
var target = e.target || e.src要素 ;
varparentForm = getParentForm(ターゲット) ;
親フォーム.submit();if (window.event) (e.returnValue = false;) else (e.preventDefault();)
}
JS が無効になっている場合でも、訪問者にはリンクの代わりにボタンが表示され、引き続きフォームを送信できます。 しかし、それだけでは終わりません。 JSが無効でもボタンがリンクのように見えるようにしてみましょう。 ボタンのスタイルを設定するには、タグを button に変更します。Firefox でテキストの下線を追加するには、span が必要です。
<ボタンのタイプ = "送信" クラス = "リンク" > 送信</スパン>
それに合わせてJS部分も変更します。
var ボタン = document.getElementsByTagName("ボタン");
for (var i = 0; i< buttons.length ; i++ ) {
if (buttons[ i].getAttribute("type" ) == "送信" && ボタン[i].className == "リンク" ) (
var link = document.createElement("a");
link.appendChild(document.createTextNode(buttons[ i].firstChild.firstChild.nodeValue));
CSS は次のようになります。
ボタン.リンク(
/* 最初の 2 つのプロパティは、IE でインデントを削除するために必要です */
オーバーフロー: 表示;
幅: 自動;/* インデントを削除します */
マージン: 0;
パディング: 0;/* すべてのボタンのデザイン要素を削除します */
背景: なし。
境界線: なし。/* リンク用の通常のカーソル */
カーソル: ポインタ;
}/* リンクには通常下線が付きます */
button.リンクスパン(
色: #00f ;
テキスト装飾: 下線;
}
Firefox の場合は、-moz-user-select: text; を追加することもできます。 ボタンのテキストを強調表示できるようにするためですが、これが必要かどうかは疑問です。
残りのスタイルは特定のデザインによって異なります。
いくつかのメモ:
- アクティブな疑似クラス、訪問済みの疑似クラス、および IE6 の疑似クラスを適用してボタンにカーソルを置くことはできません。
- IE6 では 1 つのフォームの複数のボタンが正常に動作しません
- JSがなくてもできます。 すべては、リンクの自然さがあなたにとってどれだけ重要であるかによって決まります。
更新
insa 、ブラウザ間互換性はありません (コメントをお読みください)。
(通常はユーザーがボタンをクリックしたため)、ユーザー エージェントはフォームをサーバーに送信しようとします。
価格
要素を使用することにした場合
シンプルな送信ボタン
まずは、単純な送信ボタンを備えたフォームを作成しましょう。
これは次のことを行います。
テキストフィールドにテキストを入力してフォームを送信してみてください。
名前と値のペアが送信されると、データがサーバーに送信されます。 この場合、行は「text=」になります。 ユーザーテキスト" ここで、「usertext」は、特殊文字を保持するためにエンコードされた、ユーザーが入力したテキストです。データがどこにどのように転送されるかは、設定によって異なります。
たとえば、Mac 版 Firefox では、Control + Option + S を押すと送信ボタンが表示されますが、Windows 上の Chrome では Alt + S を使用します。
上記の例の問題は、ユーザーがパスキーが何であるかを知らないことです。 修飾子は通常、競合を避けるために非標準であるため、これは特に当てはまります。 サイトを作成するときは、サイトのデザインを妨げない方法でこの情報を必ず含めてください (たとえば、サイトへのアクセス キーに関する情報を指す、簡単にアクセスできるリンクを提供するなど)。 (title 属性を使用して) ボタンにツールチップを追加することも役立ちますが、これはアクセシビリティ目的の完全な解決策ではありません。
送信ボタンを無効または有効にする
送信ボタンを無効にするには、次のように、disabled グローバル属性をそのボタンに設定するだけです。
disabled を true または false に設定するだけで、実行時にボタンを有効または無効にできます。 JavaScript では、これは btn.disabled = true または btn.disabled = false のようになります。
検査
送信ボタンは制約チェックには関与しません。 実際の制約値はありません。
例
上記に簡単な例を示しました。 送信ボタンについては、これ以上言うことはありません。 この種の制御の理由は、「シンプル ボタン」と呼ばれることもあります。