HMTL中的FieldSet标签--对表单进行分组

以前在没有了解fieldset标签之前,要写出如下效果(如图),必须的让美工写一大把的样式,现在不用了,其实HTML中有这样的标签,将表单元素分组显示。代码如下:
事例

<form action="dreamdu.php" method="post" id="dreamduform">
        <fieldset>
                <legend>用户名与密码:</legend>
                <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" value="dreamdu" />
                <label for="pass">密码:</label>
                <input type="password" id="pass" name="pass" />
        </fieldset>
        <fieldset>
                <legend>性别:</legend>
                <label for="boy"></label>
                <input type="radio" value="1" id="sex" name="sex" />
                <label for="girl"></label>
                <input type="radio" value="2" id="sex" name="sex" />
                <label for="sex">保密</label>
                <input type="radio" value="3" id="sex" name="sex" />
        </fieldset>
        <fieldset>
                <legend>我最喜爱的:</legend>
                <label for="computer">计算机</label>
                <input type="checkbox" value="1" id="fav" name="fav" />
                <label for="trval">旅游</label>
                <input type="checkbox" value="2" id="fav" name="fav" />
                <label for="buy">购物</label>
                <input type="checkbox" value="3" id="fav" name="fav" />
        </fieldset>
        <fieldset>
                <legend>对梦之都的意见:</legend>
                <label for="select">你对梦之都的感觉</label>
                <select size="1" id="select" name="select">
                        <option>很全面,很好</option>
                        <option>一般般吧,还要努力</option>
                        <option>有很多问题,不过还可以</option>
                </select>
        </fieldset>
        <fieldset>
                <legend>梦之都编程语言选择:</legend>
                <label for="multipleselect">你想在梦之都学习的编程语言</label>
                <select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
                        <option>XHTML</option>
                        <option>CSS</option>
                        <option>JAVASCRIPT</option>
                        <option>XML</option>
                        <option>PHP</option>
                        <option>C#</option>
                        <option>JAVA</option>
                        <option>C++</option>
                        <option>PERL</option>
                </select>
        </fieldset>
        <fieldset>
                <legend>我要在梦之都学:</legend>
                <label for="WebDesign">选择一个你在梦之都最想学的</label>
                <select id="WebDesign" name="WebDesign">
                        <optgroup label="client">
                                <option value="HTML">HTML</option>
                                <option value="CSS">CSS</option>
                                <option value="javascript">javascript</option>
                        </optgroup>
                        <optgroup label="server">
                                <option value="PHP">PHP</option>
                                <option value="ASP">ASP</option>
                                <option value="JSP">JSP</option>
                        </optgroup>
                        <optgroup label="database">
                                <option value="Access">Access</option>
                                <option value="MySQL">MySQL</option>
                                <option value="SQLServer">SQLServer</option>
                        </optgroup>
                </select>
        </fieldset>
        <fieldset>
                <legend>个人化信息:</legend>
                <label for="myimage">个性照片上传</label>
                <input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
                <label for="contactus">联系我们</label>
                <textarea cols="50" rows="10" id="contactus" name="contactus">
                        可爱的猴子
                </textarea>
        </fieldset>
        <fieldset>
                <legend>提交:</legend>
                <input type="submit" value="submit" id="submit" name="submit" />
                <input type="reset" value="reset" id="reset" name="reset" />
        </fieldset>
</form>

posted on 2011-02-25 10:14  Joey_zy0210  阅读(1678)  评论(0编辑  收藏  举报

导航