Javascriptアクションフォーム

| | | | | | | | | | | | | | | | | | | | | | |

HTMLフォームアクション属性は、フォームがWebページに送信されたときにデータに何が起こるかを定義します。 action属性の値は、フォームのコンテンツを処理するWebリソースのURLである必要があります。

フォームを作成してサイトまたはWebアプリケーションでデータを要求する場合、多くの場合、あなたのデータで何かしたいですよね?ここで、シェイプアクション属性が役立ちます。

HTMLでフォームを作成するの基本を知っておく必要があります。基本的に、フォームのコンテンツを

要素タグでラップします。開始タグには、使用できる属性がいくつかあり、そのうちの1つはアクションです。

アクション属性は、フォームの送信時にフォームデータを送信する場所を指定するために使用されます。したがって、アクション値はフォームを処理するページです。

HTMLフォームのアクション属性

HTMLフォームのアクション属性は、フォームのコンテンツを処理するURLを示します。 。 action属性が指すWebリソースが、「method」属性で指定したメソッドを受け入れることを確認する必要があります。

action属性の構文を見てみましょう。

アクション属性は、開始ラベルの間に表示されます。この属性は、多くの場合、メソッド属性とともに使用されます。

デフォルトでは、メソッド属性は「get」に設定されています。つまり、フォームは、送信時にHTTPGETリクエストでデータを送信します。開始タグ

送信ボタンがクリックされると、フォームデータが「アクション」URLに送信されます

HTMLフォームからのアクションの例

例を見てみましょう:

上記のアクションは、ユーザー名と電子メールデータをprocess.htmlという名前のページに送信します。ユーザー名とメールデータのタイプはd`input"text.、"入力タイプ" submit.、"でボタンを定義します。クリックすると、このボタンはデータを「action、"URL」にマークします。

次に、上記のフォームの例を入力します。実際のHTMLファイルに入力し、同じフォルダにprocess.htmlというファイルを作成します。このファイルには次の内容が含まれている必要があります。

このコードは、ページが読み込まれたときにテキストの段落を表示する単純なWebページを定義します。以前に定義してコンパイルしたオンラインフォーム:

 スクリーンショット10 2020年8月2日34 02 PM「> </フィギュアは> <P>この例では、あなたが考えるかもしれない、それは非常にではありません使える。何が本当 。一般に、action属性は、フォームのコンテンツをサーバーページに送信するために使用されます。たとえば、process.phpというphpファイルを使用できます。</p> <p> process.phpは、データを使ってすべての魔法を実行します。このページでは、データをデータベースに保存したり、お気に入りのイベントに登録したりできます。 PHPは強力なサーバースクリプト言語であり、Web開発でよく使用されます。以前にWordPressを使用したことがある場合は、処理されたデータの一部がPHPで処理されている可能性があります。</p>  </a> </div> <p> PHPの詳細については、<ahref=PHP学習ガイドを参照してください。

アクション属性は必要ですか?

HTML4では、答えは「はい」になります。今日のHTML5では、アクション属性を指定する必要はありません。アクション属性のないフォームタグがある場合、データは独自のページに送信されます。

なぜこれを行う必要があるのですか?シングルページアプリケーション(ZPS)の登場により、JavaScriptを使用してフォームデータを処理したい場合があります。または、React/Angularなどの別のフレームワークを使用してデータを処理することもできます。

VanillaJavaScriptを使用する場合、JavaScript監査イベントフォームが送信されたとき。

結論

HTMLフォームアクション属性は、フォームが送信されたときにフォームのコンテンツに何が起こるかを定義します。 action属性は引数としてURLを取ります。

Web開発者になることに興味がありますか? HTML学習の完全ガイドをご覧ください。 HTMLの学習に関する専門家のヒント、および最高のオンラインコースと学習リソースのリストがあります。