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>
&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>
  </option>
  <option>
  </option>
  <option>
  </option>
  <option>
  </option>
  <option>
  </option>
  <option>
  </option>
  <option>
  </option>
  <option>
  </option>
  <option>
  </option>
  </select>
  </fieldset>
  <fieldset>
  <legend>
  </legend>
  <label
  for
  =
  "WebDesign"
  >
  </label>
  <select
  id
  =
  "WebDesign"
  >
  <optgroup
  label
  =
  "client"
  >
  <option
  value
  =
  "HTML"
  >
  </option>
  <option
  value
  =
  "CSS"
  >
  </option>
  <option
  value
  =
  "javascript"
  >
  </option>
  </optgroup>
  <optgroup
  label
  =
  "server"
  >
  <option
  value
  =
  "PHP"
  >
  </option>
  <option
  value
  =
  "ASP"
  >
  </option>
  <option
  value
  =
  "JSP"
  >
  </option>
  </optgroup>
  <optgroup
  label
  =
  "database"
  >
  <option
  value
  =
  "Access"
  >
  </option>
  <option
  value
  =
  "MySQL"
  >
  </option>
  <option
  value
  =
  "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"
  >
  </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>