checkbox
複数選択が可能
name属性は揃えるように
<dt>好きなもの</dt>
<dd>
<input type="checkbox" name="favorite">カレー
<input type="checkbox" name="favorite">うどん
<input type="checkbox" name="favorite">カレーうどん
</dd>
<lable>で囲うと文字部分を
クリックしてもチェックボックスが入る
<label><input type="checkbox" name="favorite" value="curry">カレー</label>
同じことをnameにもしたいが同じようにはできない
1.<dl>の子供は<dt>か<dd>しかない（labelが入れられない）
2.<dt>を<label>で囲うのもおかしい
→
<dl>
<dt><label for="hoge">お名前</label></dt>
<dd>
<input type="text" name="lastName" id="hoge">
</dd>
</dl>
ポイント
お名前を<label>で囲い、for属性を付与する
inputタグにidを付与する
この2つの名前を一致させる
radioも属性のnameとvalueが必須
checkedと記述すると最初から選択状態
<dl>
<dt>性別</dt>
<dd>
<label><input checked type="radio" name="gender" value="male">男性</label>
<label><input type="radio" name="gender" value="female">女性</label>
<label><input type="radio" name="gender" value="other">そのほか</label>
</dd>
</dl>
記入必須にする
<input required type="text" name="lastName" id="hoge">
submitボタンだけvalueの意味合いが違う
<input type="submit" value="send">
ボタンに表示させたい文字を指定できる
<select>
プルダウンで選択肢が出てくるタイプ
選択肢が多いときは、例によって配列とforでまわして表示させるとよろしい。
--->form.html
<select name="from" id="foo">
</select>
--->form.js
$(function(){
console.log('hi');
var names=['奈良','大阪','京都','兵庫','滋賀','和歌山'];
for(var i=0; i<6; i++){
var ele=$('<option>').text(names[i]);
$('#foo').append(ele);
console.log('this is in for');
}
});
もっともこれだとvalueが入ってないかも
↓
先生に聞いたらtextじゃなくてattrを使うらしい
ちなみにinputの値をgetにすると
URLをみるとつらつら選択したものが出てきているのが分かる
検索エンジンではget型で送信している
postにするとそういう状態にはならない
個人情報とかの扱いのうえでよろしい
あえて検索エンジンがget型にしているのは、
URLをこぴって共有することがあるため
