1. はじめに
フォームとは？
ユーザーより、ウェブページからデータをサーバに送信するためのもの。
ログイン画面
Google検索キーワード画面
アカウント登録画面
2. フォームの概要
・form要素で記述する。
【サンプル】
<form action="#" method="POST"></form>
① ②
①action属性:どこにデータを送信するかを記述。(今回はダミーとして"#"と記述している)
②method属性:HTTPリクエストメソッドの種類を記述。
ブラウザからサーバに対して依頼する処理の種類。
利用頻度が高い。
GET
サーバからデータを取得したいとき。
【例】
・ウェブページを取得。
・画像の取得。
・RSSフィードの取得。
POST
サーバへデータを送信したいとき。
【例】
ログインフォーム、ECサイトでの商品注文フォーム、アンケート送信。
3. input要素
データを入力するためのフォーム部品を作る要素。
type属性をすることで、様々な入力フォームを作成可能。
【サンプル】
<input type="text">
※単一行のテキスト入力欄
参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
4. フォーム作成物
今回は、サーバへログイン情報を送るためのフォーム作成例。
【サンプル】
<form action="#" method="POST">
① ②
<input type="text" name="username" placeholder="ユーザーネーム">
③ ④ ⑤
<input type="password" name="password" placeholder="パスワード">
③ ④ ⑤
<input type="submit" value="ログイン">
③ ⑥
</form>
<解説>
①どこへデータを送信するか記述。
※今回の例で作成したのでダミーの"#"を配置。
②今回はログインに必要なデータをサーバへ送るので"POST"を記入。
③type属性の主な種類。
・text:単一行のテキスト入力欄。 ・password:入力値を隠す単一行のテキスト入力欄。 ・submit:フォームを送信するボタン。
④
・入力欄コントロールの名前。 ・名前、値の組の部分としてフォームと一緒に送信される。
⑤フォームコントロールが空の場合に、フォームコントロール内に表示される内容。
⑥input要素の値を指定する属性。以下凡例。
・テキスト入力欄においての初期入力値。 ・チェックボックスやラジオボタン(後述)において選択したときだけ送信する値。 ・送信ボタンにおいてはボタン名を表す。
【表示例】
5. プルダウン機能
・ドロップダウン機能のこと。
【サンプル】
<dt>お住いの地域</dt>
<dd>
<select name="area">
①
<option value="" selected>選択して下さい</option>
② ③ ④
<option value="hokkaido">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="chubu">中部</option>
<option value="hokushinetu">北信越</option>
<option value="kinki">近畿</option>
<option value="chugoku">中国</option>
<option value="shikoku">四国</option>
<option value="kyushu">九州</option>
<option value="okinawa">沖縄</option>
</select>
</dd>
<解説>
①フォーム内にプルダウン機能を付与。
②プルダウンの内容。
③サーバに送信する値を定義。
④selectedを属性にすると、選択肢が初期状態で選択される。
・この属性には値が無い。 ・selectedは、要素内に1つだけしか持つことができない。
【表示例(プルダウン開放前)】
【表示例(プルダウン開放後)】
6. ラジオボタン
・ラジオボタンとは？
→複数の項目から１つを選択するための小さな丸いボタン状の入力要素。
【サンプル】
<dt>性別</dt>
<dd>
<input type="radio" name="gender" value="male" checked>男性
① ② ③ ④
<input type="radio" name="gender" value="female">女性
</dd>
①ラジオボタンの型。
②name
↓ ↓ ↓
・入力欄コントロールの名前。 ・名前、値の組の部分としてフォームと一緒に送信される。
③ラジオボタンを選択したときだけ送信する値。
④初期から選択された状態にする。
【表示例】
7. テキストエリア
テキストエリアとは？
文字を複数行入力できる部品のこと。
【サンプル】
<dt>お問い合わせ内容</dt>
<dd>
<textarea name="contents"></textarea>
</dd>
【表示例】
8. チェックボックス
チェックボックスとは？
機能としてはラジオボタンと同様だが、チェックボックスは四角。
【サンプル】
<dt>プライバシーポリシーに同意する</dt>
<dd>
<input type="checkbox" name="privacy" value="1" checked>
</dd>
【表示例】
\
9. 送信ボタンの実装
【サンプル】
<input type="submit" name="submit" value="送信">
【表示例】
10. ラベル
ラベルとは？
各フォーム部品が何の入力欄かを示しているのかを説明するためのテキスト。
【サンプル】
<dl>
<dt><label for="username">お名前</label></dt>
① ②
<dd><input id="username" type="text" name="username" /></dd>
③
</dl>
①:labelタグ ②、③:フォーム部品のidを、labelタグのfor属性に割り当て紐付ける。 ※フォーム部品をlabelタグで囲う方法もある。
【表示例】
【ラベルを使用する際のメリット】
・文章の意味付けがより正しくできる。 ・チェックボックスやラジオボタンで、ラベルの部分をチェックしても選択できるようになる。 ・テキスト入力に関しては、マークアップした文字をクリックするとテキスト入力できるようになる。
11. バリデーション
バリデーションとは？
入力された内容が要件を満たしているか、妥当性を確認すること。
エラー表示
【サンプル】
<form action="#" method="POST">
<input type="text" required />
<input type="submit" value="送信" />
</form>
・required:リクワイアードと読む。 ・フォーム部品に記述することにより、文字が記載されていない状態で送信ボタンを押下するとエラー表示され次へ進むことはできない。
【表示例】
文字数制限
【サンプル】
<form action="#" method="POST">
<input type="text" required maxlength="5"/>
<input type="submit" value="送信" />
</form>
・maxlength:文字数制限。 (サンプルでは数値を5にしているが、これは５文字まで入力を許可されているが６文字以上は入力不可)
【表示例】
☆注意点☆
・クライアント側(ホームページを訪れた利用者)のフォームバリデーションは、ユーザーが簡単に書き換えることができる。(Google Chrome Developer Toolなどで) ・HTMLのフォームバリデーションは、不正対策には使えない。
〜対策として〜
サーバサイド側(アプリケーションの提供側)のフォームからのデータを受け取るプログラム側での値の正当性のチェックを行う。
12. おわりに
次項:CSSの基本に続く。