Loading...
入力フォームを作ってみよう-後編

入力フォームを作ってみよう | 後編

公開
2018.04.19
更新
2018.10.29
  • 講座

  • HTML

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

様々な入力項目要素

入力項目を表示するには主に以下の3つのタグを使用します。

  • selectタグ
  • textareaタグ
  • inputタグ

順番に見ていきますが、その前にname属性に触れておきましょう。

name属性

入力フォーム内の入力項目にはname属性を追加します。
そして、入力フォームが送信された時にはname属性の値と入力値がセットで送信されます。

入力フォームを作ってみよう | 前編で見た通り、method="get"で送信された場合は"name属性に指定した値 = 入力した値"という形で送信されます。

selectタグ

selectタグはいくつかの選択肢を提示して、その中から1つの値を選んでもらう時に使用します。
選択肢が多い時に使うと良いでしょう。 ※

実際のコードを見てみます。

<select name="month">
  <option value="1">1月</option>
  <option value="2">2月</option>
  <option value="3">3月</option>
  <option value="4">4月</option>
  <option value="5">5月</option>
  <option value="6">6月</option>
  <option value="7">7月</option>
  <option value="8">8月</option>
  <option value="9">9月</option>
  <option value="10">10月</option>
  <option value="11">11月</option>
  <option value="12">12月</option>
</select>

セレクトボックス表示例

selectタグにname属性を追加し、要素の直下にoption要素を配置します。

選択肢にはこのoptionタグを使います。

optionタグにvalue属性が追加されており、要素の直下にはテキストが配置されていますね。
選択肢の表示には要素直下のテキストが使われ、フォームが送信された時にはvalue属性の値が使用されます。


※ 選択肢が2つ、3つの場合はこの後に出てくるinput="radio"の方が適している場合もあります

textareaタグ

textareaタグは長文のテキスト入力が想定される場合に使用します。
ブログの本文入力欄がイメージしやすいですね。

<textarea name="body"></textarea>

テキストエリア表示例

inputタグ

inputタグは様々な用途に使用されます。

inputタグにはtype属性が必須で、このtype属性にどんな値を設定するかによって表示方法が変わってきます。

よく使われるtype属性と値のセットを見ていきましょう。
type属性に絞って見ていくため、name属性は省略します)

なお、inputタグは閉じタグが不要です。

type="text"

<input type="text">

テキストエリア表示例

入力項目を表示します。
最も基本的な形です。

type="password"

<input type="password">

パスワードエリア表示例

入力項目を表示します。

type="text"と基本的な見た目は変わりませんが、入力されたテキストが隠れるのがtype="password"の特徴です。

type="checkbox"

<input type="checkbox" value="りんご">りんご<br>
<input type="checkbox" value="ぶどう">ぶどう<br>
<input type="checkbox" value="みかん">みかん<br>

チェックボックス表示例

複数選択可能な選択項目を表示します。

type="radio"

<input type="radio" value="19歳以下">19歳以下<br>
<input type="radio" value="20代">20代<br>
<input type="radio" value="30歳以上">30歳以上<br>

ラジオボックス表示例

いずれか1つのみ選択可能な選択項目を表示します。

type="hidden"

<input type="hidden" value="Gieer">

画面に表示させず、任意の値を送信することができます。

Googleなどの検索エンジンで、検索ワード以外にも様々な値が送信されているのはこのtype="hidden"が設定されているためです。

フォームを作ろう

それでは、フォームを作っていきましょう!

入力フォームを作ってみよう | 前編で、index.htmlに入力フォームの外側を追加しましたね。

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

入力フォーム表示例

ここに入力項目要素を追加して、ご意見フォームに仕上げていきましょう。

今回追加するのは以下の項目です。

  • お名前入力欄
  • ご意見入力欄
  • 回答希望選択欄
  • メールアドレス入力欄

順番に作っていきましょう。

お名前入力欄

お名前入力欄は、既に配置済みの"入力項目"を使って作成できますね。
以下のように書き換えましょう。

<form action="./index.html" method="get">
  <div>
    お名前:<input type="text" name="name">
  </div>
  <div>
    <button type="submit">送信する</button>
  </div>
</form>

お名前入力欄追加

ご意見入力欄

ご意見入力欄はたくさんのテキストが入力されることが想定されます。
これにはtextareaを使いましょう。

<form action="./index.html" method="get">
  <div>
    お名前:<input type="text" name="name">
  </div>
  <div>
    ご意見:
    <textarea name="opinion"></textarea>
  </div>
  <div>
    <button type="submit">送信する</button>
  </div>
</form>

ご意見入力欄追加

回答希望選択欄

回答希望選択欄は、「希望する」もしくは「希望しない」のいずれかを選択させるようにしましょう。
これにはtype="radio"属性を追加したinputタグを使いましょう。

<form action="./index.html" method="get">
  <div>
    お名前:<input type="text" name="name">
  </div>
  <div>
    ご意見:
    <textarea name="opinion"></textarea>
  </div>
  <div>
    回答:
    <input type="radio" name="lottery" value="need">希望する
    <input type="radio" name="lottery" value="notNeed">希望しない
  </div>
  <div>
    <button type="submit">送信する</button>
  </div>
</form>

回答希望選択欄追加

メールアドレス入力欄

メールアドレス入力欄はtype="text"のシンプルな入力欄としておきましょう。

<form action="./index.html" method="get">
  <div>
    お名前:<input type="text" name="name">
  </div>
  <div>
    ご意見:
    <textarea name="opinion"></textarea>
  </div>
  <div>
    回答:
    <input type="radio" name="lottery" value="need">希望する
    <input type="radio" name="lottery" value="notNeed">希望しない
  </div>
  <div>
    メールアドレス(回答を希望する方のみ):<input type="text" name="email">
  </div>
  <div>
    <button type="submit">送信する</button>
  </div>
</form>

メールアドレス入力欄追加

動作確認

それでは、各項目を入力して正常に入力値が送信されるか確認してみましょう。

入力例

URLにname属性の値とその入力内容がセットで表示されていれば完璧です!

パラメータ付与例

仕上げ

ご意見フォームは何らかの情報を「取得」するものではなく、「投稿」された内容によって何らかの処理をする、という方が正しそうです。
なので、formタグのmethod属性を"get"から"post"に変更しておきましょう。

また、見出しも設定しておくと区切りができて良いでしょう。

以下のように変更します。

<h2>ご意見フォーム</h2>
<form action="./index.html" method="post">
  ...省略
</form>

ご意見フォーム表示例

今度は送信してもURLには何も追加されません。
しかし、URLに追加されていないだけで入力値は正常に送信されているので大丈夫です。

まとめ

本講座では

  • 様々な入力項目要素
  • 入力項目の使い方
  • 入力フォームの作り方

について学びました。

これで入力フォームの基本を覚えました!
実はまだまだできることのある入力フォームですが、これから実践で使っていくことで使いこなせるようになるでしょう!

最終コード

  • 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>
  <h2>ご意見フォーム</h2>
  <form action="./index.html" method="post">
    <div>
      お名前:<input type="text" name="name">
    </div>
    <div>
      ご意見:
      <textarea name="opinion"></textarea>
    </div>
    <div>
      回答:
      <input type="radio" name="lottery" value="need">希望する
      <input type="radio" name="lottery" value="notNeed">希望しない
    </div>
    <div>
      メールアドレス(回答を希望する方のみ):<input type="text" name="email">
    </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>

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!