`

html fieldset与legend标签

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

fieldset 标签 -- 对表单进行分组
fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
标签legend就像标题一样没有什么技术含量的

<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>对lushuncheng.cn的意见:</legend> 
        <label for="select">你对lushuncheng.cn的感觉</label> 
        <select size="1" id="select" name="select"> 
            <option>很全面,很好</option> 
            <option>一般般吧,还要努力</option> 
            <option>有很多问题,不过还可以</option> 
        </select> 
    </fieldset> 
    <fieldset> 
        <legend>lushuncheng.cn编程语言选择:</legend> 
        <label for="multipleselect">你想在lushuncheng.cn学习的编程语言</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>我要在lushuncheng.cn学:</legend> 
        <label for="WebDesign">选择一个你在lushuncheng.cn最想学的</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> 
分享到:
评论

相关推荐

    jquery fieldset和legend标签代码.zip

    在这个"jquery fieldset和legend标签代码.zip"中,我们很可能会找到一个使用jQuery来增强这两个元素样式的示例。 jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个...

    jquery fieldset和legend标签特效代码

    在"jquery fieldset和legend标签特效代码"中,开发者可能使用jQuery来实现一些增强这些元素视觉效果或交互性的功能。例如,他们可能: 1. **动态样式切换**:使用jQuery选择器找到所有的 `&lt;fieldset&gt;` 和 `&lt;legend&gt;...

    几乎被设计师遗忘了的标签fieldset legend

    在 HTML 中,fieldset 和 legend 标签是两个常用的标签,用于组织和描述表单元素。但是,这两个标签经常被设计师遗忘或忽视,本文将重点介绍这两个标签的使用、样式设置和在实际开发中的应用。 一、fieldset 标签 ...

    fieldset标签定义说明.docx

    `&lt;fieldset&gt;`标签用于定义一个字段集,通常与`&lt;legend&gt;`标签配合使用,`&lt;legend&gt;`为字段集提供了一个标题或说明,帮助用户理解字段集的目的。例如: ```html &lt;fieldset&gt; &lt;legend&gt;Personalia:&lt;/legend&gt; &lt;label&gt;...

    HTML中fieldset标签概述及使用方法

    `&lt;legend&gt;`标签是与`&lt;fieldset&gt;`密切相关的,它为`&lt;fieldset&gt;`提供了一个标题或描述,帮助用户理解字段组的意图。例如: ```html &lt;fieldset&gt; &lt;legend&gt;个人信息&lt;/legend&gt; 姓名: 年龄: &lt;/fieldset&gt; ...

    HTML标签解释大全

    - **说明**:`&lt;fieldset&gt;` 标签用于在字段集包含的文本和其它元素外面绘制一个方框。例如: ```html &lt;fieldset&gt; &lt;legend&gt;个人信息&lt;/legend&gt; 名字:&lt;/label&gt;&lt;br&gt; &lt;input type="text" id="fname" name="fname"&gt;&lt;br...

    fieldset相关的总结

    `&lt;fieldset&gt;`标签通常与`&lt;legend&gt;`标签一起使用,`&lt;legend&gt;`为`&lt;fieldset&gt;`内的元素提供了一个标题。这种组合可以帮助用户更好地理解表单的目的和各个部分的内容。例如,当一个表单包含多个相关的输入字段时,如个人...

    头歌教学实践平台 Web前端开发基础 HTML-表单类的标签

    7. `&lt;fieldset&gt;`和`&lt;legend&gt;`标签:用于组织表单,`&lt;fieldset&gt;`定义一个区域,`&lt;legend&gt;`为该区域添加标题。 示例: ```html &lt;fieldset&gt; &lt;legend&gt;个人信息&lt;/legend&gt; &lt;!-- 表单元素 --&gt; &lt;/fieldset&gt; ``` 8. ...

    HTML常用标签.pdf

    35. &lt;legend&gt;:&lt;legend&gt; 元素为&lt;fieldset&gt;元素定义标题(caption )。 补充 a) 客户端向服务端发送数据可以有两种方式:使用表单 &lt;form&gt; 提交;或使用超链接传参数”xxx.jsp?username=james&age=22⋯ ⋯ ⋯ ”&gt;多...

    html标签,属性大全.pdf

    43. **字段集标题标签**:`&lt;legend&gt;` 用于定义`&lt;fieldset&gt;`的标题。 44. **列表项标签**:`&lt;li&gt;` 用于创建列表的每一项。 45. **链接标签**:`&lt;link&gt;` 用于定义文档与其他资源的关系,如样式表、图标等。 46. **...

    实用html5标签代码参照表

    `&lt;form&gt;`、`&lt;fieldset&gt;`、`&lt;legend&gt;`等元素帮助构建和组织表单结构。 此外,HTML5还引入了离线存储机制(离线存储API,如`localStorage`和`sessionStorage`),允许网页在用户离线时也能访问一部分数据。Web ...

    Ext.form.FieldSet的用法.pdf

    1. **checkboxToggle**:此配置项允许在 FieldSet 的 legend 标签前添加一个复选框。设置为 `true` 时,用户可以通过勾选复选框来展开或收起 FieldSet 内的内容。如果不提供具体的配置对象,系统会自动创建一个复选...

    HTML5标签速查表.pdf

    **标签**: `&lt;legend&gt;` **描述**: 定义`&lt;fieldset&gt;`的标题。 **3.9 密钥生成标签** **标签**: `&lt;keygen&gt;` **描述**: 自动生成公钥/私钥对。 **3.10 输出标签** **标签**: `&lt;output&gt;` **描述**: 定义计算结果的...

    HTML5标签和属性列表.pdf

    * legend:定义fieldset 中的标题 * li:定义列表的项目 * link:定义资源引用 * map:定义图像映射 * menu:定义菜单列表 * meta:定义元信息 * meter:定义预定义范围内的度量 * nav:定义导航链接 * object:定义...

    html5标签参考手册html5标签参考手册

    此外,&lt;fieldset&gt;和&lt;legend&gt;元素可用于组织表单,元素用于显示计算结果或表单验证信息。 五、Canvas与SVG图形 HTML5的元素提供了基于JavaScript的绘图能力,可以动态绘制2D图形。另一方面,Scalable Vector ...

    HTML标签分类及其属性.pdf

    &lt;fieldset&gt;标签用于定义窗体集合的外框,该标签可以指定窗体集合的标题和样式。该标签的属性包括: * class:指定标签的类别名 * id:指定标签的id * language:指定描述语言 * style:指定行内的样式表 标题标签 ...

    html5常用标签.txt

    #### 六、图像与多媒体标签 1. **`&lt;img&gt;`**: 图像标签,用于插入图片。 2. **`&lt;a&gt;`**: 链接标签,用于创建超链接。 3. **`&lt;map&gt;`**: 定义图像中的可点击区域。 4. **`&lt;area&gt;`**: 图像映射中的一个热点。 5....

    HTML标签英文单词

    `&lt;legend&gt;` 标签用于定义 `&lt;fieldset&gt;` 元素的标题。它通常放置在 `&lt;fieldset&gt;` 的开头,以便于用户理解表单部分的作用。 ### &lt;li&gt;: List Item `&lt;li&gt;` 标签用于定义列表项。它可以用于定义有序列表 (`&lt;ol&gt;`) 或...

Global site tag (gtag.js) - Google Analytics