フォームは今やWebサイトには欠かせないものとなっています
個人情報やお問い合わせ、会員情報などを入力するやつだね
フォームと言っても一つのタグで構成されているわけでなく様々な部品が組み合わさって構成されてるんだ
組み合わせ次第で色んなフォームが作れそう
今回はそのフォーム部品について解説していきます
最後に今回はとても長くなる予定なので細かい説明がいらないという方はまとめまで飛ばしてください。(笑)
1.フォームを作るタグ
まずフォームを作るにはformタグで囲う必要があります。
「これはフォームですよ」と伝えるもので、この中にフォーム部品のコードを書いていきます。
<form>
<form>1-1.inputタグ
type属性
値を入力する事によって様々なフォーム部品を作る事ができる
inputタグはtype属性を書き、値を指定することで様々なフォーム部品を作る事ができます。また、閉じタグは必要ありません。
一番スタンダードなものは属性値を”text”にしたテキスト入力フォームです。
<p>お名前</p>
<input type="text">お名前
よく見るやつだね
またinputタグ内にvalue属性を書き。値をつける事で最初から入力されている文字を指定できます。
<p>お名前</p>
<input type="text" value="Yamada Taro">お名前
1-2.textareaタグ
textareaタグは複数行入力テキストでこちらは閉じタグが必要です。
またこちらはtextareaタグで文字を挟む事によって初期に表示できる文字を設定できます。
<p>ご意見</p>
<textarea>お問い合わせ内容はこちら</textarea>ご意見
入力例があるのはわかったけど、入力の際にわざわざ内容を消して書き直すのは面倒だよ
そんな時のためにplaceholder属性というものが用意されてるよ
placeholder属性
placeholder属性はあらかじめ値で設定したテキストを薄く表示させ、入力されると消すことができるといったものになります。
文章だと意味がわかりにくいので以下の例を見てください
<p>お名前</p>
<input type="text" placeholder="お名前">お名前
記入例のようなものが薄く表示され、何らかの文字が入力されると消えます。そして再び内容が消されると現れます。
特別な理由がなければplaceholder属性を使うようにすると親切な気持ちが伝わります。
おー！いちいち消さなくて良くなった！
もちろんtextareaタグにも使えます
<p>ご意見</p><textarea placeholder="お問い合わせ内容はこちら"></textarea>ご意見
きちんと機能しています
もう一つ使い勝手のよいフォームにするためのタグがあります。
labelタグ
labelタグとはフォーム部品と関連付ける事によって選択肢を選びやすくすることができます。
わけがわからないよ
確かにわかりづらいね💦
じゃあ「お名前」とあるところをクリックしてごらん
ボックスの中にカーソルが移った！
さっきのだれ？
これがlabelタグと選択肢を関連付けるという事だよ
では作り方を見ていこう
- STEP1ラベルにしたいテキスト(ここではお名前)をlabelタグで挟む
<label><p>お名前</p></label> <input type="text"> - STEP2labelタグの中にfor属性を指定し、値をつける
<label for="name"><p>お名前</p></label> <input type="text">値は好きな名前で良いですがわかりやすいものにしましょう。重複させたり、数字や記号から始まるものは使えません。(ここでは”name”という値を付けました)
- STEP3inputタグの方にはid属性を指定し、値はlabelタグのfor属性で付けた値と同じものをつける
<label for="name"><p>お名前</p></label> <input type="text" id="name">
「お名前」をクリックすると入力欄にカーソルが移るようになりました。
併せてplaceholder属性も書いておくと良いですね
2-1.普通に作ってlabelタグで挟む
これはそのままです(笑)。作って挟むだけです。
<label>
<p>お名前</p>
<input type="text">
</label>どちらでもOK！
またこれから紹介していく部品もlabelタグで囲うのがベターです
1-3.セレクトボックス
セレクトボックスは複数の選択肢あるもの(年齢や出身地など)の任意の選択肢を選んで欲しい場合につかうものです。
セレクトボックスの作り方
- STEP1selectタグで大枠を作る
<p>年齢を選択して下さい</p> <select> </select> - STEP2選択肢を作る
<p>年齢を選択して下さい</p> <select> ２０歳未満 ２０代 ３０代 ４０代 ５０代 ６０代以上 </select>selectタグ内に任意の選択肢を入れます。
- STEP3optionタグで選択肢を囲む
<p>年齢を選択して下さい</p> <select> <option>２０歳未満</option> <option>２０代</option> <option>３０代</option> <option>４０代</option> <option>５０代</option> <option>６０代以上</option> </select> - STEP4optionタグ内にvalue属性と値を記入する
<p>年齢を選択して下さい</p> <select> <option value="２０歳未満">２０歳未満</option> <option value="２０代">２０代</option> <option value="３０代">３０代</option> <option value="４０代">４０代</option> <option value="５０代">５０代</option> <option value="６０代以上">６０代以上</option> </select>value属性の値には選択肢の値を入れておきます
- STEP5labelタグで囲って完成
<label><p>年齢を選択して下さい</p> <select> <option value="２０歳未満">２０歳未満</option> <option value="２０代">２０代</option> <option value="３０代">３０代</option> <option value="４０代">４０代</option> <option value="５０代">５０代</option> <option value="６０代以上">６０代以上</option> </select> </label>
セレクトボックスのいろいろ
“size属性”
selectタグ内にsize属性を書き、最初に表示したい選択肢の値を数字で書くと最初に表示できるリスト数を指定できます。
<label><p>年齢を選択して下さい</p>
<select size="2">
<option value="２０歳未満">２０歳未満</option>
<option value="２０代">２０代</option>
<option value="３０代">３０代</option>
<option value="４０代">４０代</option>
<option value="５０代">５０代</option>
<option value="６０代以上">６０代以上</option>
</select>
</label>指定した選択肢の数(ここでは2つ)が最初から選択されています。(スマホだとできてないです)
他の選択肢はスクロールをすることで見られます
“multiple属性”
selectタグ内にmultiple属性を入れると複数選択ができるようになります。(Macなら⌘キーを押しながら、Windowsの場合はshiftキーを押しながら)
<label><p>年齢を選択して下さい</p>
<select multiple>
<option value="２０歳未満">２０歳未満</option>
<option value="２０代">２０代</option>
<option value="３０代">３０代</option>
<option value="４０代">４０代</option>
<option value="５０代">５０代</option>
<option value="６０代以上">６０代以上</option>
</select>
</label>Macなら⌘キーを押しながら、Windowsの場合はshiftキーを押しながらで複数選択できます。
“selected”
<option selected>とすると最初から選択された状態になります。最初から選んで欲しい選択肢がある場合時などに使用します。
<label><p>年齢を選択して下さい</p>
<select>
<option value="２０歳未満">２０歳未満</option>
<option value="２０代">２０代</option>
<option value="３０代">３０代</option>
<option value="４０代" selected>４０代</option>
<option value="５０代">５０代</option>
<option value="６０代以上">６０代以上</option>
</select>
</label>40代にselectedが付いているので初期値は40代になっていると思います
1-4.ラジオボックス
ラジオボックスは血液型や性別など複数ある選択肢から１つの選択肢を選んで欲しい場合に使います。
性別を選んで下さい
ラジオボックスの作り方
- STEP1選択肢を作る
<p>性別を選んでください</p> 男性 女性 その他 - STEP2inputタグをつけてtype属性をradioにする
<p>性別を選んでください</p> <input type="radio" value="男性">男性 <input type="radio" value="女性">女性 <input type="radio" value="その他">その他value属性もついでに書いておきます
性別を選んで下さい
きなこあれ？一つしか選べないのにみんな選べるよ！こばゆたそういう場合は次のステップを - STEP3name属性をつけてグループ化する
<p>性別を選んでください</p> <input type="radio" value="男性" name="gender">男性 <input type="radio" value="女性" name="gender">女性 <input type="radio" value="その他" name="gender">その他性別を選んで下さい
男性
女性
その他きなこちゃんと一つだけ選べた！ - STEP4labelタグで選択肢を囲って完成
<p>性別を選んでください</p> <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-5.チェックボックス
ラジオボックスと似ていますが複数ある選択肢から複数の選択肢を選べるところが異なります。
お好きなジャンルを選んでください(複数回答可)
チェックボックスの作り方
1.inputのtype属性をcheckboxにする。value属性、name属性もそれぞれ書いておく。
<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に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>お好きなジャンルを選んでください(複数回答可)</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-6.ボタンについて
inputのtype属性の値を”submit”にして作成します。
<input type="submit">value属性の値を変える事でボタンの文言を変える事もできます。
<input type="submit" value="送っちゃう？">inputのtype属性の値を”button”にしても作成できます。
<input type="button">ボタンにsrc属性＝”画像ファイル”で画像を指定することもできます。
<input type="image" src="画像のファイル名" alt="送信">input type=”button” disabledをつけると押せなくなります。
<input type="button" disable>1-7.その他のフォーム部品
他にもemail、telなどがあり、設定しておけばブラウザーでサポートがされていれば書式をチェックしてくれるものもあります。
古いブラウザだと使えない可能性があるので注意ですが…。対応状況はcaniuse.comで確認してください。
input type=”password”
type属性をpasswordにするとパスワード入力の際などに伏字にすることができるフォームを作れます。
パスワードを入力して下さい<br>
<input type="password">input type=”color”
カラーピッカーを表示できます。
<input type="color">input type=”date”
日付の入力欄を作れます。
<input type="date">input type=”number”
数字専用の入力欄を作れます。
<input type="number">inputタグ内の属性をそれぞれmin=”数値”、max=”数値”とする事で最小値と最大値に制限をつけることができます。
<label>番号を入れてください(10〜15)<input type="number" min="10" max="15"></label>input type=”range”
range入力欄を作ります。
<input type="range">2.まとめ
formタグはフォームで使うパーツを囲む事でフォームを構成する
1.一行入力テキスト
<input type="text" placeholder="お名前を記入してください">他にも”tel”や”email”などが属性値に入る
2.複数行入力テキスト
<textarea placeholder="お問い合わせ内容を記入してください"></textarea>- placeholder=” ”をタグ内に入れる事で初期値を設定できる。
labelタグをつける事で「お名前」の部分をクリックする事で入力フォームにカーソルを写す事ができる。
①“for属性”と”id属性”を使うパターン
<label for="name">お名前<br></label>
<input type="text" id="name">②labelタグで囲むパターン
<label>お名前<br>
<input type="text">
</label>- セレクトボックスやラジオボックスにも使える
<select>
<option value="選択してください">選択してください</option>
<option value="選択肢A">選択肢A</option>
<option value="選択肢B">選択肢B</option>
<option value="選択肢C">選択肢C</option>
<option value="選択肢D">選択肢D</option>
<option value="選択肢E">選択肢E</option>
</select>- selectタグ内にsize=”数字”で初期の表示数を指定できる
- selectタグ内にmultipleで複数選択可能に(Macなら⌘キーを押しながら、Windowsの場合はshiftキー)
- optionタグ内にselectedで最初から選択状態に
<label><input type="radio" value="選択肢A" name="category">選択肢A</label>
<label><input type="radio" value="選択肢B" name="category">選択肢B</label>
<label><input type="radio" value="選択肢C" name="category">選択肢C</label>
- inputタグ内に”name属性”をつけてグループ化しないと何個でも選べてしまうので注意
- inputタグ内に”checked”を入れると最初から選択された状態にできる
<label><input type="checkbox" name="category" value="選択肢A">選択肢A</label>
<label><input type="checkbox" name="category" value="選択肢B">選択肢B</label>
<label><input type="checkbox" name="category" value="選択肢C">選択肢C</label>
<label><input type="checkbox" name="category" value="選択肢D">選択肢D</label>
- inputタグ内に”checked”を入れると最初から選択された状態にできる
- ラジオボタンとチェックボックスはfieldsetタグで囲い、タイトルをlegendタグで囲う事によってグループ化する事ができる。
<fieldset>
<legend>お好きな選択肢を選んでください(複数回答可)</legend>
<label><input type="checkbox" name="category" value="選択肢A">選択肢A</label>
<label><input type="checkbox" name="category" value="選択肢B">選択肢B</label>
<label><input type="checkbox" name="category" value="選択肢C">選択肢C</label>
<label><input type="checkbox" name="category" value="選択肢D">選択肢D</label>
</fieldset><input type="submit" value="送信">- type=”submit”で送信ボタンにする
- value属性の値を変える事によってボタンの文言を変えられる
- type=”image”とsrc=”画像ファイル”を指定する事で画像を送信ボタンにすることもできる
- type=”button”でもボタンにできる
- タグ内に”disable”を入れるとボタンを押せなくできる
| タグ | タグ内に書く属性名と値 | 結果や用途 |
|---|---|---|
| <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 | 最初から選択した状態にできる |
まとめにも関わらずとても長くなってしまいました(笑)
コメント