注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML <fieldset> 标签应用二  

2011-03-18 20:47:04|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

HTML

<fieldset> 标签应用二

 

圆角的文本框嵌套圆角的文本框博文简介

 

 

圆角的文本框嵌套圆角的文本框:

HTML <fieldset>标签的文本框内部嵌套,相互变化嵌套形成不同类型的文本框。

把一个HTML <fieldset>标签嵌套在另一个HTML <fieldset>标签的标题内,或者嵌套在HTML <fieldset>标签的文本编辑框内。

加载后可以按照自己的需要去掉标题栏、也可以像HTML <TABLE>标签表格一样进行排版等形式。

1、嵌套在标题栏内

HTML基本代码

示例

 

1、去掉被嵌套标题代码:

文本框的文本编辑变为标题文本

<form>
  <fieldset>
    <legend><form>
  <fieldset>
        标题编辑
  </fieldset>
</form></legend>
    文本编辑
  </fieldset>

</form>

2、完整嵌套代码:

标题文本的文本编辑变为副标题文本

<form>
  <fieldset>
    <legend><form>
  <fieldset>
    <legend>标题文本</legend>
    副标题文本</fieldset>
</form></legend>
    文本编辑
  </fieldset>
</form>

3、多层嵌套代码:

在这里我做了三层

<form>
  <fieldset>
    <legend>
<form>
  <fieldset>
    <legend><form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form></legend>
    文本编辑
  </fieldset>
</form>
</legend>
    文本编辑
  </fieldset>
</form>

 

1、去掉被嵌套标题示例:

标题编辑
文本编辑

2、完整嵌套示例:

标题文本副标题文本
文本编辑

3、多层嵌套示例 :

标题文本文本编辑
文本编辑
文本编辑

 

2、嵌套在文本编辑框内

HTML基本代码

示例

 

1、去掉文本框内标题代码:

<form>
  <fieldset>
    <legend>标题文本</legend>
    <form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

2、完整嵌套代码:

<form>
  <fieldset>
    <legend>标题文本</legend>
    <form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

3、多层嵌套文本框内有标题代码:

<form>
  <fieldset>
    <legend>标题文本</legend>
    <form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

4、多层嵌套文本框内无标题代码:

<form>
  <fieldset>
    <legend>标题文本</legend>
    <form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

 

 

1、去掉文本框内标题示例:

标题文本
文本编辑

 

2、完整嵌套示例:

标题文本
标题文本文本编辑

 

3、多层嵌套文本框内有标题示例: 

标题文本
标题文本文本编辑
标题文本文本编辑
 

 

4、多层嵌套文本框内无标题 

标题文本
文本编辑
文本编辑

 

 

 

3、嵌套在标题栏、文本编辑框内形成综合式

HTML基本代码

示例

综合式一代码:

<form>
  <fieldset>
    <legend><form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form></legend>
    <form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

 

综合式二代码:

<form>
  <fieldset>
    <legend><form>
  <fieldset>
    文本编辑
  </fieldset>
</form></legend>
    <form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

 

综合式三代码:
<form>
  <fieldset>
    <legend><form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form></legend>
    <form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>

</fieldset>
</form>

 

综合式四代码:

<form>
  <fieldset>
    <legend><form>
  <fieldset>
    文本编辑
  </fieldset>
</form></legend>
    <form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
<form>
  <fieldset>
    文本编辑
  </fieldset>
</form>
  </fieldset>
</form>

综合式一示例:

标题文本文本编辑
标题文本文本编辑

 

综合式二示例:

文本编辑
文本编辑

 

综合式三示例:

标题文本文本编辑
文本编辑
文本编辑
文本编辑
文本编辑

 

综合式四示例:

文本编辑
文本编辑
文本编辑
文本编辑
文本编辑

 

 

欢迎光临启野博客!
  评论这张
 
阅读(1007)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017