フォーム <form>
- 解説
- 1. フォームとは
- 2. フォームの書き方
- 3. 基本的なフォーム部品
- 4. ラベルの書き方
解説
1. フォームとは
フォームとは、入力画面のことです。フォームはユーザー登録画面や、お問い合わせフォームなどに使われます。
例）お問い合わせフォーム
お名前：
アドレス：
お問い合わせ内容：
フォームを作成するにはformタグをベースに、入力するデータの種類に合わせて、複数のform部品タグを使います。
2. フォームの書き方
formのひな型
<form>
<button type="submit">送信</button>
</form>例）基本的なフォーム
<form>
お名前：
<input type="text">
<button type="submit">送信</button>
</form>表示結果｜例）基本的なフォーム
お名前：
順を追って基本的なフォームの作成方法を見ていきましょう。
formタグを記述する
まずはフォームのベースとして、formタグを記述します。
<form></form>送信ボタンを作成する
次に、フォームに入力されたデータを送信するための、送信ボタンを作成します。
送信ボタンはbuttonタグを使います。buttonタグのtype属性を「submit」とすることで、フォームの送信ボタンとして機能します。
また、buttonタグ内に記述したテキストが、ボタン名としてブラウザに表示されます。
<form>
<button type="submit">送信</button>
</form>表示結果｜送信ボタンを作成する
form部品を記述する
最後に、必要に応じてform部品を記述します。
今回はform部品として、1行のテキストの入力を受け付ける「<input type="text">」を使用しています。
また、入力してほしい内容（この例では「お名前：」）をinputタグの前に記述しています。
<form>
お名前：
<input type="text">
<button type="submit">送信</button>
</form>表示結果｜form部品を記述する
お名前：
以上で基本的なフォームを作成することができました。
なお、form部品をタテに並べたい場合は、brタグで改行します。
<form>
お名前：<br>
<input type="text"><br>
<button type="submit">送信</button>
</form>表示結果｜form部品ごとに改行する
お名前：
3. 基本的なフォーム部品
1行分の入力：テキストボックス <input>
名前の入力や、パスワードの入力など、1行分のテキストを受け付けるform部品のことをテキストボックスといいます。
テキストボックスの作成はinputタグを使います。また、inputタグのtype属性にデータの種類を指定することで、type属性に応じたform部品に変化します。
代表的なinputタグ
※inputタグに閉じタグは必要ありません。
テキストボックス
<input type="text">表示結果｜<input type="text">
メールアドレス
<input type="email">（フォーム送信時にアドレスとして有効な文字かをチェックします）
表示結果｜<input type="email">
パスワード
<input type="password">（入力されたテキストを、黒丸に置き換えます）
表示結果｜<input type="password">
日付
<input type="date">表示結果｜<input type="date">
複数行の入力：テキストエリア<textarea>
お問い合わせ内容など、複数行のテキストを受け付ける場合は、textareaタグを使います。
※textareaタグは閉じタグが必要なので注意してください。
構文：textareaタグ
<textarea></textarea>表示結果｜<textarea></textarea>
4. ラベルの書き方
form部品を説明するテキスト（「お名前：」等）のことをラベルといいます。
labelタグを使うことで、ラベルとform部品（「<input type="text">」等）を結びつけることができ、ラベルをクリックすると自動で対応するform部品にフォーカスするようになります。
labelタグの使い方
<label>
お名前：
<input type="text">
</label>表示結果（「お名前：」をクリックして効果を確認してください。）
また、labelタグのfor属性に、form部品に設定したid属性の値を指定することでも、ラベルとform部品を結びつけることができます。
for属性によるラベルの指定では、labelタグ内にform部品を記述する必要はありません。
※id属性については『classとid』のページで解説します。
for属性を使ったlabelタグの使い方
<label for="name">お名前：</label>
<input type="text" id="name">表示結果（「お名前：」をクリックして効果を確認してください。）
問題
実践問題
| (1) | VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。 |
| (2) | 「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「form」フォルダーを新規作成してください。 |
| (3) | 「form」フォルダー内に、「index.html」を新規作成し、フッターメニューの「Go Live」ボタンをクリックしてブラウザで表示してください。 |
設計書（1）｜会員登録フォーム
| ラベル | タグ | type |
|---|---|---|
| お名前： | input | text |
| 生年月日： | input | date |
| email： | input | |
| パスワード： | input | password |
| パスワード（再確認）： | input | password |
| 備考： | textarea | なし |
| なし | button | submit |
下記コードを該当ファイルにペーストし、各問に答えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォーム</title>
</head>
<body>
<h1>会員登録</h1>
<!--
（問1）「設計書（1）」の通り、下記inputタグ、buttonタグのtype属性を設定してください。 -->
<!--
（問2）「設計書（1）」を参考に、labelタグでラベル（例 「お名前：」）を囲んでください。
labelタグにfor属性を設定し、対応するフォーム部品と紐づけてください。 -->
<form>
お名前：<br>
<input type="" id="name"><br>
生年月日：<br>
<input type="" id="birthDay"><br>
email：<br>
<input type="" id="mail"><br>
パスワード：<br>
<input type="" id="pass"><br>
パスワード（再確認）：<br>
<input type="" id="rePass"><br>
備考：<br>
<textarea id="remarks"></textarea><br>
<button type="">送信</button>
</form>
</body>
</html>
