HTML fieldset 标签 -- 表单分组

最新推荐文章于 2024-04-07 08:30:00 发布

weixin_34167819

最新推荐文章于 2024-04-07 08:30:00 发布

阅读量166

点赞数

文章标签： xhtml php c#

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.

fieldset 标签 -- 对表单进行分组

fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
HTML表单分组与label标签视频教程
引用网址:http://www.dreamdu.com/xhtml/tag_fieldset/
属性:
- Common -- 一般属性

示例

Code
<form action="dreamdu.php" method="post" id="dreamduform">
    <fieldset>
        <legend>用户名与密码:</legend>
        <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" value="dreamdu" />
        <label for="pass">密码:</label>
        <input type="password" id="pass" name="pass" />
    </fieldset>
    <fieldset>
        <legend>性别:</legend>
        <label for="boy">男</label>
        <input type="radio" value="1" id="sex" name="sex" />
        <label for="girl">女</label>
        <input type="radio" value="2" id="sex" name="sex" />
        <label for="sex">保密</label>
        <input type="radio" value="3" id="sex" name="sex" />
    </fieldset>
    <fieldset>
        <legend>我最喜爱的:</legend>
        <label for="computer">计算机</label>
        <input type="checkbox" value="1" id="fav" name="fav" />
        <label for="trval">旅游</label>
        <input type="checkbox" value="2" id="fav" name="fav" />
        <label for="buy">购物</label>
        <input type="checkbox" value="3" id="fav" name="fav" />
    </fieldset>
    <fieldset>
        <legend>对梦之都的意见:</legend>
        <label for="select">你对梦之都的感觉</label>
        <select size="1" id="select" name="select">
            <option>很全面,很好</option>
            <option>一般般吧,还要努力</option>
            <option>有很多问题,不过还可以</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>梦之都编程语言选择:</legend>
        <label for="multipleselect">你想在梦之都学习的编程语言</label>
        <select size="10" multiple="multiple" id="multipleselect" name="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" name="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" name="myimage" size="35" maxlength="255" />
        <label for="contactus">联系我们</label>
        <textarea cols="50" rows="10" id="contactus" name="contactus">
            可爱的猴子
        </textarea>
    </fieldset>
    <fieldset>
        <legend>提交:</legend>
        <input type="submit" value="submit" id="submit" name="submit" />
        <input type="reset" value="reset" id="reset" name="reset" />
    </fieldset>
</form>

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    body{
        font-size:12px;
        margin:0;
        padding:0;
    }
    fieldset{
        margin:10px;
        width:270px;
        color:#333;
        border:#06c 1px dashed;
    }
    legend{
        color:#06c;
        font-weight:800;
        background:#fff;
    }
    ul{
       list-style-type:none;
       margin:8px 0px 4px 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset>
        <legend>CSS网页布局</legend>
        <ul>
        <li>Div+CSS教程系统的讲述了关于CSS布局的知识</li>
        <li>CSS布局实例向你呈现了52css.com中的一些实例</li>
        <li>CSS模板下载你可以查看一些模板</li>
          <li>CSS酷站欣赏高手与大师的作品定会让你有所收获</li>
        </ul>
        </fieldset>
    </div>
    </form>
</body>
</html>

weixin_34167819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML fieldset 标签 -- 表单分组

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.fieldset 标签 -- 对表单进行分组 fieldset标签是成对出现的,以&lt;fieldset&gt;开始,以&lt;/fieldset&gt;结束一个表单可以有多个&lt;fieldset&gt;,每对&lt;fieldset&gt;为一...
复制链接

扫一扫