ホームページ ウェブフロントエンド CSSチュートリアル 入力送信・ボタン・エンターキー送信データの詳細説明

入力送信・ボタン・エンターキー送信データの詳細説明

Dec 20, 2016 pm 02:33 PM

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>
ログイン後にコピー

この方法で送信すると、入力値が 22222222 の場合、後で送信される URL は localhost:3980/input.html?name=222222 になります
注目すべき詳細がいくつかあります:

type=submit を設定した後、コントロールは次のようになります。はボタンになり、表示されるテキストがその値になります。デフォルト値は「送信」です。
form[method] のデフォルト値は GET なので、送信後は GET メソッドを使用してページにジャンプします。
input[type] のデフォルト値は text であるため、最初の入力はテキスト ボックスとして表示されます。

Input は実際には、Web 初期の粗雑なデザインに由来する入力コントロールを改造したボタンです。これを確認するには、名前を設定します:


送信後の URL は localhost:3980/input .html になります。 ?name=222222&btn=Submit

URL は /?key=foo&btn=ok であることに注意してください。ボタンとしての入力コントロールも、フォーム入力としてサーバーに送信されます。 それは対話型コントロールですか、それともデータ コントロールですか?位置関係がちょっとわかりにくいですね。さらに、そのスタイルはカスタマイズが難しく、他のタグのコンテナとして使用できないため、input をフォーム送信ボタンとして使用しないことをお勧めします。

注: input の type 属性は button にすることもできます。現時点では、これは単なるボタンであり、フォームの送信はトリガーされません。

2. ボタン [tpe=submit] ボタンのセマンティクスは非常に明確です。つまり、ボタンにはデータが含まれず、その機能はユーザーとの対話です。ただし、type 属性と value 属性もあります。 type のデフォルト値は submit なので、ボタンをクリックするとフォームが送信されます:

<form>
 <input name=&#39;key&#39;>
 <button>确定</button>
</form>
ログイン後にコピー

IE ブラウザとの互換性を実現している場合は、IE の button[type] のデフォルト値が button であることを覚えておいてください。 , これは、単なるボタンであり、フォームの送信をトリガーしないことを意味します。

さらに、要素の内容を設定することでボタンのテキストを指定します。これは、ボタンがコンテナ コントロールであり、任意の HTML タグを含めることができ、スタイルのカスタマイズが容易であることを意味します。これが、Bootstrap ドキュメントで例としてボタンが広く使用されている理由の 1 つです。

ただ、ボタンが汚くなります。ボタンには名前と値を設定できます。フォームが送信されると、値はフォーム データとしてサーバーに送信されます。 IE では、ボタンの開始タグと終了タグの間のコンテンツも、名前に対応する値としてサーバーに送信されます。ボタンと入力の類似点はそれだけではありません。ボタンをクリックするとフォームがリセットされます (これは非常に便利です)。 w3school は次の例を示しています。

<form action="form_action.asp" method="get">
 First name: <input type="text" name="fname" />
 Last name: <input type="text" name="lname" />
 <button type="submit" value="Submit">Submit</button>
 <button type="reset" value="Reset">Reset</button>
</form>
ログイン後にコピー

ボタンについては特に言う必要はありません。フォームを送信するには、ボタンをインタラクティブなボタンとして使用することをお勧めします。 IE と互換性を持たせるために、type=submit の設定にも注意してください。

Enter キーを押してフォームを送信してください

Enter キーを押してフォームを送信できます。ただし、すべてのフォームが Enter キーで送信できるわけではないことに気づいたかもしれません。 HTML2.0 標準を見てみましょう:

フォームに単一行のテキスト入力フィールドが 1 つだけある場合、ユーザー エージェントはフォーム送信のリクエストとしてそのフィールドへの Enter を受け入れる必要があります。

フィールドが 1 つしかない場合フォーム内の単一行のテキスト入力フィールドの場合、ユーザー エージェントはフォームの送信リクエストとしてそのフィールドで Enter キーを受け入れる必要があります。テキスト入力コントロールを使用する場合、ユーザー エージェントはフォームを送信するために Enter キーを受け入れる必要があります。

「単一行」とは、タイプがテキストエリアではなくテキストであることを指します。明らかに、テキストエリアでフォームを送信するために Enter キーを押すことは受け入れられません。 実際、実際には、ログイン ページなど、Enter キーを使用して複数の単一行入力を送信することもできます。

4. フォーム送信の防止

フォーム送信の防止も一般的なトピックであり、通常はクライアント側のフォーム検証に使用されます。一般的な方法は、onsubmit を設定することです:

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>
ログイン後にコピー
ログイン後にコピー

一連の onsubmit ステートメントの最後に false を返すだけで、送信を阻止できます。 送信を禁止するかどうかを決定するメソッドを呼び出したい場合は、ここでメソッドの戻り値を返すことを忘れないでください:

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>
ログイン後にコピー
ログイン後にコピー

上記はすべてです。PHP 中国語 Web サイトをサポートしていただきありがとうございます

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします

See all articles