HTMLの基礎覚え書き - form
HTML基礎覚え書き最後にしたいと思います。今回はformに関してです。またまた、ここのサイトを参考にさせて頂いてます
form要素
-
- formはcontrolのまとまり
- 「なにを」「どこに」「どうやって」の「どこに」「どうやって」を指定してあげる
- 「どこに」はaction属性で指定
- action属性にはprogramの名前を
- action属性にはURIを指定することも出来る(ex. mailto:)
- 「どうやって」はmethod属性で指定
- method属性には"post", "get"のmethodの指定を
- 「なにを」はcontrolが担当
- 「どこに」はaction属性で指定
input要素(controlの一種)
-
- name属性を指定することにより、dataを受信したプログラムが入力dataの項目を判別することが出来る
- readonly属性を使用し、readonly="readonly"と指定することにより、読み取り専用のcontrolとなる
- type属性を指定することにより、様々な入力形式に変化する
1. textタイプ
-
- 文字の入力
- size属性でtext boxの長さを指定することが出来る
- value属性でhint textを表示することが出来る
<p>URL: <input type="text" name="url" value="http://" size="60" />
2. submitタイプ
-
- submit buttonの表示
- value属性でbuttonに表示する文字列を指定することが出来る
<input type=”submit" value="送信">
3. radioタイプ
-
- radio buttonの表示
- あらかじめchecked属性、checked="checked"を指定することにより初期選択ができる
- 選択されたbuttonを判別するためにvalue属性が必要
<li><input type="radio" name="sex" value=”male” checked="checked" /> Male</li> <li><input type="radio" name="sex" value=”female” /> Female</li>
4. checkboxタイプ
-
- checkboxの表示
- radioタイプと同様checked属性が指定できる
<li><input type="checkbox" name="hobby" value="Running" checked="checked" /> Running</li> <li><input type="checkbox" name="hobby" value="Swimming" /> Swimming</li>
5. hiddenタイプ
-
- HTML文書作成者が設定したdataを送るUserに知られることなく送れる
<!-- infoという名前とsecretというvalueを持ったdataが送られる --> <input type="hidden" name="info" value="secret" />
6. fileタイプ
-
- 選択されたfileがformのdataとして送信することが出来る
- form要素のenctype属性をmultipart/form-data指定するとMIMEのマルチパートデータとしてファイルやその他の項目の内容を送信する
select要素(controlの一種)
-
- option要素を入れ子にすることによって、それらをアイテムとしたメニューリストを表示
- option要素を初期選択状態にするにはselected属性を使用し、selected="selected"を指定する
- size属性を指定することにより、そのリストアイテムの数を表示したスクロールフィールドを表示する
<select name="favourite_fruit"> <option selected="selected">りんご</option> <option>みかん</option> </select>
textarea要素
-
- input要素textタイプでは一行dataしか入力出来ないので複数行に渡るdataを入力したい時に使用
- readonly属性を使用し、readonly="readonly"と指定することにより、読み取り専用のcontrolとなる
- 入力エリアの行数、列数を指定するにはrows属性、cols属性を指定する
- input要素textタイプと異なり、文字をmarkupするとtext areaにあらかじめtextを表示する(Input要素textタイプではvalue属性に定義していた)
<textarea name="free_ans" rows="2" cols="40">答えを入力</textarea>
URLエンコード
label要素
-
- controlと表示文字列を紐づける
- ここを参照
