フォーム関連の要素 0:14

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

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

RERUN

新しいウインドウで表示する

フォーム全体を、<form>タグで囲む 1:26

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

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

form要素の使い方

form要素のフォーマット
<form action="送信先" method="get（初期値） / post">
    ・・・ フォームのコントロール部品 ・・・
</form>

form要素は、フォーム全体を<form> 〜 </form>で囲みます。
そして、action属性で、送信先、method属性で、送信方法を、「get」または、「post」で指定します。
（method属性を省略した場合は、初期値の「get」になります。）

<form>要素の例
<form action="receive.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>タグで作る。 7:14

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

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

input要素の使い方

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

input要素は、コントロール部品を表示したいとこに、<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="receive.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="receive.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="receive.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要素を使ってみよう 14:57

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

  1. 「Chapter16」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、form要素とinput要素をマークアップ
Chapter16/index.html
<h1>僕の仲間募集フォーム</h1>
<form action="receive.html" 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

新しいウインドウで表示する

複数行入力するには、textarea要素 32:42

textarea（テキストエリア）要素は、複数行の入力フィールドであることを表します。
上記で紹介したinput要素のテキストフィールドは全て1行分の入力フィールドになります。
複数行文字を入力するには、このtextarea要素を使います。
textarea要素は、inputと違いが終了タグが必要となります。
もし、要素内に文字列を配置すると、その文字がテキストエリアの初期値になります。

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

textarea要素の使い方

<textarea name="部品の名前" cols="1行あたりに表示するだいたいの文字数" rows="表示する行数"></textarea>

textarea要素は、複数行入力できるフィールドを表示したい場所に配置します

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

RERUN

新しいウインドウで表示する

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

textarea要素を使ってみよう 36:59

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

  1. 「Chapter16」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、「メッセージ」の項目を追加し、textarea要素をマークアップ
Chapter16/index.html
<h1>僕の仲間募集フォーム</h1>
<form action="receive.html" 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要素で囲む。 40:09

select（セレクト）要素は、セレクトボックスであることを表す要素です。
セレクトボックスは、都道府県などの選択によく使う、選択メニューのことです。
セレクトボックス全体をこのselect要素で囲み、各選択肢は、あとで紹介するoption要素を使って表します。

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

select要素の使い方

select要素は、セレクトボックスの選択肢たちを、<select> 〜 </select>で挟みます。
そして、name属性で、部品の名前を指定します。

select要素の例
<form action="receive.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要素でマークアップします。

選択メニューの選択肢は、option要素で作る。 41:27

option（ オプション要素は、セレクトボックスの選択肢であることを表します。

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

option要素の使い方

option要素は、セレクトボックスの選択肢を、<option> 〜 </option>で挟みます。
そして、value属性で、送信する値を指定します。

<option>要素の例
<form action="receive.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属性に指定し、ユーザーが選択する為のラベルは、要素内容として記述します。

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

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

  1. 「Chapter16」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、「希望する職種」の項目を追加し、select要素、option要素をマークアップ
Chapter16/index.html
<h1>僕の仲間募集フォーム</h1>
<form action="receive.html" 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

新しいウインドウで表示する

練習問題 47:04

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

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

RERUN

新しいウインドウで表示する

解答例

まとめ 59:25

フォームの作成方法はわかりましたか？

  • form 要素でフォーム全体を囲む
  • input、textarea、select 要素でコントロール部品を作成する
  • HTMLでデータの送信はできるが受信は出来ない。