fieldset——一个实用不常用的HTML标签

lovehuayud

2015-01-18

因项目需要，用到了这个以前见过却没有用过的标签，于是搜索了下，看见一篇不错的，分享一下：实际应用：

 
一个不常用的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——一个实用不常用的HTML标签

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>
下面是上面代码的运行结果：

fieldset——一个实用不常用的HTML标签