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

启野的博客

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

 
 
 

日志

 
 

HTML <fieldset> 标签介绍  

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

  下载LOFTER 我的照片书  |
 

HTML

<fieldset> 标签

 

圆角的文本框与博文简介

 

 

搜遍整个网络没有制作圆角的文本框代码,如果制作圆角的只有制作透明圆角图片,很繁琐,如若只用代码做圆角,只有运用HTML <fieldset>标签。

HTML <fieldset>标签无法改变改变边框的颜色等属性(如改变颜色属性,则已经不是圆角的了)。虽然网站介绍的很多,但拓展应用的不多,通过自己的时间制作,感觉乐趣无限!启野欢迎与各位爱好者交流!

 

原代码来源于:w3school 在线教程

HTML代码:

 <form>

  <fieldset>

    <legend>health information</legend>

    height: <input type="text" />

    weight: <input type="text" />

  </fieldset>

</form>

 

在这里我进行了修改,形成新的代码运用:

 

用“文本编辑”四个字代替了

height: <input type="text" />

weight: <input type="text" />

 

用“标题文本”四个字代替了

health information

 

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

 

请参看下面详细介绍:

 

1、定义和用法

定义和用法

HTML基本代码

示例

 

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。(如不需要可以去掉这个属性)

 

 

有标题代码:

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

无标题代码:

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

 

 

    有标题示例:

 

   
标题文本文本编辑

 

    无标题示例:

   
文本编辑

 

 

2、<fieldset>标签中标题的对齐方式

align 属性规定

HTML基本代码

示例

 

align 属性规定<fieldset>标签中标题的对齐方式

 

语法

<legend align="value">属性值

 

值的描述

left       对标题进行左对齐。

right     对标题进行右对齐。

top       对标题进行上对齐。

bottom 对标题进行下对齐。

 

补充对标题进行居中有意义:

center对标题进行居中齐。

 

 

 

 

 

标题靠右对齐代码:

<form>
  <fieldset>
    <legend align="right">标题文本</legend>
    文本编辑
  </fieldset>
</form>

 

标题居中对齐代码:

 <form>
  <fieldset>
    <legend align="center">标题文本</legend>
    文本编辑
  </fieldset>
</form>

 

 

标题靠右对齐:

          
标题文本文本编辑

 标题居中对齐:

标题文本文本编辑

 

 

 

3、设置WIDTH宽度属性和HEIGHT高度属性

设置说明

HTML基本代码

示例

 

在<fieldset>标签内添加<style="WIDTH: 宽度px; HEIGHT: 高度px">,也可以自动拖动大小。

 

 

<form>
  <fieldset style="WIDTH:宽度px;HEIGHT:高度px">
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form>

 

 

              
标题文本文本编辑
欢迎光临启野博客!
  评论这张
 
阅读(1536)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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