26. GETリクエスト

オンライン教材 > HTML＆CSS超入門

フォームリクエスト

フォームリクエストとは

HTMLのフォームタグを使ってサーバにリクエストすることをフォームリクエストいいます。

リクエスト＆レスポンス

WebサーバにHTTPでアクセスすることをHTTPリクエスト、サーバが処理した結果を返すことをHTTPレスポンスといい、まとめてリクエスト＆レスポンスともいいます。

クライアントとサーバーのフロー

クライアントとサーバーの関係は以下のようなのフローになります。

  • ブラウザ（クライアント）からデータ送信（リクエスト）
  • ApacheやTomcatなどのWebサーバにデータ送信
  • Webサーバーでデータ受信
  • PHPやJavaなどのサーバープログラムにデータを受け渡して処理
  • Webサーバーからブラウザに結果を返す（レスポンス）

「クライアント＆サーバー」「リクエスト＆レスポンス」 はWebでよくでてくる用語ですので覚えておきましょう。

HTTPプロトコル

HTTP通信はHTTPプロトコルという規格で決まっており、「リクエスト行」「ヘッダフィールド」「ボディ」で構成されています。 ターミナルのcurlコマンドを使うとヘッダーフィールドの通信情報を確認することができます。

ヘッダフィールドの確認例
ターミナル
curl -I https://www.google.com
ターミナル
HTTP/2 200
content-type: text/html; charset=ISO-8859-1
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
date: Tue, 14 Jul 2020 02:58:06 GMT
server: gws
...

HTTPメソッド

RESTとCRUD

Webシステムの設計では、REST (REpresentational State Transfer)や CRUD (Create, Read, Update, Delete)といったモデル、インターフェイスでよく説明される用語です。

REST

RESTは４つの原則があります。

  • アドレス指定できるURIで公開されている
  • インターフェースが統一がされている
  • ステートレス（状態が変わらない）である
  • 結果がHTTPステータスコードで通知される

CRUD

CRUDはデータ処理するための方法を分類にしたものです。

  • 作成（Create）
  • 読み込み（Read）
  • 更新（Update）
  • 削除（Delete）

これらの詳しい廃用については、Webプログラミングで学習してください。

HTTPメソッドとは

クライアントがサーバーにリクエストしたときに、RESTやCRUDに基づいてサーバーが処理する方法のことをHTTPメソッドといいます。

HTTPメソッドの種類は以下のものがありますが、主に利用するメソッドは「GET」と「POST」です。

HTTPメソッド一覧
HTTPメソッド 処理
GET リソースの取得
POST リソースへのデータ追加など
PUT リソースの更新・作成
DELETE リソースの削除
HEAD リソースのヘッダの取得
PATCH リソースの部分置換
OPTIONS リソースがサポートしているメソッドの取得
TRACE そのまま結果を取得
CONNECT サーバーとの間にトンネルを確立

フォームの作成（GET）

HTMLフォームを作成してみましょう。検索処理の場合はGETリクエストで処理します。

ファイル構成

search.html

ファイル作成

Bootstrapの読み込み

「search.html」を作成し、CSSフレームワークのBootstrapをCDNで読み込みます。

search.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- BootstrpのCDN読み込み -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
...

コンテナー追加

mainタグのコンテナーと見出しを作成しておきます。

<body>
    <!-- mainコンテナー -->
    <main class="container">
        <h2>キーワード検索</h2>
    </main>
</body>

formタグの追加

コンテナーにフォームタグを追加します。

  • Emmet：form:get

GETメソッドのformタグが入力されました。actionを空欄にしておくと現在のファイルにリクエストします。

search.html
<form action="" method="get">

</form>

テキストボックスの追加

formタグにテキストボックスを追加します。

inputタグに、name=keywordを設定します。

search.html
<form action="" method="get">
    <input type="text" name="keyword" id="">
</form>

ボタンの追加

formタグにbuttonタグを追加します。

ボタン名を「Search」とします。

search.html
<form action="" method="get">
    <input type="text" name="keyword" id="">
    <button>Search</button>
</form>

フォームの確認

作成したフォームをブラウザで確認してみましょう。

Bootstrapの反映

Bootstrapに対応したクラス名でスタイルを設定します。

  <div class="container">
    <h2>キーワード検索</h2>
    <form action="" method="get">
      <input class="form-control" type="text" name="keyword" id="">
      <button class="btn btn-primary">Search</button>
    </form>
  </div>

スタイルが反映されました。

GETパラメータの確認

データの送信

テキストボックスにキーワードを入れて【Search】ボタンをクリックすると、フォームが実行されます。

クエリー

フォーム実行後のURLの ? 以降の文字列をクエリ（Query） といいます。

キーと値

クエリは キー（key）と値（value） で構成されたGETパラメータです。

キー=値

つぎのURL場合、キーが「keyword」、値が「HTML」です。

search.html?keyword=HTML
キー（key） 値（value）
keyword HTML

nameプロパティとキー

キーはHTMLフォームの name=keywordにあたります。

  • HTMLはプログラムではないため、送信されたデータを処理はできません。
  • 送信したデータ（GET、POST）は、PHPやJavaなどのサーバープログラムで取得＆処理します。

演習

問題1

HTTPで「POST」や「GET」のことを何といいますか？

  1. プロトコル
  2. リクエスト
  3. レスポンス
  4. メソッド

問題2

formタグでメソッドを設定するプロパティはどれですか？

  1. action
  2. method
  3. name
  4. type

問題3

「https://www.google.com/search?q=html」で、キー（key）はどれですか？

  1. ?
  2. q
  3. =
  4. html

問題4

「https://www.google.com/search?q=html」で、値（value）はどれですか？

  1. ?
  2. q
  3. =
  4. html
<< HTMLフォーム

HTML＆CSS超入門