本講座ではHTMLで入力フォームを作ってみます。
前編では入力フォームの外側、後編では内側(入力項目)を作っていきます。

入力フォームの準備

入力フォームを作るにはformタグを使用します。
そして、form要素の中に入力項目要素と送信ボタン要素を配置します。
こうすることで、入力項目の内容を送信することができます。

form要素の中には専用の要素だけでなく、divpなどの通常のHTML要素も配置可能です。

では、以下のコードをindex.htmlbody要素の一番下に追加しましょう。
それぞれのタグや属性の意味はこの先で順に見ていきますので、現時点では分からなくても大丈夫です。

<form action="./index.html" method="get">
  <div>
    入力項目:<input type="text" name="item">
  </div>
  <div>
    <button type="submit">送信する</button>
  </div>
</form>

表示を確認してみます。

入力フォーム表示例

一番下に入力項目と送信ボタンが表示されたでしょうか?
はい、完璧です!

動作確認

入力フォームを送信するとどういった動きになるか、実際に見てみましょう。

何か値を入力して送信をしてみます。

入力例

送信ボタンを押すと入力した値が消えます。

次に、URLに注目してください。

入力フォーム自画面送信後

item=Gieerという文字が追加されていますね。
これで入力した値を無事に送信することができました。

今回、入力項目要素にはinputタグを使用し、name属性に"item"という値を指定しました。
その結果、"inputタグのname属性に指定した値 = そのinputタグに入力した値"という形で入力項目の内容を送信することができました。

formタグの属性

formタグにactionmethodという属性を指定しています。

action属性の値は任意のパスになります。
method属性の値はgetまたはpostになります。 ※

それぞれどういった働きになるのか見ていきましょう。


getpostは大文字でGETPOSTと記述されることもありますが、HTMLで大文字を使う機会は少ないため、Gieerでは小文字を使います

action="path"

action属性は"どのURLに入力フォームの内容を送信するか"を指定するための属性です。

今回の例ではaction="./index.html"とし、自画面に入力内容を送信しました。
その結果として送信した内容の文字列がURLに追加されています。

action属性の値を./link.htmlなどに変えて送信してみると、画面が切り変わり、尚且つURLに送信した内容の文字列が追加されるのが確認できます。

入力フォーム他画面送信後

method="get"

method="get"は入力フォームの内容をgetという方法で送信する、ということを意味します。
文字の通り、何かの情報を取得するためにはgetを使います。(※1)

身近なものはGoogleなどの検索エンジンです。
検索フォームを送信すると検索結果ページに飛びますが、URLには送信した内容(※2)の文字列がずらっと追加されています。

このようにmethod="get"は送信した内容が"URLに追加される"という特徴があるため、入力フォームを送信して得た結果(URL)をそのまま誰かに共有し、閲覧してもらうことができます。


※1 実際にはgetで送信された内容を元に情報を構築する、という処理も必要になります
※2 入力した単語以外にも様々な内容が同時に送信されています

method="post"

method="post"はフォームの内容をpostという方法で送信する、ということを意味します。
何かの情報を投稿するためにはpostを使います。

身近なものはサービスの新規登録フォームやログインフォームです。
送信された内容が処理され、自身のユーザーページが作成されたり、ログインすることが可能になります。

postgetのように"URLには追加されません"。

送信ボタン

入力フォームを送信するには送信ボタンが必要になります。
今回は以下のbuttonタグを設置しました。

<button type="submit">送信する</button>

buttonタグは通常、ボタンを表示するのみですが、form要素の中に配置し、且つtype="submit"という属性を追加することで入力フォームの送信ボタンとして機能します。

入力フォーム送信時の処理

実際にサービスで入力フォームを使用する場合は、送信された内容を元になんらかの処理を行います。
どんな処理があるのか、簡単に見ていきましょう。
(わからない単語が出てきても、現時点では問題ありません)

  • 送信内容をメールで送る

送信された内容をそのままメールで送信します。
送信先や自動返信メールなどの設定はサーバーで行います。

  • 送信内容を元に情報を返す

Google・Yahoo、ブログの検索フォームなど、ユーザーが入力した内容を元にサーバーで情報を探し、見つかった情報を検索結果ページに返して表示します。
情報はデータベースから取得し、PHPなどの動的にHTMLを表示できる言語を使って検索結果を表示します。

  • 送信内容を元に専用ページを表示する

送信内容が、データベースに保存されているユーザー情報と合致する場合に、ユーザー専用のデータをページに返して表示します。
ログインしてから一定期間は常に専用ページの閲覧可能にしたい、という場合はに、クッキーを使用してログイン状態を維持します。

もしあなたが入力フォームを作って欲しいと頼まれたとしても、上記のような処理まで作って欲しいと言われることは恐らくありません。
現時点では理解できなくても問題ありませんので、安心してくださいね。

まとめ

本講座では

  • フォームの作り方
  • フォームの動作
  • formタグの属性

を学びました。

続く後編では入力項目について学んでいきます!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <form action="./index.html" method="get">
    <div>
      入力項目:<input type="text" name="item">
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...