fieldset要素

TOPページに戻る > html入門

スポンサード リンク

fieldset要素

フォームの入力項目をまとめてグループ化できます
グループごとに枠線が表示されフォームが見やすくなります
グループ化したあとはcssでスタイルをまとめて指定することもできます
内容になる要素にlegend要素が必ず必要です

使い方(書式)

<fieldset></fieldset>

fieldset要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 ブロック要素
内容となる要素 legend要素、インライン要素、テキスト

属性 説明
共通属性 html共通属性
イベント属性 htmlイベント属性

実際の指定方法

html

<form action="mail.cgi" method="post">
<fieldset>
<legend>メールフォーム</legend>
<p><label>メールの件名:<input type="text" name="f1" value="" size="30"></label></p>
<p><label>メール入力欄:<input type="text" name="f1" value="" size="30"></label></p>
</fieldset>
<fieldset>
<legend>コメント</legend>
<p><textarea name="f5" cols="50" rows="6"></textarea></p>
<p><input type="submit" value="内容確認画面へ"> 
 <input type="reset" value="リセット"></p>
</fieldset>
</form>

実際の表示

※サンプルのためフォームのみでcgiは動きません
メールフォーム

コメント


その他のデザインはcssでスタイルを指定





(C)2012 ホームページ作成無料