フォームは今やWebサイトには欠かせないものとなっています
個お問い合わせや会員情報などを入力するやつだね
フォームと言っても一つのタグで構成されているわけでなく様々な部品が組み合わさって構成されてるんだ
組み合わせ次第で色んなフォームが作れそう
今回はそのフォームについてと作成方法を解説していきます
今日のテーマ
- 基本的なフォームの作成方法がわかる
- フォームを作成するためのタグがわかる
1.フォームとは？どんな場面で使うのか
フォームは、ユーザーから情報を入力してもらい、それをWebサーバーに送るための仕組みです。
例えば…
- 名前やメールアドレスの入力
- コメントや質問の送信
- 商品購入時の情報入力
これらは全てフォームが使われています。
2.フォームを作るタグ
1-1.formタグ
まずフォームを作るにはformタグで囲う必要があります。
「これはフォームですよ」と伝えるもので、この中にフォーム部品のコードを書いていきます。
<form>
</form>1-2.inputタグ
inputタグは、ユーザーから文字・数値・チェック・ファイルなどの入力を受け取るためのタグです。type属性を変えることで、さまざまな入力形式に対応できます。
また、閉じタグは必要ありません。
<input type="">type属性
値を入力する事によって様々なフォーム部品を作る事ができる
例えばinputタグのtype属性をtextとすると簡単な入力欄ができます。
<p>お名前</p>
<input type="text">お名前
よく見るやつだね
こちらがtype属性に入るものの一例です。
| typeの値 | 説明 | 使用例 |
|---|---|---|
text | 一行のテキスト入力欄 | 名前やIDなど |
email | メール形式の入力 | メールアドレス（バリデーションあり） |
password | パスワード入力（非表示） | ログインフォームなど |
number | 数値のみ入力可能 | 年齢・数量入力など |
checkbox | チェックボックス | 利用規約同意・複数選択肢 |
radio | ラジオボタン | 単一選択（例：性別） |
submit | 送信ボタン | フォームをサーバーへ送信 |
file | ファイル選択 | 画像やPDFのアップロード |
date | 日付選択 | カレンダーUI付き |
1-3.textareaタグ
textareaタグは複数行入力テキストでこちらは閉じタグが必要です。
またこちらはtextareaタグで文字を挟む事によって初期に表示できる文字を設定できます。
<p>ご意見</p>
<textarea></textarea>もう一つ使い勝手のよいフォームにするためのタグがあります。
1-4.labelタグ
labelタグとinputなどのフォーム部品とを関連付ける事によって選択肢を選びやすくユーザーが使いやすいフォームをつくることができます。
「お名前」とあるところをクリックして見てください
ボックスの中にカーソルが移った！
これがlabelタグと選択肢を関連付けるという事だよ
では作り方を見ていこう
作り方１：idとforを使う
- STEP1ラベルにしたいテキスト(ここではお名前)をlabelタグで挟む
<label>お名前</label> <input type="text"> - STEP2labelタグの中にfor属性を指定し、値をつける値は好きな名前で良いですがわかりやすいものにしましょう。重複させたり、数字や記号から始まるものは使えません。(ここでは”name”という値を付けました)
<label for="name">お名前</label> <input type="text"> - STEP3inputタグの方にはid属性を指定し、値はlabelタグのfor属性で付けた値と同じものをつける
<label for="name">お名前</label> <input type="text" id="name">
「お名前」をクリックすると入力欄にカーソルが移るようになりました。
作り方2：フォーム部品全体を<label>タグで挟む
これはそのままです(笑)。作ってものをlabelタグで挟むだけです。
どちらでもOKです！
1-5.selectタグ
selectタグは複数の選択肢あるもの(年齢や出身地など)の任意の選択肢を選んで欲しい場合につかうものです。
セレクトボックスの作り方
- STEP1selectタグで大枠を作る
年齢を選択して下さい<br> <select> </select> - STEP2optionタグで選択肢を囲む
年齢を選択して下さい<br> <select> <option>２０歳未満</option> <option>２０代</option> <option>３０代</option> <option>４０代</option> <option>５０代</option> <option>６０代以上</option> </select> - STEP4optionタグ内にvalue属性と値を記入するvalue属性の値には選択肢の値を入れておきます
年齢を選択して下さい<br> <select> <option value="２０歳未満">２０歳未満</option> <option value="２０代">２０代</option> <option value="３０代">３０代</option> <option value="４０代">４０代</option> <option value="５０代">５０代</option> <option value="６０代以上">６０代以上</option> </select>
年齢を選択して下さい
size属性
selectタグ内にsize属性を書き、最初に表示したい選択肢の値を数字で書くと最初に表示できるリスト数を指定できます。
年齢を選択して下さい<br>
<select size="2">
<option value="２０歳未満">２０歳未満</option>
<option value="２０代">２０代</option>
<option value="３０代">３０代</option>
<option value="４０代">４０代</option>
<option value="５０代">５０代</option>
<option value="６０代以上">６０代以上</option>
</select>指定した選択肢の数(ここでは2つ)が最初から選択されています。(スマホだとできてないです)
他の選択肢はスクロールをすることで見られます
multiple属性
selectタグ内にmultiple属性を入れると複数選択ができるようになります。(Macなら⌘キーを押しながら、Windowsの場合はshiftキーを押しながら)
年齢を選択して下さい<br>
<select multiple>
<option value="２０歳未満">２０歳未満</option>
<option value="２０代">２０代</option>
<option value="３０代">３０代</option>
<option value="４０代">４０代</option>
<option value="５０代">５０代</option>
<option value="６０代以上">６０代以上</option>
</select>Macなら⌘キーを押しながら、Windowsの場合はshiftキーを押しながらで複数選択できます。
selected
<option selected>とすると最初から選択された状態になります。最初から選んで欲しい選択肢がある場合時などに使用します。
年齢を選択して下さい<br>
<select>
<option value="２０歳未満">２０歳未満</option>
<option value="２０代">２０代</option>
<option value="３０代">３０代</option>
<option value="４０代" selected>４０代</option>
<option value="５０代">５０代</option>
<option value="６０代以上">６０代以上</option>
</select>40代にselectedが付いているので初期値は40代になっていると思います
1-6.ラジオボックス
ラジオボックスは血液型や性別など複数ある選択肢から１つの選択肢を選んで欲しい場合に使います。
性別を選んでください<br>
<label><input type="radio" value="男性" name="gender">男性</label>
<label><input type="radio" value="女性" name="gender">女性</label>
<label><input type="radio" value="その他" name="gender">その他</label>ラジオボックスの作り方
- STEP1選択肢を作る
性別を選んでください<br> 男性 女性 その他 - STEP2inputタグをつけてtype属性をradioにするvalue属性の値もそれぞれ選択肢に合わせて書いておきます
性別を選んでください<br> <input type="radio" value="男性">男性 <input type="radio" value="女性">女性 <input type="radio" value="その他">その他性別を選んで下さい
男性 女性 その他
きなこあれ？一つしか選べないのにみんな選べるよ！こばゆたそういう場合は次のステップを - STEP3name属性をつけてグループ化するname属性と値を設定します。またここの値は揃えます。
性別を選んでください<br> <input type="radio" value="男性" name="gender">男性 <input type="radio" value="女性" name="gender">女性 <input type="radio" value="その他" name="gender">その他性別を選んで下さい
男性 女性 その他
きなこちゃんと一つだけ選べた！ - STEP4labelタグで選択肢を囲って完成使いやすいフォームにするためにlabelタグで囲います
性別を選んでください<br> <label><input type="radio" value="男性" name="gender">男性</label> <label><input type="radio" value="女性" name="gender">女性</label> <label><input type="radio" value="その他" name="gender">その他</label>これで先頭の丸にカーソルを合わせなくても選択肢をクリックするだけで選択が可能になりました。性別を選んで下さい
1-7.チェックボックス
ラジオボックスと似ていますが複数ある選択肢から複数の選択肢を選べるところが異なります。
<p>お好きなジャンルを選んでください(複数回答可)</p>
<label><input type="checkbox" name="category" value="グルメ">グルメ</label>
<label> <input type="checkbox" name="category" value="エンタメ">エンタメ</label>
<label><input type="checkbox" name="category" value="スポーツ">スポーツ</label>
<label> <input type="checkbox" name="category" value="ファッション">ファッション</label>お好きなジャンルを選んでください(複数回答可)
チェックボックスの作り方
inputのtype属性をcheckboxにすればあとはラジオボックスと同様に、value属性、name属性をそれぞれ書けばOKです！
複数の選択肢を選ぶことはセレクトボックスでもできますがレイアウトの問題やスペースの節約とかを考えて使い分けるのがベターです。
ラジオボタンとチェックボックスはinputにchecked属性をつけると最初から選択された状態になます。
<p>お好きなジャンルを選んでください(複数回答可)</p>
<label><input type="checkbox" name="category" value="グルメ">グルメ</label>
<label><input type="checkbox" name="category" value="エンタメ" checked>エンタメ</label>
<label><input type="checkbox" name="category" value="スポーツ" checked>スポーツ</label>
<label><input type="checkbox" name="category" value="ファッション">ファッション</label>お好きなジャンルを選んでください(複数回答可)
fieldsetタグとlegendタグ
ラジオボタンとチェックボックスはfieldsetタグで囲い、タイトルをlegendタグと呼ばれるタグで囲う事によってグループ化する事ができます。
<fieldset>
<legend>お好きなジャンルを選んでください(複数回答可)</legend>
<label><input type="checkbox" name="category" value="グルメ">グルメ</label>
<label><input type="checkbox" name="category" value="エンタメ" checked>エンタメ</label>
<label><input type="checkbox" name="category" value="スポーツ" checked>スポーツ</label>
<label><input type="checkbox" name="category" value="ファッション">ファッション</label>
</fieldset>参考までにどうぞ！
1-8.ボタンについて
inputのtype属性の値を”submit”にして作成します。
<input type="submit">value属性の値を変える事でボタンの文言を変える事もできます。
<input type="submit" value="送っちゃう？">inputのtype属性の値を”button”にしても作成できます。
<input type="button">ボタンにsrc属性＝”画像ファイル”で画像を指定することもできます。
<input type="image" src="画像のファイル名" alt="送信">3.フォームでよく使う属性
3-1.value属性
inputタグ内にvalue属性と値を入れる事で最初から入力されている文字を指定できます。
<label>お名前</label>
<input type="text" value="Yamada Taro">入力例があるのはわかったけど、入力の際にわざわざ内容を消して書き直すのは面倒だよ
そんな時のためにplaceholder属性というものが用意されてるよ
3-2.placeholder属性
placeholder属性はあらかじめ値で設定したテキストを薄く表示させ、入力されると消すことができるといったものになります。
文章だと意味がわかりにくいので以下の例を見てください
<label for="name3-2">お名前</label>
<input type="text" id="name3-2" placeholder="Yamada Taro">おー！いちいち消さなくて良くなった！
上の例のように記入例が薄く表示され、何らかの文字が入力されると消えます。
特別な理由がなければplaceholder属性を使うようにすると親切な気持ちが伝わります。
3-3.required属性
<label for="name3-3">お名前</label>
<input type="text" id="name3-3" placeholder="Yamada Taro" required>required属性は入力を必須にする属性で、試しに入力をせず、Enterをクリックするとエラーメッセージが出るかと思います。
エラーメッセージが出た！
このように必ず入力して欲しい場面でこれを使います。
3-4.disable属性
こちらはボタンで良く使われる属性で、付与するとクリックや入力ができなくなります。
入力欄の場合：
<label for="name3-4">お名前</label>
<input type="text" id="name3-4" placeholder="Yamada Taro" required disabled>ボタンの場合：
<input type="button" disabled>4.まとめ
フォームはお問い合わせやコメントなどの送信、商品購入などでよく見られるもので、formタグとその中にパーツを入れて作成する。
<form>
<!--この中に欲しいパーツを作成していく-->
</form>フォームパーツの一例：
| タグ | タグ内に書く属性名と値 | 結果や用途 |
|---|---|---|
| <input> | type=”text” | お名前入力フォームなどの１行テキスト入力欄 |
| type=”radio” | 複数から１つ選ぶラジオボックス | |
| type=”checkbox” | 複数から好きなだけ選ぶチェックボックス | |
| type=”submit” | フォームを送信する送信ボタンを作る | |
| type=”button” | ボタンが作れる | |
| placeholder=”中に入れたい文字” | 記入例など | |
| value=” “ | input要素の選択肢の値を送信する | |
| name=” “ | チェックボックスやラジオボックスでのグループ化 | |
| checked | 最初からチェックした状態にできる | |
| <textarea></textarea> | ご意見やお問い合わせなどの複数行テキスト入力欄 | |
| <select> <option></option> </select> | 選択肢をスライドで選ぶセレクトボックス | |
| size=” “ | 初期表示の数を設定 | |
| multiple | 複数選択できる | |
| selected | 最初から選択した状態にできる |
HTML/CSSをもっと学びたい方はこちらもオススメです！
コメント