フォームを作るタグ②
フォームの中で使えるのはinputタグだけではありません
今回はセレクトボックスを作る「select」と「option」、
長～い文章を入力するための入力欄を作る「textarea」を紹介します。
セレクトボックス
セレクトボックスを実装するにはselectタグで全体を囲み項目一つ一つを「optionタグ」を使って必要があります。
他のフォームパーツとは毛色が違うので間違えないよう注意しましょう
セレクトボックス全体を囲むselectタグ
selectタグにはデータを受け取るためのname属性を必ずつけましょう 他にもいろいろな属性を設定することができますがあまり重要ではないと思いますので省略します
項目一つ一つを表すoptionタグ
セレクトボックス内の選択項目を表示するには項目一つ一つをoptionタグで囲みましょう optionタグで囲んだ文字列がメニューとして表示されます 送信するデータはvalue属性で設定しましょう。
|
1 2 3 4 5 6 |
<select name="menu"> <option value="ラーメン">ラーメン</option> <option value="カレーライス">カレーライス</option> <option value="ハンバーグ">ハンバーグ</option> <option value="焼肉">焼肉</option> </select> |
メッセージ入力欄などに使うtextareaタグ
textareaタグは大きめの入力欄を出力するときに使うタグです。特徴として複数行にわたって文字列の入力ができてしまいます
よくinputタグと混同しがちなので別物として扱ってください
データを受け取るためにname属性を設定するのを忘れないようにしましょう
基本的には開始タグととじたぐのあいだには何も記述しないで使いますがtextareaタグで囲んだ文字列は
初期入力値になりますので、何か入力状態にしたいのであればタグで囲んでみましょう
|
1 |
<textarea name="message"></textarea> |
入力欄の大きさをユーザーが操作できる点も特徴です
もしもリサイズをさせたくなかったら
|
1 2 3 |
textarea { resize: none; } |
これを書き込んでおきましょう
他にも属性から細かいサイズ調整などができますので参考サイトに目を通しておくと良いかもしれません
