INDEX
目次
前の章に戻るHTML/CSS入門編 16章 フォームを作成しよう
本章では、サーバーにデータを送信するための入力パーツであるフォームのタグを解説します。
【16-1】フォームについて知ろう
フォームとは？
フォームとは、Webページ上でユーザーが情報を入力するためのインターフェースのことです。数多くの種類があり、HTMLタグを使って作成することができます。
Webサイト内のお問い合わせページ、検索ボックス、会員ページへのログイン画面など、フォームを使って作成されたページにはいろいろなものがあります。
Webサイト内のお問い合わせページ、検索ボックス、会員ページへのログイン画面など、フォームを使って作成されたページにはいろいろなものがあります。
フォームはWebサイトのこんなところに使われている
■ お問い合わせページ
株式会社アップグレード
https://upgradeinc.co.jp/contact/
https://upgradeinc.co.jp/contact/
■ 検索ボックス
Google
https://www.google.co.jp/
https://www.google.co.jp/
■ ログイン画面
LivePocket-Ticket-
https://t.livepocket.jp/login
https://t.livepocket.jp/login
フォームとサーバーの関係について知ろう
- お名前やメールアドレス、パスワードの入力欄、アンケート用のラジオボタンやチェックボックス、複数項目から選択できるプルダウンメニューなど、フォームの入力パーツには数多くの種類があり、全てHTMLのタグを使ってブラウザに表示させることができます。
- HTMLタグによってできることは、あくまでもWebページに入力パーツを表示し、入力されたデータをサーバーに送信するところまでです。
- サーバーに送られてきた入力内容をWebサイトの管理者にメールで転送したり、検索結果ページを表示したり、ログインしてマイページに遷移させたりするためには、サーバーサイドのプログラムを作成して処理を行う必要があります。
【図解】フォームとWebサーバーの関係
それでは、実際にHTMLのフォームを作成してみたいと思います。
演習の準備として、「start」フォルダ内のindex.htmlをエディターで開いておきましょう。
【16-2】フォームの基本形を学ぼう
formタグを入力しよう
全てのフォームの入力パーツは、formタグの内側にそれぞれのパーツを作成するためのタグをマークアップすることにより作成します。
以下は、formタグの基本書式です。
以下は、formタグの基本書式です。
■ formタグの基本書式
<form action="データ送信先のURL" method="データ送信方式"> <!--ここにフォームパーツをつくる--> </form>
formタグの基本書式
- <form>〜</form>の内側にフォームの入力パーツや送信ボタンを作成します。
-
フォームを作成して、ユーザーが入力したデータをサーバーに送信するためには、
action属性と
method属性を追加・設定することが必須となります。
- 本教材ではサーバーサイドのプログラムは扱わないため、action属性の属性値はダミーとなります。
それでは、次のサンプルコードのようにformタグを入力してみましょう。
<body>
<h1>フォームを作成しよう</h1>
<form action="#" method="post">
<h2>テキストボックスを作成しよう</h2>
<h2>パスワード入力欄を作成しよう</h2>
<h2>チェックボックスを作成しよう</h2>
<h2>ラジオボタンを作成しよう</h2>
<h2>テキストエリアを作成しよう</h2>
<h2>プルダウンメニューを作成しよう</h2>
<h2>送信ボタンとリセットボタンを作成しよう</h2>
</form>
</body>HTML/CSS入門編 サンプルコード16-1
【16-3】よく使うフォームパーツを作成しよう
続いて、よく使うフォームの入力パーツを作成します。
- <form>〜</form>内に作成した入力パーツに入力された内容が、送信ボタンクリック時にサーバーに送信されます。
テキストボックス（1行のテキスト入力欄）を作成しよう
- まずは、最もよく使うフォームパーツのひとつであるテキストボックス（1行のテキスト入力欄）を作成します。
- お問い合わせフォームのお名前やメールアドレス、電話番号などの入力欄として、また検索ボックスとしても利用されます。
多くのフォームの入力パーツはinputタグを使って作成します。
■ inputタグの基本書式
<input type="入力パーツの種類" name="データ名">
inputタグの基本書式
- input要素はデータ入力を意味する要素で、type属性を追加することにより、さまざまな種類の入力パーツを作成することができます。
- テキストボックスを作成するときの値はtextです。
■ テキストボックスを作成する
<h2>テキストボックスを作成しよう</h2> <input type="text" name="search-word">
HTML/CSS入門編 サンプルコード16-2
- name属性は送信されるデータ（入力された内容）に名前をつけるために使います。
- フォームのデータがサーバーに送信されると、サーバーサイドのプログラムはname属性の値を使ってデータを受け取り、処理を行います。
- そのため、システム開発者にとっては大変重要な属性です。
- フォームの入力パーツは、CSSによるフォームのスタイリングも可能です。
- inputタグにclass名をつけて幅・高さや文字サイズ、背景色などを指定し、好みのデザインに変えることができます。
※CSSによるフォームのスタイリングは、HTML/CSS 実践編で学習します。
■ ブラウザプレビュー
パスワード入力欄を作成しよう
- パスワード入力欄とは、入力内容が入力した本人にしかわからないように伏せ字で表示されるテキスト入力欄のことです。
- type属性の属性値をpasswordとします。
- 以下のコードを入力後、実際に数字やテキストを入力してみましょう。
■ パスワード入力欄を作成する
<h2>パスワード入力欄を作成しよう</h2> <input type="password" name="pass-word">
HTML/CSS入門編 サンプルコード16-3
■ ブラウザプレビュー
チェックボックスを作成しよう
- チェックボックスとは、複数の項目を同時に選択できる入力パーツのことです。
- type属性の属性値をcheckboxとします。
- 初期表示で選択された状態にしておきたいときは、checked属性（属性値は不要）を追加します。
- 複数のチェックボックスのデータをまとめてサーバーに送信する場合は、name属性に同じ名前を指定します。
- value属性にはチェックされたときにサーバーに送信されるデータを指定します。
- 例えば、下記コードでは、スイカのチェックボックスがチェックされた状態で送信ボタンがクリックされると、サーバーには「favorite_fruits=watermelon」というデータが送信されます。
■ チェックボックスを作成する
<h2>チェックボックスを作成しよう</h2> <p>好きなフルーツを選択してください。（複数項目選択可）</p> <input type="checkbox" name="favorite_fruits" value="watermelon">スイカ <input type="checkbox" name="favorite_fruits" value="melon">メロン <input type="checkbox" name="favorite_fruits" value="orange">オレンジ <input type="checkbox" name="favorite_fruits" value="banana">バナナ
HTML/CSS入門編 サンプルコード16-4
■ checked属性を追加
<input type="checkbox" name="favorite_fruits" value="watermelon" checked>スイカ
HTML/CSS入門編 サンプルコード16-5
■ ブラウザプレビュー
【画面収録】チェックボックス
■ checked属性を追加（初期表示）
ラジオボタンを作成しよう
- ラジオボタンとは、複数の選択肢から1つだけ選択させるための入力パーツです。
- type属性の属性値をradioとします。
- 初期表示で選択された状態にしておきたいときは、checked属性（属性値は不要）を追加します。
- value属性にはチェックされたときにサーバーに送信されるデータを指定します。
- 例えば、下記コードでは、「希望」のラジオボタンが選択された状態で送信ボタンがクリックされると、サーバーには「mail-magazine=yes」というデータが送信されます。
■ ラジオボタンを作成する
<h2>ラジオボタンを作成しよう</h2> <h3>メルマガ登録</h3> 希望<input type="radio" name="mail-magazine" value="yes" checked> 不要<input type="radio" name="mail-magazine" value="no">
HTML/CSS入門編 サンプルコード16-6
■ ブラウザプレビュー
【画面収録】ラジオボタン
テキストエリア（複数行のテキスト入力欄）を作成しよう
- テキストエリアとは、複数行のテキスト入力欄のことで、textareaタグを使って作成します。
- 長文や自由記述欄に主に使用します。
■ textareaタグの基本書式
<textarea name="データ名" cols="1行の文字数" rows="行数" maxlength="最大入力文字数"></textarea>
HTML/CSS入門編 サンプルコード16-7
- cols属性とrows属性で指定する数値は、ブラウザ表示上の1行あたりの文字数と行数です。
- 入力欄の幅・高さはこの数値で調整することができますが、実際の表示サイズはフォントやブラウザによって多少異なりますので、正確なサイズ調整を行う場合はCSSでサイズ指定することをお勧めします。
- また、指定した文字数と行数を超えてもデータの入力は可能です。
- maxlength属性を追加すると、最大入力文字数を設定して入力可能な文字数を制限することができます。
■ テキストエリアを作成する
<h2>テキストエリアを作成しよう</h2> <textarea name="comment" cols="50" rows="8" maxlength="150"></textarea>
HTML/CSS入門編 サンプルコード16-8
■ ブラウザプレビュー
プルダウンメニューを作成しよう
- プルダウンメニューとは、複数の選択肢の中から1つを選ぶための入力欄のことで、selectタグとoptionタグを組み合わせて作成します。
- 機能はラジオボタンに近いですが、選択肢がメニュー形式で折りたたまれて表示されるため、画面スペースを節約できるという利点があります。
- 選択肢の数が多い場合（例：全都道府県名から選択させるなど）には、ラジオボタンよりもプルダウンメニューの方が便利です。
■ selectタグとoptionタグの基本書式
<select name="データ名">
<option value="送信データ">選択肢のテキスト（ラベル）</option>
・・・・
</select>HTML/CSS入門編 サンプルコード16-9
- メニューの選択項目はoptionタグで作成します。
- 初期表示で特定の選択肢が選択された状態にしたい場合は、selected属性（属性値は不要）をoptionタグに追加します。
- value属性には選択されたときにサーバーに送信されるデータを指定します。
- 例えば、下記サンプルコードでは、SS席のメニュー項目が選択された状態で送信ボタンがクリックされると、サーバーには「seat=SS」というデータが送信されます。
■ プルダウンメニューを作成する
<h2>プルダウンメニューを作成しよう</h2> <select name="seat"> <option value="" selected>席種を選択してください</option> <option value="SS">SS席</option> <option value="S">S席</option> <option value="A">A席</option> <option value="B">B席</option> </select>
HTML/CSS入門編 サンプルコード16-10
■ ブラウザプレビュー
【画面収録】プルダウンメニュー
selectタグのmultiple属性の使い方
- また、selectタグにmultiple属性（属性値は不要）を追加することにより、shiftキーを押しながら複数選択が可能なメニューになります。
- ⌘（Mac）、Ctrl（Windows）を押しながらだと、間を空けて複数選択ができます。
-
size属性を追加すると、画面に表示する選択肢の行数を設定できます。
- 下記サンプルコードは、size="4"をselectタグに追加していますので、初期表示が4行になります。
■ selectタグにmultiple属性を追加する
<select name="seat" multiple size="4"> <option value="" selected>席種を選択してください</option> <option value="SS">SS席</option> <option value="S">S席</option> <option value="A">A席</option> <option value="B">B席</option> </select>
HTML/CSS入門編 サンプルコード16-11
■ ブラウザプレビュー
【画面収録】selectタグにmultiple属性を追加
送信ボタンとリセットボタンを作成しよう
-
送信ボタンは、フォームに入力されたデータをサーバーに送信するためのボタンです。
- inputタグのtype属性の属性値をsubmitにします。
-
リセットボタンは、フォーム内のすべての入力内容を初期状態に戻すボタンです。
- inputタグのtype属性の属性値をresetにします。
- 誤クリックの防止のため、リセットボタンを設置しないサイトも多いです。
- どちらのボタンもvalue属性でボタン上に表示するテキスト（ラベル）を指定することができます。
■ 送信ボタンとリセットボタンを作成する
<h2>送信ボタンとリセットボタンを作成しよう</h2> <input type="submit" value="送信する"> <input type="reset" value="リセットする">
HTML/CSS入門編 サンプルコード16-12
■ ブラウザプレビュー
【画面収録】リセットボタンの挙動
labelタグを使ってフォームの操作性を向上させよう
- labelタグは、フォームの入力欄とラベル（説明文）を関連付けるためのタグです。
- 直接フォームの入力パーツをクリックする以外に、 ラベル部分をクリックしたときも入力パーツにフォーカスが合います。
- labelタグの基本書式には２種類ありますが、挙動は同じです。
labelタグの基本書式1：入力欄を囲む方法
<h3>メルマガ登録</h3> <label> 希望<input type="radio" name="mail-magazine" value="yes" checked> </label> <label> 不要<input type="radio" name="mail-magazine" value="no"> </label>
HTML/CSS入門編 サンプルコード16-13
- labelタグの中にinputタグを直接記述する方法です。
- ラベルをクリックすると入力パーツにフォーカスが合います。
labelタグの基本書式2：for属性で関連付ける方法
<h3>labelタグの基本書式2：for属性で関連付ける方法</h3> <p> <label for="mail">メールアドレス：</label> <input type="text" name="mail" id="mail"> </p> <p> <label for="password">パスワード：</label> <input type="password" name="password" id="password"> </p>
HTML/CSS入門編 サンプルコード16-14
- labelタグのfor属性に、対象のフォームパーツのid属性の値を指定します。
- こちらも、ラベルをクリックすると入力パーツにフォーカスが合います。
- この方法は、ラベルと入力欄が離れている場合にも有効です。
- Flexboxによるラベルと入力パーツを整列させるレイアウトなども可能です。
【画面収録】labelタグを使ってフォームの操作性を向上させよう
【16-4】フォームパーツ一覧
ここまでに解説したフォームパーツ以外にも、HTMLにはたくさんのフォームパーツが用意されています。
それぞれの特長をよく理解した上で、適切なフォームパーツを選定して使いましょう。
それぞれの特長をよく理解した上で、適切なフォームパーツを選定して使いましょう。
従来から使用可能なフォームパーツ一覧
【16-3】よく使うフォームパーツを作成しようで解説したフォームパーツは全て従来から使用可能なものです。
その他、次のフォームパーツがあります。
その他、次のフォームパーツがあります。
種類 |
書式 |
説明 |
|---|---|---|
ファイルアップロード |
<input type="file" name="attached-file"> |
ユーザーが自分のパソコンやスマートフォンからファイル（画像、PDF、ドキュメントなど）を送信するための入力欄です。 |
汎用ボタン |
<input type="button" value="ボタン"> |
クリックしてもフォームの送信やリセットは行われません。JavaScriptなどで自由に動作を設定するためのボタンです。 |
画像ボタン |
<input type="image" src="images/btn.png"> |
画像を使って送信ボタンを表示するためのフォームパーツです。src属性に表示したい画像ファイルのパスを指定します。 |
<form> <h3>従来から使用可能なフォームパーツ一覧</h3> <h4>ファイルアップロード</h4> <input type="file" name="attached-file"> <h4>汎用ボタン</h4> <input type="button" value="ボタン"> <h4>画像ボタン</h4> <input type="image" src="images/btn.png"> </form>
HTML/CSS入門編 サンプルコード16-15
■ ブラウザプレビュー
HTML5以降使用可能になった主なフォームパーツ一覧
HTML5では、inputタグのtype属性の種類が豊富に用意され、さまざまなデータの入力が可能になりました。
※非対応のブラウザもありますので、同様の機能をJavaScriptで実装することが推奨される場合もあります。
※非対応のブラウザもありますので、同様の機能をJavaScriptで実装することが推奨される場合もあります。
種類 |
書式 |
説明 |
|---|---|---|
メールアドレス |
<input type="email" name="email"> |
最低限のメールアドレスの書式を満たしていないと送信できません。 |
URL |
<input type="url" name="url"> |
最低限のURLの書式を満たしていないと送信できません。 |
電話番号 |
<input type="tel" name="tel"> |
電話番号入力用。書式チェックはされないが、スマートフォンでは電話用キーボードが表示されます。 |
数値 |
<input type="number" name="number"> |
数字のみ入力できる欄。上下ボタンで数値調整も可能です。 |
日付 |
<input type="date" name="date"> |
カレンダーから日付を選べる入力欄です。 |
時刻 |
<input type="time" name="time"> |
時刻を指定できる入力欄です。 |
スライダー |
<input type="range" name="range"> |
範囲をスライドバーで指定できる入力欄です。 |
カラーピッカー |
<input type="color" name="color"> |
カラーパレットから色を選べる入力欄です。 |
<form> <h3>HTML5以降使用可能になったフォームパーツ一覧</h3> <h4>メールアドレス</h4> <input type="email" name="email"> <h4>URL</h4> <input type="url" name="url"> <h4>電話番号</h4> <input type="tel" name="tel"> <p><input type="submit" value="送信"></p> <h4>数値</h4> <input type="number" name="number"> <h4>日付</h4> <input type="date" name="date"> <h4>時刻</h4> <input type="time" name="time"> <h4>スライダー</h4> <input type="range" name="range"> <h4>カラーピッカー</h4> <input type="color" name="color"> </form>
HTML/CSS入門編 サンプルコード16-16
【画面収録】書式チェック
【画面収録】データ入力など
これで「HTML/CSS入門編 16章 フォームを作成しよう」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。