HTML之:fieldset——一个不常用的HTML标签
2016年4月14日17:10:02记录
一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下:
<fieldset>
<legend>fieldset名称</legend>
<!-- 加入你的内容 -->
</fieldset>
下面是一个代码示例:
<center>
<fieldset style=" width:300px">
<legend>用户登陆</legend>
<form method="post">
帐号:<input ></input>
<br><br>
密码:<input type="password" ></input>
<br><br>
<input type="submit" value="登陆" ></input>
<input type="reset" value="重填" ></input>
</form>
</fieldset>
</center>
代码的实际效果如下:
用户登陆帐号:
密码:
fieldset 标签 -- 对表单进行分组
- 此标签是成对出现的,以
<fieldset>
开始,以</fieldset>
结束 - 一个表单可以有多个
<fieldset>
,每对<fieldset>
为一组,每组的内容描述可以使用<legend>
说明<form
action
=
"http://www.dreamdu.com/dreamdu.php"
method
=
"post"
enctype
=
"multipart/form-data"
id
=
"dreamduform"
>
<fieldset>
<legend>
用户名与密码:</legend>
<input
name
=
"hiddenField"
type
=
"hidden"
value
=
"hiddenvalue"
/>
<label
for
=
"username"
>
用户名:</label>
<input
type
=
"text"
id
=
"username"
value
=
"www.dreamdu.com"
/>
<label
for
=
"pass"
>
密码:</label>
<input
type
=
"password"
id
=
"pass"
/>
</fieldset>
<fieldset>
<legend>
性别:</legend>
<label
for
=
"boy"
>
男</label>
<input
type
=
"radio"
value
=
"1"
id
=
"sex"
/>
<label
for
=
"girl"
>
女</label>
<input
type
=
"radio"
value
=
"2"
id
=
"sex"
/>
<label
for
=
"sex"
>
保密</label>
<input
type
=
"radio"
value
=
"3"
id
=
"sex"
/>
</fieldset>
<fieldset>
<legend>
我最喜爱的:</legend>
<label
for
=
"computer"
>
计算机</label>
<input
type
=
"checkbox"
value
=
"1"
id
=
"fav"
/>
<label
for
=
"trval"
>
旅游</label>
<input
type
=
"checkbox"
value
=
"2"
id
=
"fav"
/>
<label
for
=
"buy"
>
购物</label>
<input
type
=
"checkbox"
value
=
"3"
id
=
"fav"
/>
</fieldset>
<fieldset>
<legend>
对梦之都的意见:</legend>
<label
for
=
"select"
>
你对梦之都的感觉</label>
<select
size
=
"1"
id
=
"select"
>
<option>
很全面,很好</option>
<option>
一般般吧,还要努力</option>
<option>
有很多问题,不过还可以</option>
</select>
</fieldset>
<fieldset>
<legend>
梦之都编程语言选择:</legend>
<label
for
=
"multipleselect"
>
你想在梦之都学习的编程语言</label>
<select
size
=
"10"
multiple
=
"multiple"
id
=
"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"
>
<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"
size
=
"35"
maxlength
=
"255"
/>
<label
for
=
"contactus"
>
联系我们</label>
<textarea
cols
=
"50"
rows
=
"10"
id
=
"contactus"
>
dreamer dreamdu[at]163[dot]com
</textarea>
</fieldset>
<fieldset>
<legend>
提交:</legend>
<input
type
=
"submit"
value
=
"submit"
id
=
"submit"
/>
<input
type
=
"reset"
value
=
"reset"
id
=
"reset"
/>
</fieldset>
</form>
下面是上面代码的运行结果:
用户名与密码:用户名: 密码:性别:男 女 保密我最喜爱的:计算机 旅游 购物对梦之都的意见:你对梦之都的感觉 很全面,很好 一般般吧,还要努力 有很多问题,不过还可以梦之都编程语言选择:你想在梦之都学习的编程语言 XHTML CSS JAVASCRIPT XML PHP C# JAVA C++ PERL我要在梦之都学:选择一个你在梦之都最想学的 HTML CSS javascript PHP ASP JSP Access MySQL SQLServer个人化信息:个性照片上传 联系我们 dreamer dreamdu[at]163[dot]com提交:
样式一
代码如下: <fieldset style="width:300;height:150;border:2px groove" align=center></fieldset> 样式二 代码如下: <fieldset style="width:300;height:150;border:2px red groove" align=center></fieldset> 样式三 代码如下: <fieldset style="width:300;height:150;border:2px red groove; </fieldset> 样式四 1234 <fieldset style="width:300;height:150;border:1px dashed #ff9966" align="center" > 样式五 1234 代码如下: <fieldset style="width:300;height:150;border:1px dashed red" align="center"> 样式六 代码如下: <table border=0 cellPadding=0 cellSpacing=0 align="center"> |
HTML之:fieldset——一个不常用的HTML标签的更多相关文章
- fieldset——一个不常用的HTML标签
fieldset 标签 -- 对表单进行分组 在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分组成 基本信息(一般为必填) 详细信息(一般为可选) ...
- 转载:给bash的提示符设置不同的颜色 一个很常用的功能,效果如下:
原文来自:http://www.cnblogs.com/cyttina/archive/2013/01/08/2850406.html 一个很常用的功能,效果如下: 这样就可以很轻易的将输入的指令和其 ...
- jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?
1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...
- JSP 标准标签库(JSTL)之最常用的JSTL标签总结
JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-t ...
- 常用HTML meta 标签属性(网站兼容与优化需要),meta标签
常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...
- 一个完整的html 每个标签的含义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签
HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签.该标签可以帮助你方便地计算文件的 MD5.SHA1 与 C ...
- css的reset和常用的html标签的默认样式整理
先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...
- 自动回复之实现随机回复与常用Mapper XML标签
[常用Mapper XML标签] 1.基本的:select.insert.update 等 2.可读性.方便拼SQL:where.set.trim 3.减少重复:sql 4.逻辑控制:if.choos ...
随机推荐
- Android反编译工具的使用-Android Killer
今天百度搜索“Android反编译”搜索出来的结果大多数都是比较传统的教程.刚接触反编译的时候,我也是从这些教程慢慢学起的.在后来的学习过程中,我接触到比较方便操作的Android反编译.在这,我将使 ...
- Codeforces Round #359(div 2)
A:= v = B:^ w ^ C:一天n个小时,一个小时m分(n,m十进制),一个手表有两部分,左边表示时,右边表示分,但都是7进制,而且手表上最多只能有7个数字且数字不能重复,现在要你算出能正确表 ...
- [BZOJ3156]防御准备(斜率优化DP)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3156 分析: 简单的斜率优化DP
- [BZOJ1016][JSOI2008]最小生成树计数(结论题)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1016 分析: 首先有个性质:如果边集E.E'都可以表示一个图G的最小生成树(当然E和E ...
- codevs 4543 treap 模板
type rec=record lc,rc,v,rnd,size,w,fa:longint; end; var n,root,tot,ans,opt,x,i,po:longint; tr:array[ ...
- linux 权限
ls -la 查看文件 drwxr-xr-x 2 root root 4096 ...... 第一个d:代表目录:-代表文件 后面三个一组:r:读:w:写:x:执行 第一个root 代表所属用户: 第 ...
- getopt
头文件 #include<unistd.h> 定义函数 int getopt(int argc,char * const argv[ ],const char * optstring); ...
- Java面试常考知识点
1. 什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Jav ...
- C++中函数的默认参数和C语言中volatile的学习
1.函数默认参数 1 int func(int a,int b=10) 2 { 3 return a*b; 4 } 5 6 int main() 7 { 8 int c=func(2); 9 cout ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...