10.6. HTML fieldset 标签 -- 表单分组(转http://www.dreamdu.com/xhtml/tag_fieldset)

10.6.1. HTML legend 标签

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.

fieldset 标签 -- 对表单进行分组

• fieldset标签是成对出现的,以
  开始,以
  结束
• 一个表单可以有多个
  ,每对

  为一组,每组内容的描述可以使用legend标签说明
• 引用网址:http://www.dreamdu.com/xhtml/tag_fieldset/
• 属性:
  • Common -- 一般属性

示例

<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>XHTMLoption>
                        <option>CSSoption>
                        <option>JAVASCRIPToption>
                        <option>XMLoption>
                        <option>PHPoption>
                        <option>C#option>
                        <option>JAVAoption>
                        <option>C++option>
                        <option>PERLoption>
                select>
        fieldset>
        <fieldset>
                <legend>我要在梦之都学:legend>
                <label for="WebDesign">选择一个你在梦之都最想学的label>
                <select id="WebDesign" name="WebDesign">
                        <optgroup label="client">
                                <option value="HTML">HTMLoption>
                                <option value="CSS">CSSoption>
                                <option value="javascript">javascriptoption>
                        optgroup>
                        <optgroup label="server">
                                <option value="PHP">PHPoption>
                                <option value="ASP">ASPoption>
                                <option value="JSP">JSPoption>
                        optgroup>
                        <optgroup label="database">
                                <option value="Access">Accessoption>
                                <option value="MySQL">MySQLoption>
                                <option value="SQLServer">SQLServeroption>
                        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>

HTML fieldset 标签示例 -- 可以尝试编辑

• HTML fieldset 标签示例

说明

• legend的内容一般显示在左上角
• 通过CSS可以改变fieldset边框显示方式,也可以改变legend的显示方式.

From " HTML fieldset 标签 - 表单分组 - HTML表单 - HTML教程,XHTML教程"

上一页 / 下一页 / 教程列表

向上 / 上一页 / 下一页 / 教程列表



[ 梦之都] | 加入收藏夹 | 搜藏 | 365Key | del.icio.us | 雅虎收藏 | Google书签 | QQ书签 | 和讯网摘 |