HTML标签fieldset

一个不常用的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> &nbsp;&nbsp; <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" > <legend style="border:0px;"> 1234 </legend> </fieldset>
样式五
1234

代码如下:
<fieldset style="width:300;height:150;border:1px dashed red" align="center"> <legend style="width:100px;border:1px dashed #ff9966;text-align:center;font-family:arial;font-weight:bold"> 1234 </legend> </fieldset>
样式六
 

代码如下:
<table border=0 cellPadding=0 cellSpacing=0 align="center"> <tr><td bgcolor=#d9d9d9> <fieldset style="width:300;height:150" align=center></fieldset> </td><tr> </table>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。