HTML fieldset 标签 -- 表单分组
如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p
标签分开段落一样,可以使用fieldset
与legend
标签对表单内容分组.
- fieldset标签是成对出现的,以
<fieldset>
开始,以</fieldset>
结束 - 一个表单可以有多个
<fieldset>
,每对<fieldset>
为一组,每组内容的描述可以使用legend标签说明 - HTML表单分组与label标签视频教程
- 引用网址: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>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>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
font-size:12px;
margin:0;
padding:0;
}
fieldset{
margin:10px;
width:270px;
color:#333;
border:#06c 1px dashed;
}
legend{
color:#06c;
font-weight:800;
background:#fff;
}
ul{
list-style-type:none;
margin:8px 0px 4px 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>CSS网页布局</legend>
<ul>
<li>Div+CSS教程 系统的讲述了关于CSS布局的知识</li>
<li>CSS布局实例 向你呈现了52css.com中的一些实例</li>
<li>CSS模板下载 你可以查看一些模板</li>
<li>CSS酷站欣赏 高手与大师的作品定会让你有所收获</li>
</ul>
</fieldset>
</div>
</form>
</body>
</html>
HTML fieldset 标签 -- 表单分组相关推荐
- fieldset 标签 -- 对表单进行分组
转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset--一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在for ...
- 列表标签,表格标签,表单标签
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- HTML 基础【2】 -- 表格标签 / 表单标签
请先学习往期内容:HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签 作业分析 上一篇<HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签&g ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
- struts2 标签单选框_Struts 2 UI标签–表单,复选框,单选,选择,提交
struts2 标签单选框 Struts2 UI tags are used to generate HTML form elements in result pages. Earlier we lo ...
- 华为云前端一阶段HTML入门(常用标签 表格标签 表单)
HTML入门 HTML入门 1.1结构标签 div是块标签,包裹一定区域中的元素,会独自占一行,可以嵌套使用形成父子级关系以及兄弟级关系: span是会在一行中不断加入(内联标签),但当数量过多时也会 ...
- HTML基本标签、字体设置标签、表格标签,表单标签
区分: 1.HTML(hyper text markup language) 静态的网页技术 2.JSP (java server page)(实质是HTML+java) 动态的网页技术 3.Serv ...
最新文章
- MPB:湖南师大尹佳组-​乳酸菌益生菌表面粘附能力的检测
- 【FPGA】SRIO例子程序仿真分析实践
- 【翻译】【linux设备驱动】linux地址类型
- easyNeurons 神经网络入门教程
- codeforce训练2总结
- python construct 字符串_通过字符串变量在Python中设置和获取@property方法
- 区块链BaaS云服务(7)微软Azure区块链服务
- unity 批量导入模型工具_如何将VMD舞蹈导入桌面萌娘MMD
- [剑指Offer] 数据流中的中位数
- 各种流行编程语言的优缺点
- Tshark的使用问题
- pytorch torch.normal
- 【Java】JSON数据交换格式及其使用案例(聊天工具)
- arcgis已试图对空几何执行该操作_ArcGIS中坐标转换和投影变换
- iOS IPV6审核被拒 - 芒果iOS开发
- mysql 表分区 排序_mysql 表分区
- oracle占位符怎么打,oracle所支持的占位符是什么
- 【异常】git提示Ask a project Owner or Maintainer to create a default branch
- jQuery的下载与安装
- windows系统中nginx图片服务器,windows nginx 图片服务器
热门文章
- 【综述专栏】自动驾驶中可解释AI的综述和未来研究方向
- 神经网络支持大脑是「预测机器」,预测是节能的
- 首个单设备模拟神经元出现 可有效解决传统计算机所面临的问题
- 昨夜,5G R16标准正式冻结!5G物联网扬帆起航
- Facebook爆锤深度度量学习:该领域13年来并无进展!网友:沧海横流,方显英雄本色...
- NASA:首批“太空蜜蜂”将赴空间站上班,助宇航员推进研究!
- 特写李飞飞:她激励了人工智能的发展,更要给人工智能赋予人的价值
- Hinton:人类就是机器,绝妙的机器
- 太励志!80 后草根创业者自学编程年收入上亿
- 一位83岁独立开发者教会我的道理