前回は入力フォームの基本的なformタグやコントロールと呼ばれる各部品、そしてデータを送信するためのボタンの設置まで学びましたね。
今回は実践的にマークアップをしながら、覚えておくと便利な新しいタグについても触れていきます。
こちらのレッスンを終えると、一通りHTMLについては基本を押さえたことになりますので、がんばって理解していきましょう！
今回はこのようなオーソドックスなメンバー登録用のフォームを作っていきます。
まずいつものように、基本的な設定を書いたform.htmlというファイルを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>メンバー登録フォーム</title>
</head>
<body>
<h1>メンバー登録</h1>
<p>情報を入力し、送信ボタンをクリックしてしてください。</p>
</body>
</html>もくじ
使いやすいフォームを作っていこう！
それではこのようにコードを書き足し、画面に表示させてみてください。
（コントロールで使われている要素は、すべて前回のレッスンで学んだものになります。）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>メンバー登録フォーム</title>
</head>
<body>
<h1>メンバー登録</h1>
<p>情報を入力し、送信ボタンをクリックしてしてください。</p>
<form action="#" method="post">
<fieldset>
<legend>基本情報</legend>
<label for="memberName">おなまえ: </label>
<input type="text" name="memberName" id="memberName"><br>
<label for="memberGenderMen">性別:
<input type="radio" name="memberGender" id="memberGenderMen" value="men" checked>
男性
</label>
<label for="memberGenderWoman">
<input type="radio" name="memberGender" id="memberGenderWoman" value="women">
女性
</label><br>
<label for="mailAddress">メールアドレス: </label>
<input type="email" name="mailAddress" id="mailAddress"><br>
<label for="password">パスワード: </label>
<input type="password" name="password" id="password">
</fieldset>
<button type="submit">送信</button>
</form>
</body>
</html>
ところどころ見たことのないタグが使用されていると思います。
項目が何を表しているかラベルを付けるlabelタグ
設定しておくと便利なlabelタグを解説していきます。
主な目的としては項目とフォームを関連付けさせることができます。
「関連付けとは？」と疑問に思った方も多いと思うので、実際に見ていきましょう。
・labelなし
・labelあり
ラベルありのフォームだけ項目をクリックすると、カーソルが入ってそのまま入力できるようになりましたね！
これがlabelタグの大きな役割の一つです。
特にラジオボタンやチェックボックスのように、クリックする箇所が小さいときにとても選択が便利になります。
<form action="#">
<label for="genderMen">男性 </label>
<input type="radio" name="gender" id="genderMen" value="men">
<label for="genderWomen">女性 </label>
<input type="radio" name="gender" id="genderWomen" value="women">
</form>項目とコントロールを関連付けるためには、labelタグの中に、for属性を書く必要があります。
このときに、連動させたいフォームのid属性値と同じ名前を指定します。
<form>
<label for="name">なまえ:</label>
<input type="text" id="name">
</form>- 項目と入力箇所を連動させるにはlabelタグを使う
- ２つを連動させると項目をクリックするだけで入力可能な状態になる
- for属性は連動させたいコントロールのid属性値と同じ名前を指定する
- labelを設定すること=ユーザの使い勝手を良くすること！
項目をまとめるfieldsetタグ
表示させた画面を見ると、各項目が’基本情報’というグループにまとめられ、枠線があって見やすくなっています。
このようにフォームをグループ化するのはfieldsetタグです。
そしてもし枠線に’基本情報’のようなグループのタイトルがほしいときは、legendタグで指定するのです。
（legendを書かなければ、枠線だけになります。）
- フォームをまとめたいときはfieldsetタグで囲む
- fieldsetタグでグループ化された項目は枠線が表示される
- legend属性=”グループのタイトル”で枠に好きな文を表示できる
ドロップダウンリストの作り方
次にドロップダウンリストと、複数行メッセージなどの文章を入力できるテキストエリアと呼ばれる項目を追加していきます。
パスワードの項目と送信ボタンの間に、次のようにコードを書き足してください。
<input type="password" name="password" id="password">
</fieldset>
<label for="selectLanguage">学びたい言語: </label>
<select name="selectLanguage" id="selectLanguage" required>
<option value="" selected>選択してください</option>
<option value="1">HTML&CSS</option>
<option value="2">PHP</option>
<option value="3">RUBY</option>
<option value="4">JavaScript</option>
</select><br>
<button type="submit">送信</button>
メニュー本体のselectタグと選択肢をあらわすoptionタグ
画面のようなドロップダウンリストを設置するには、selectタグとoptionタグを使います。
selectタグは外側に、各選択肢はoptionタグの中にそれぞれ書いていきます。
リストの<ol>/<ul>タグと<li>タグの関係性に似ていますね。
<option></option>に囲まれた文字がメニューの選択肢として表示され、value属性で指定した値がサーバに送られるデータになります。
‘選択してください’のような選択肢ではないメッセージに当たる部分は
value=””
のようにvalueを空にしておきます。
（空値と呼ばれます。）
このリストが必須項目であった場合、メッセージがそのまま送信されるのを防ぐためにrequired属性を指定しておくと安心です。
<form action="#" method="post">
<select required>
<option value="">好きなくだものを選択してください</option>
<option value="1">りんご</option>
<option value="2">みかん</option>
<option value="3">バナナ</option>
</select>
<button type="submit">送信</button>
</form>
選択した状態で表示するにはselected属性
例のようにselectedとoption内に記述すると、あらかじめ選択肢が選択された状態で表示されます。
大半の人が選択するような項目や、メッセージなどに指定をすることが多いです。
もしselected属性を指定しなければ、メニューのいちばん上にある選択肢がデフォルトで選択されています。
- ドロップダウンメニューを表示させるには、<select>タグと<option>タグを使う
- <select></select>はメニュー本体を、<option></option>はそれぞれの選択肢を表している
- 選択肢ではないメッセージなどの項目は、value=””のように、空の値を設定しておく
- selected属性を指定しておくと、あらかじめ選択肢が選択された状態で表示される
複数行の文章が入力できるtextareaタグ
それでは仕上げに入っていきます。
ドロップダウンメニューの下に、以下のコードを書いていきます。
<label for="message">
メッセージ: <br>
<textarea name="message" id="message" cols="100" rows="6"></textarea>
</label><br>
<button type="submit">送信</button>
このように入力する人が、メッセージなどの好きな文章を送ることができる複数行のフォームを作るには、textareaタグを使います。
textareaはinputタグのtextタイプによく似ていて、
placeholder（入力例の表示）
maxlength（最大文字数の設定）
readonly（読み取り専用データにする）
required（必須項目）
の属性を使うことが可能です。
（textタイプは１行の文字を送信するのでした。）
ただし、value属性は使わず、もしあらかじめ文を表示させておきたい場合は
<textarea>メッセージはこちら</textarea>のように文をタグではさみます。
テキストエリアのサイズを指定する属性のcolsとrows
フォームの表示サイズはcols属性とrows属性で調整することが可能です。
cols属性は横幅の文字数を指定することが出来ます。
デフォルトは20文字になっています。
サンプルのコードでは
cols=”100″
と表示幅に合わせて、少し多めに取られています。
一方、縦の行を指定するにはrows属性で行数を指定します。
rows=”6″
としていますが、rowsのデフォルトは２行です。
見た目と使い勝手のバランスをみて、横の文字数と縦の行数をどれくらい表示するのか、設定していきましょう。
- 複数行のテキストフォームを表示させるにはtextareaタグを使う
- value以外のinput textタイプの属性を使うことができる
- あらかじめ表示させたい文はtextareaタグで囲む
- 表示サイズは横文字を指定するcols属性、たての行数を指定するrows属性で調整する
まとめ
さて、２回のレッスンにわたって入力フォームの作り方を見てきました。
とてもタグや要素がおおく、HTMLの中でも難しいのですが、１つ１つ理解を深めながらユーザの視点に立って使いやすいフォームづくりを心がけましょう。
これで一通りHTMLの基本レッスンは終わりました！
今後はCSSを中心としたWEBデザインを学んでいきます。
今回作った入力フォームもHTMLで土台の部分を作っただけなので、見た目はかなり無機質なのですが、CSSでデザイン要素を加えると、このようにすっきりすることができますよ！