「HTML5のfieldestタグ」の編集履歴（バックアップ）一覧に戻る

HTML5のfieldestタグ - (2015/11/12 (木) 19:14:54) のソース

今回はHTML5のfieldestタグについて勉強してみました。~
プログラムを勉強しはじめたらフォームも勉強しようと思ったままになっていたのでフォームに関して結構知らないタグがいっぱいありました、、、~
~
*fieldestタグってなに？？
fieldestタグはフォームの入力項目をグループ化する際に使用します。~
 <fieldest>～</fieldest>
の中に配置されたフォーム部品は一つのグループとみなされ、ほとんどのブラウザでは細い枠線で囲まれて表示されます。~
グループに名前や説明(キャプション)を付けたい場合は、fieldestタグの中で一番最初の<legend>タグで指定します。~
*属性
fieldestタグには３つのタグが存在します。~
**disabled属性
この属性を指定するとフォーム内のすべての部分が無効になります。~
**form属性
formのidを指定する事で、そのフォームと関連付ける事ができます。~
ウェブアプリを作るときに、親フォームなどの位置を気にすることなくフォームを指定できるので便利です。~
**name属性
fieldestに名前を付ける事ができます。~
スクリプト操作の時に有効です。~
*HTML
 <form action="sample.php" method="post">
 <p><label for="namae">名前：</label><input type="text" name="name" id="namae" size="40"></p>
 <fieldset>
 <legend>性別</legend>
 <p><label for="dansei">男性</label><input type="radio" name="sex" id="dansei" value="male"></p>
 <p><label for="jyosei">女性</label><input type="radio" name="sex" id="jyosei" value="female"></p>
 </fieldset>
 <fieldset>
 <legend>休日の過ごし方</legend>
 <p><label><input type="checkbox" name="hobby" value="syugyo">修行</label></p>
 <p><label><input type="checkbox" name="hobby" value="sleeping">睡眠</label></p>
 <p><label><input type="checkbox" name="hobby" value="writting">プログラムを書く</label></p>
 <p><label><input type="checkbox" name="hobby" value="boo">ボーっとする</label></p>
 </fieldset>
 <p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
 </form>

*実行結果
#image(width=350,fieldest_sample.png)
こんな感じになります。~
 <fieldest disabled>
とするとそのグループは使えなくなります。~
~
以上