Webでのお問い合わせフォームや、ログイン画面など、ユーザーが情報を入力する時に使用されるフォームの作り方についてです。
目次
フォーム画面作成のポイント
- HTML:
Formタグ > フォーム部品(inputなど）> 属性（type=”text”など）の構造。 - レイアウト:
<dl> <dt> <dd>タグで見出しと入力フォームを情報構造化し、CSSで見た目を整えると効果的。
HTML
formタグに、見出しと入力したいフォーム部品を配置します。
<dl> <dt> <dd>タグで情報構造化しておくとCSSでレイアウトしやすくなります。
See the Pen formSample by uxbear (@uxbear) on CodePen.
CSS
レイアウトはHTMLで書いたタグや属性にスタイルすることで見た目を調整していきます。
See the Pen formSample by uxbear (@uxbear) on CodePen.
<form>要素
フォーム部品と呼ばれる “ラジオボタン”、”テキストエリア”等を配置し、選択や入力した値をサーバに送信したり、JavaScriptを実行するなどおこないます。
form構文
<form method="データの送信方法" action="送信先URL指定" name="名前を指定">
ここにフォーム部品（ボタン等）を配置
</form> form属性
| 属性 | 説明 | 値 |
|---|---|---|
| accept-charset属性 | 送信するデータの文字エンコーディングを指定 | UTF-8、Shift_JIS、EUC-JPなど |
| action属性 | 送信先URLを指定 | URL(https://〜など） |
| autocomplete属性 | オートコンプリートの オン/オフを指定 | 値: on / off（初期値: on） |
| enctype属性 | 送信するデータの形式を指定 | application/x-www-form-urlencoded multipart/form-data・text/plain |
| method属性 | 送信方法（HTTPメソッド）を指定 | 値: get / post (初期値: get) |
| name属性 | フォームの名前を指定 | |
| novalidate属性 | 入力されたデータの妥当性を確認しない | novalidate |
| target属性 | フォーム送信するターゲット先を指定 | _blank / _self / _parent / _top 任意のターゲット名 |
フォーム部品
form要素の中に設置する、input要素やselect要素、textarea要素など
input要素
// input要素の例
<dl>
<dd>メールアドレス</dt>
<dd><input type="email" name="emaill" class="emailIInput"></dd>
</dl>
input要素は、フォームの各種部品（入力欄・選択肢・ボタン）を作成します。
input要素の属性【attribute】
下記は、Input要素に共通で指定できる属性です。（グローバル属性: Global Attributes）
これ以外にも、部品のタイプごとに多数の属性が用意されています。(ローカル属性: local Attributes）
| 属性 | 意味 | 値 | 説明 |
|---|---|---|---|
| type=”” | 部品のタイプ | キーワード | 特定のキーワードを指定 （初期値: text） |
| name=”” | 部品の名前 | 文字列 | 部品を識別するための名前 |
| value=”” | 送信される値 | 文字列 | 入力欄の初期値、選択時の値、ボタンのテキスト |
| disabled | 部品の無効化 | （disabled） | 値は省略可 |
| form=”” | フォームとの関連付け | ID名 | 関連付けるform要素に指定したID名 |
| autofocus | 自動フォーカスの指定 | （autofocus） | 値は省略可、1つの文書に1つだけ指定可能 |
フォーム画面作成の際に、よく使う type属性 を見ていきます。
type属性の種類
input要素の”type属性”は、フォーム部品の種類を指定する際に使用します。
一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、フォーム部品の種類を指定し分けることができます。
type属性を指定しなかった場合は、type="text" となります。
| type属性の値 | 意味 |
|---|---|
| type=”hidden” | 画面上は表示されない隠しデータを指定 |
| type=”text” | 一行テキストボックスを作成（初期値） |
| type=”search” | 検索テキストの入力欄を作成 |
| type=”tel” | 電話番号の入力欄を作成 |
| type=”url” | URLの入力欄を作成 |
| type=”email” | メールアドレスの入力欄を作成 |
| type=”password” | パスワード入力欄を作成する |
| type=”datetime” | UTC（協定世界時）による日時の入力欄を作成する |
| type=”date” | 日付の入力欄を作成する |
| type=”month” | 月の入力欄を作成する |
| type=”week” | 週の入力欄を作成する |
| type=”time” | 時間の入力欄を作成する |
| type=”datetime-local” | UTC（協定世界時）によらないローカル日時の入力欄を作成する |
| type=”number” | 数値の入力欄を作成する |
| type=”range” | レンジの入力欄を作成する |
| type=”color” | 色の入力欄を作成する |
| type=”checkbox” | チェックボックスを作成する |
| type=”radio” | ラジオボタンを作成する |
| type=”file” | サーバーへファイルを送信する |
| type=”submit” | 送信ボタンを作成する |
| type=”image” | 画像ボタンを作成する |
| type=”reset” | リセットボタンを作成する |
| type=”button” | 汎用ボタンを作成する |
まとめ
Webでのお問い合わせフォームや、ログイン画面など、ユーザーが情報を入力する時に使用されるフォームの作り方についてでした。
JavaScriptの学習講座、エンジニアの転職
