HTML

HTMLのformタグの使い方【action・method】

どうも、つよぽんです!

今回はHTMLのformタグの使い方について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • HTMLのformタグで出来ることを知らない人
  • HTMLのinputタグで入力したデータをどのようにしてサーバーに送ればよいかわからない
  • HTMLのformタグのaction属性method属性の意味がわからない人

formタグは前回解説したinputタグ(以下リンク先)と組み合わせて使って、ユーザーが入力した内容をWebサーバーに送ります。

あわせて読みたい
HTMLのinputタグで出来ることを知る【図解付き】HTMLのinputを使うことでユーザーに「ユーザー名」「パスワード」などの情報を入力してもらうことができます。またtype属性によって様々な機能に切り替わるので、inputを使うことでどんなことが出来るのか解説していきます。...

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのformタグの使い方を覚えるHTMLのformタグを使うことでWebサーバー(バックエンド)とデータのやり取りを行うことが出来ます。「ユーザーの新規作成」「ログイン」「ブログの投稿」などWebサービスにはなくてはならないformタグの使い方を一緒に学習しましょう。...

今回の内容は以下のとおりです。

今回の内容
  • HTMLのformタグとは
  • HTMLのformタグで使う主な属性
  • HTMLのformタグとinputタグの連携方法

 

HTMLのformタグとは

HTMLのformタグはユーザーに入力したもらった情報をWebサーバーに送るときに使うタグです。

実際に情報を入力してもらうときに使われるタグには、inputタグselectタグoptionタグtextareaタグがあります。

しかし、input・select・option・textareaタグはデータの入力・選択を行うだけで、実際にデータをWebサーバーに送る機能は持っていません

そこで必要になるのが入力されたデータを実際にWebサーバーに送る機能になり、それを実現するのがformタグになります。

HTMLのformタグで使う主な属性

HTMLのformタグでよく使われる属性値に「action属性」と「method属性」があります。

それぞれの役割は次のとおりです。

action属性

action属性の値には、URLを指定します。

この指定したURLはデータの送り先のWebサーバーになります。

以下記事のスライドの8ページ目で実際にaction属性にTwitterのURLを入れたときの挙動がアニメーションで確認できます。

action属性で指定したTwitterのURLにしたがって、フォームの送信ボタンを押したときにTwitterにページ遷移しているのがわかるかと思います。

あわせて読みたい
HTMLのformタグの使い方を覚えるHTMLのformタグを使うことでWebサーバー(バックエンド)とデータのやり取りを行うことが出来ます。「ユーザーの新規作成」「ログイン」「ブログの投稿」などWebサービスにはなくてはならないformタグの使い方を一緒に学習しましょう。...

method属性

method属性にはHTTPメソッドを指定します。具体的にはmethod属性の値には「get」「post」のいずれか1つを選択してセットします。

HTTPメソッドについて詳しく知りたい方は以下の記事を参考にしていただけたらと思います。

getpostの意味の詳しい解説については上記参考リンクを参照していただけたらとお思いますが、ここではgetpostをどのように使い分けるか次に簡単にまとめます。

get・postの使い分け
  • get : データの取得を行う(Googleで入力したワードを元に検索を行うなど)
  • post : データの作成を行う(Twtterアカウントの新規作成、ブログ記事投稿など)

HTMLのformタグとinputタグの連携方法

HTMLのformタグとinputタグの連携方法は簡単です。

単純に次のサンプルコードのようにformタグの中にinputタグを入れるだけです。

 

inputタグだけでなく、さきほど紹介した、selectタグ・optionタグ・textareaタグもformタグの中に含めることで、formタグのaction属性で指定したURL先にデータを送ることが出来ます。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • formタグを使うことで入力した情報を実際にWebサーバーに送ることが出来る
  • formタグには主に使われる属性が2つある
    • action属性: データの送り先であるWebサーバーのURLを記述する
    • method属性: 「get」「post」のいずれかをセットする
      • get: データの取得(Google検索など)
      • post: データの作成(アカウント作成・ブログ記事投稿など)
  • formタグとinputタグを連携させるには、単純にformタグの中にinputタグを含めれば良い

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのformタグの使い方を覚えるHTMLのformタグを使うことでWebサーバー(バックエンド)とデータのやり取りを行うことが出来ます。「ユーザーの新規作成」「ログイン」「ブログの投稿」などWebサービスにはなくてはならないformタグの使い方を一緒に学習しましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です