講義14日目
HTML構文
基本的なフォームの作成
インターネット上でユーザーからのデータを収集するために、入力用の項目を作成するときに利用される。
form要素
データを受け取るプログラムのURIを指定するaction属性（必須）と、データの送信方法を指定するmethod属性が主な構成要素。
method属性値には、action属性で指定したURIとデータをセットで送信するget方式と、本文データのみを送信するpost方式があるが、セキュリティ面でもデータ量の大きさの面でも優位なpost方式が主流である。
<form action="送信先のURI" method="post"> ... </form>
form要素内は以下の要素で構成される
input要素
フォーム内のテキストおよびボタンを表示させる要素で以下のtype属性を持つ
- text
- テキストを一行入力させるフォーム （例：名前、住所など）
name="名前の指定" value="入力欄に初期値として表示される名前"
size="フィールドの横幅（半角英数字の文字数、初期値は20）"
maxlength="入力できる最大文字数"
名前 <input type="text" name="username" value="山田太郎" size="10" maxlength="15">
- password
- パスワードを入力させるフォーム
name="名前の指定"
size="フィールドの横幅（ただし実際はブラウザに依存）"
maxlength="入力できる最大文字数" - radio
- 選択肢の中から一つだけを選ばせるラジオボタンを作成（例：性別など）
name="名前の指定"
value="この値と共にデータが送信される"（必須）
checked="デフォルト状態で選択表示される値"（同じグループ内で一つのみ）<input type="radio" name="Q1" value="yes" checked>はい <input type="radio" name="Q1" value="no">いいえ
- checkbox
- 選択肢の中から複数選ぶことのできるチェックボックスを作成
name="名前の指定"
value="この値と共にデータが送信される"（必須）
checked="デフォルト状態で選択表示される値" - submit,reset
- submitは送信ボタンを作成し、resetはリセットボタンを作成する
value="ボタン内の表示文字"<input type="submit" value="送信"> <input type="reset" value="取り消し">
textarea要素
一行以上のテキストを入力させるフォーム（例：コメント欄など）
input要素とは違い、終了タグが必要となる
name="名前の指定"
cols="フィールドの横幅の文字数（ただし実際はブラウザに依存）"（必須）
rows="フィールドの高さの行数"（必須）
※ただし、フィールドの大きさに関わらず入力文字数は指定されることはなく、多くなった場合はスクロールバーが表示される
<textarea name="comment" cols="20" rows="5"> ここに入力した文字列が初期値として表示される </textarea>
select要素
一つを選択するメニュー（セレクトボックス）を作成できる（例：出身地など）
name="名前の指定"
size="メニューの表示行数"（指定しない場合は初期値の1となる）
選択肢はselect要素内にoption要素として記述する。終了タグも必要。
value="名前の指定"（指定しない場合はoption内のテキストが送信される）
selected 初期値として表示（一つのみ）
<select name="birthplace"> <option value="hokkaido" selected>北海道</option> <option value="aomori">青森</option> ... </select>
フォームの部品部分とラベルを関連するにはlabel要素を使う。
label要素を指定することでフォームの操作が容易になりアクセシビリティ向上に繋がります。
label要素
input要素, textarea要素などの各コントロール部品に指定した id属性の値と label要素の for属性の値を一致させる必要がある。開始タグと終了タグが必須
好きなスポーツを選択してください（複数回答可）<br> <input type="checkbox" name="sports" value="baseball" id="baseball" checked> <label for="baseball">野球</label> <input type="checkbox" name="sports" value="football" id="football"> <label for="football">サッカー</label> ...
