如果一个页面的表单项太多,我们最好把它们分组显示,就像使用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来增强这两个元素样式的示例。 jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个...
在"jquery fieldset和legend标签特效代码"中,开发者可能使用jQuery来实现一些增强这些元素视觉效果或交互性的功能。例如,他们可能: 1. **动态样式切换**:使用jQuery选择器找到所有的 `<fieldset>` 和 `<legend>...
在 HTML 中,fieldset 和 legend 标签是两个常用的标签,用于组织和描述表单元素。但是,这两个标签经常被设计师遗忘或忽视,本文将重点介绍这两个标签的使用、样式设置和在实际开发中的应用。 一、fieldset 标签 ...
`<fieldset>`标签用于定义一个字段集,通常与`<legend>`标签配合使用,`<legend>`为字段集提供了一个标题或说明,帮助用户理解字段集的目的。例如: ```html <fieldset> <legend>Personalia:</legend> <label>...
`<legend>`标签是与`<fieldset>`密切相关的,它为`<fieldset>`提供了一个标题或描述,帮助用户理解字段组的意图。例如: ```html <fieldset> <legend>个人信息</legend> 姓名: 年龄: </fieldset> ...
- **说明**:`<fieldset>` 标签用于在字段集包含的文本和其它元素外面绘制一个方框。例如: ```html <fieldset> <legend>个人信息</legend> 名字:</label><br> <input type="text" id="fname" name="fname"><br...
`<fieldset>`标签通常与`<legend>`标签一起使用,`<legend>`为`<fieldset>`内的元素提供了一个标题。这种组合可以帮助用户更好地理解表单的目的和各个部分的内容。例如,当一个表单包含多个相关的输入字段时,如个人...
7. `<fieldset>`和`<legend>`标签:用于组织表单,`<fieldset>`定义一个区域,`<legend>`为该区域添加标题。 示例: ```html <fieldset> <legend>个人信息</legend> <!-- 表单元素 --> </fieldset> ``` 8. ...
35. <legend>:<legend> 元素为<fieldset>元素定义标题(caption )。 补充 a) 客户端向服务端发送数据可以有两种方式:使用表单 <form> 提交;或使用超链接传参数”xxx.jsp?username=james&age=22⋯ ⋯ ⋯ ”>多...
43. **字段集标题标签**:`<legend>` 用于定义`<fieldset>`的标题。 44. **列表项标签**:`<li>` 用于创建列表的每一项。 45. **链接标签**:`<link>` 用于定义文档与其他资源的关系,如样式表、图标等。 46. **...
`<form>`、`<fieldset>`、`<legend>`等元素帮助构建和组织表单结构。 此外,HTML5还引入了离线存储机制(离线存储API,如`localStorage`和`sessionStorage`),允许网页在用户离线时也能访问一部分数据。Web ...
1. **checkboxToggle**:此配置项允许在 FieldSet 的 legend 标签前添加一个复选框。设置为 `true` 时,用户可以通过勾选复选框来展开或收起 FieldSet 内的内容。如果不提供具体的配置对象,系统会自动创建一个复选...
**标签**: `<legend>` **描述**: 定义`<fieldset>`的标题。 **3.9 密钥生成标签** **标签**: `<keygen>` **描述**: 自动生成公钥/私钥对。 **3.10 输出标签** **标签**: `<output>` **描述**: 定义计算结果的...
* legend:定义fieldset 中的标题 * li:定义列表的项目 * link:定义资源引用 * map:定义图像映射 * menu:定义菜单列表 * meta:定义元信息 * meter:定义预定义范围内的度量 * nav:定义导航链接 * object:定义...
此外,<fieldset>和<legend>元素可用于组织表单,元素用于显示计算结果或表单验证信息。 五、Canvas与SVG图形 HTML5的元素提供了基于JavaScript的绘图能力,可以动态绘制2D图形。另一方面,Scalable Vector ...
<fieldset>标签用于定义窗体集合的外框,该标签可以指定窗体集合的标题和样式。该标签的属性包括: * class:指定标签的类别名 * id:指定标签的id * language:指定描述语言 * style:指定行内的样式表 标题标签 ...
#### 六、图像与多媒体标签 1. **`<img>`**: 图像标签,用于插入图片。 2. **`<a>`**: 链接标签,用于创建超链接。 3. **`<map>`**: 定义图像中的可点击区域。 4. **`<area>`**: 图像映射中的一个热点。 5....
`<legend>` 标签用于定义 `<fieldset>` 元素的标题。它通常放置在 `<fieldset>` 的开头,以便于用户理解表单部分的作用。 ### <li>: List Item `<li>` 标签用于定义列表项。它可以用于定义有序列表 (`<ol>`) 或...