フォーム関連の要素

HTMLでは、ユーザーが入力したテキストや選択した項目を送信することが出来ます。今回は、お問い合わせフォームのような入力フォームを作成してみましょう。ただし、HTMLでは送信した情報を受け取ることが出来ないので、情報を受け取るには「PHP (WEBサーバーで実行するプログラミング言語)」などといったプログラミング言語が必要となることを知っておきましょう。

フォーム関連の要素
要素名 意味・役割
<form> フォームを表す
<input> フォームの部品を表す
<textarea> 複数行のテキストフィールドを表す
<select> セレクトボックスを表す
<option> セレクトボックスの選択肢を表す

form要素

<form>要素は、interactiveインタラクティブ formフォームの略で、フォームを表す要素です。ユーザーが入力するフィールドや選択する項目など、フォームで使う部品は全てこの<form>要素内に配置することが基本となります。 なお、この<form>要素には、action属性を使って、フォームの送信先を指定します。

カテゴリ
フロー・コンテンツ
コンテンツ・モデル
フロー・コンテンツ
ただし、<form>要素内に、別の<form>要素は配置できない。
主な属性
  • action属性: フォームの送信先を指定する
  • method属性: フォームの送信方法を指定する ( "post" または、 "get")

サンプル

<form>要素の例
<form action="conf.php" method="post">
  <dl>
    <dt>ユーザー名</dt>
    <dd>
      【テキストフィールド】
    </dd>
    <dt>パスワード</dt>
    <dd>
      【テキストフィールド】
    </dd>
  </dl>
  <p>ログインする</p>
</form>

フォームを作る際は、このようにフォーム全体を<form>要素で囲みます。<form>要素には、action属性で、ユーザーが入力したデータの送信先をパスで指定しますaction属性の値を空にした場合や action属性自体を省略した場合は、そのファイル自身に送信)。また、データを送信する方法は、"get"(初期値)"post"があります。これらには以下の違いがありますが、今のタイミングでは少々難しいので、とりあえず、サイト内検索のような検索キーワードを入力するフォームは、"get"個人情報などを送信する入力フォームは、"post"と覚えておきましょう。詳しくは、PHPなどのプログラミング言語を学習するタイミングで理解すれば大丈夫です。

"get"
URLの後ろにデータを付けて送信する方法 (初期値)
"post"
HTTPリクエストのボディ部分にデータを付けて(ブラウザがWEBサーバにaction属性で指定したファイルを要求する時の内容として)送信する方法

input要素

<input>要素は、フォームの部品を表します。ユーザーがテキストを入力するテキストフィールドや、項目を選択する部品、送信ボタンなどをこの<input>要素こので生成します。どの部品にするかは、type属性で指定します。

カテゴリ
type属性の値が "hidden" 以外の場合はインタラクティブ・コンテンツにも分類される
コンテンツ・モデル
空要素
主な属性
  • type属性: 部品の種類を指定する
  • name属性: 部品の名前を指定する
  • value属性: 送信する値(ボタンの場合はボタンに表示される文字)を指定する
  • size属性: テキスト入力フィールドに表示する半角の文字数を指定する (初期値:20)
  • maxlength属性: テキスト入力フィールドに入力できる最大の文字数を指定する
  • checked属性: 予め選択状態にする (ラジオボタンとチェックボックスのみ)

input 要素の基本的な使い方

<input type="部品の種類" name="部品の名前" value="初期値 / 送信されるデータ / ボタンのラベル">

<input>要素は、フォームの部品type属性で指定します。以下は、主なtype属性に指定できる属性値です。

主なtype属性の属性値
属性値 部品の種類
text 1行分のテキストフィールド
password 1行分のパスワードフィールド (表示上は「●」などで隠される)
radio ラジオボタン (複数選択できない選択部品)
checkbox チェックボックス (複数選択可能な選択部品)
file ファイル送信用ボタン
image 画像を使った送信ボタン
submit 送信ボタン
reset リセットボタン
button 汎用ボタン

name属性は、部品の名前を指定します。この名前はユーザーが送信した値を取り出すときに必要になります。 また、value属性については、type属性が "text"などの入力フィールドの場合には、初期値を指定することができ、"radio" や "checkbox"などの選択部品の場合には、送信されるデータを指定します。 "submit" や "reset" などのボタンの場合は、ボタンの上に表示される文字を指定します。

テキストフィールドのサンプル

<input>要素でテキストフィールドを作成した例
<form action="conf.php" method="post">
  <dl>
    <dt>ユーザー名</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>パスワード</dt>
    <dd>
      <input type="password" name="your_password">
    </dd>
  </dl>
  <p>ログインする</p>
</form>
ブラウザでの表示例

RERUN

type属性が "text" や "password"などのテキストフィールドの場合は上記のようになります。name属性は、ユーザーに問い掛けた質問を英語で指定することが一般的です。

ボタンのサンプル

<input>要素で送信ボタンを作成した例
<form action="conf.php" method="post">
  <dl>
    <dt>ユーザー名</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>パスワード</dt>
    <dd>
      <input type="password" name="your_password">
    </dd>
  </dl>
  <p><input type="submit" value="ログインする"></p>
</form>
ブラウザでの表示例

RERUN

type属性が "submit" や "reset"などのボタンの場合は上記のようになります。ボタンの上に表示する文字列はvalue属性で指定します。

選択部品のサンプル

<input>要素で選択部品を作成した例
<form action="conf.php" method="post">
  <dl>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>出来ること(複数選択可)</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>
ブラウザでの表示例

RERUN

type属性が "radio" や "checkbox"などの選択部品の場合は上記のようになります。これらの選択部品には必ずvalue属性を指定しましょう。この属性値が選択時に送信されるデータになります。また、name属性は同じ値にするようにしましょう。

HTML5では type属性の属性値が増えた

HTML5からはtype属性に下記の属性値が追加されました。ただし、ブラウザによって実装状況などが異なるため、これらの属性値を利用する場合は、予め対応するブラウザで実装可能かを確認してから利用するようにしましょう。

HTML5で追加されたtype属性の属性値
属性値 部品の種類
search 1行分の検索フィールド
tel 1行分の電話番号フィールド
url 1行分のURLフィールド
email 1行分のメールアドレスフィールド
datetime 日時入力用部品 (タイムゾーンあり)
datetime-local 日時入力用部品 (タイムゾーンなし)
date 年月日入力用部品
month 年月入力用部品
week 年週入力用部品
time 時刻入力用部品
number 数値入力用部品
range スライド型入力部品
color 色入力用部品
ブラウザでの表示例

RERUN

form要素とinput要素を使ってみよう

それでは、<form><input>、を使ってフォームを作ってみましょう。

  1. 「Chapter16」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、<form><input>をマークアップ
Chapter16/index.html
<h1>僕の仲間募集フォーム</h1>
<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>メールアドレス</dt>
    <dd>
      <input type="text" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>出来ること(複数選択可)</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

複数行入力できるテキストフィールド

上記で紹介した<input>要素のテキストフィールドは全て1行分の入力フィールドになります。複数行入力するには<textarea>要素を使います。

textarea要素

<textarea>要素は、複数行の入力フィールドであることを表します。この<textarea>要素の中に文字列を配置するとそれば、テキストエリアの初期値になります。

カテゴリ
コンテンツ・モデル
テキストのみ
主な属性
  • name属性: テキストエリアの名前を指定する
  • cols属性: テキストエリアの1行あたりに表示する文字数を半角で指定する (初期値:20)
  • rows属性: テキストエリアに表示する行数を指定する (初期値:2)

サンプル

<textarea>要素の例
<form action="conf.php" method="post">
  <dl>
    <dt>つぶやき</dt>
    <dd>
      <textarea name="mutter" rows="8" cols="40"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="つぶやく"></p>
</form>
ブラウザでの表示例

RERUN

基本的に<textarea>要素は、このように要素内に何も配置せずに利用します。もし、要素内にテキストを配置した場合は、そのテキストが初期値となります。なお、この<textarea>要素にもname属性を使って部品の名前を指定することを忘れないようにしましょう。また、1行あたりに表示する文字数を半角でcols属性に指定し、表示する行数をrows属性に指定します。

textarea要素を使ってみよう

それでは、<textarea>要素を使ってみましょう。

  1. 「Chapter16」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、「メッセージ」の項目を追加し、<textarea>要素をマークアップ
Chapter16/index.html
<h1>僕の仲間募集フォーム</h1>
<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>メールアドレス</dt>
    <dd>
      <input type="text" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>出来ること(複数選択可)</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
    <dt>メッセージ</dt>
    <dd>
      <textarea name="message" cols="40" rows="8"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

セレクトボックスによる選択

最後に都道府県などの選択によく使う、セレクトボックスによる選択部品を紹介します。セレクトボックスは、<select>要素の中に<option>要素で選択肢を作成します。

select要素

<select>要素は、セレクトボックスであることを表します。この<select>要素で選択肢全体を囲みます。

カテゴリ
コンテンツ・モデル
0 個以上の<option>要素、または<optgroup> 要素
主な属性
  • name属性: セレクトボックスの名前を指定する
  • size属性: 1度に見れる項目の数を指定する (リストボックスになる)
  • multiple属性: 複数の項目を選択できるようにする

サンプル

<select>要素の例
<form action="conf.php" method="post">
  <dl>
    <dt>希望する職種</dt>
    <dd>
      <select name="job">
        WEBディレクター
        WEBデザイナー
        WEBプログラマー
        フロントエンド・エンジニア
      </select>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>

<select>要素は、このように選択肢全体を囲みます。 そして各選択肢は、<option>要素でマークアップします。なお、この<select>要素にもname属性を使って部品の名前を指定することを忘れないようにしましょう。

option要素

<option>要素は、セレクトボックスの選択肢であることを表します。

カテゴリ
なし
コンテンツ・モデル
主な属性

サンプル

<option>要素の例
<form action="conf.php" method="post">
  <dl>
    <dt>希望する職種</dt>
    <dd>
      <select name="job">
        <option value="WEBディレクター">WEBディレクター</option>
        <option value="WEBデザイナー">WEBデザイナー</option>
        <option value="WEBプログラマー">WEBプログラマー</option>
        <option value="フロントエンド・エンジニア">フロントエンド・エンジニア</option>
      </select>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

<option>要素は、このように各選択肢を囲みます。 送信するデータは、value属性に指定し、ユーザーが選択する為のラベルは、要素内容として記述します。

セレクトボックスを使ってみよう

それでは、<select>要素、<option>要素をでセレクトボックス作ってみましょう。

  1. 「Chapter16」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、「希望する職種」の項目を追加し、<select>要素、<option>要素をマークアップ
Chapter16/index.html
<h1>僕の仲間募集フォーム</h1>
<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>メールアドレス</dt>
    <dd>
      <input type="text" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>希望する職種</dt>
    <dd>
      <select name="job">
        <option value="WEBディレクター">WEBディレクター</option>
        <option value="WEBデザイナー">WEBデザイナー</option>
        <option value="WEBプログラマー">WEBプログラマー</option>
        <option value="フロントエンド・エンジニア">フロントエンド・エンジニア</option>
      </select>
    </dd>
    <dt>出来ること(複数選択可)</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
    <dt>メッセージ</dt>
    <dd>
      <textarea name="message" cols="40" rows="8"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

練習問題

「Chapter16」 -> 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • フォームの送信先: "conf.php"
    • 送信方法: "post"
    • 文字列「お名前」
      • 種類: 1行分のテキストフィールド
      • 部品の名前: "your_name"
    • 文字列「メールアドレス」
      • 種類: 1行分のメールアドレスフィールド
      • 部品の名前: "your_mail"
    • 文字列「お問い合わせ店舗」
      • 種類: ラジオボタン
      • 部品の名前: "shop"
      • 送信するデータ: ラベルと同じ
    • 文字列「お問い合わせ種別」
      • セレクトボックスの名前: "type"
      • 送信するデータ: ラベルと同じ
    • 文字列「お問い合わせ内容」
      • テキストエリアの名前: "inquiry"
      • 1行あたりに表示する文字数: "30"
      • 表示する行数: "10"
    • 文字列「入力確認画面へ」
      • 種類: 送信ボタン
      • 送信ボタンの文字: "入力確認画面へ"
ブラウザでの完成例

RERUN

解答例