zoukankan      html  css  js  c++  java
  • fieldset 不常用的HTML标签

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

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

    当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。其默认格式是设置边框,可通过设置style属性来改变。

    <fieldset> 标签没有必需的或唯一的属性,一个表单元素form里可能有好几个<fieldset>。

    其结构一般如下:

    <fieldset>

    <legend>fieldset 元素定义的标题</legend>
    <!-- 正常表单元素 -->
    </fieldset>

    下面是示例1

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>fieldset示例</title>
    </head>
    
    <body>
    <form method="post" action="submit.html">
      <fieldset>
     
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Your name" required="required" />
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Your email address" required="required" />
       </fieldset>
    </form>
    </body>
    </html>

    相当于将fieldset中的表单元素打包在了一起,并加了一个外边框。下面是代码跑出来的结果图1。

    示例2


    <!
    doctype html> <html> <head> <meta charset="utf-8"> <title>fieldset示例</title> </head> <body> <form method="post" action="submit.html"> <fieldset> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Your name" required="required" /> </fieldset> <fieldset> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your email address" required="required" /> </fieldset> <fieldset> <label for="message">Message:</label> <textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea> <fieldset> <input type="submit" value="Send" /> </fieldset> </form> </body> </html>

    一个表单元素form里可能有好几个<fieldset>,每一个都加边框。结果图2

    示例3

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>fieldset示例</title>
    </head>
    
    <body>
    <form method="post" action="submit.html">
      <fieldset>
        <p>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Your name" required="required" />
        </p>
        <p>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Your email address" required="required" />
        </p>
        <p>
         <label for="message">Message:</label>
         <textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea>
        </p>
        <input type="submit" value="Send" />
       </fieldset>
    </form>
    </body>
    </html>

    与示例2的区别,表单元素form里只有一个<fieldset>,只加一个大边框。结果图3

  • 相关阅读:
    Roce ofed 环境搭建与测试
    Ubuntu 1804 搭建NFS服务器
    Redhat 8.0.0 安装与网络配置
    Centos 8.1 安装与网络配置
    SUSE 15.1 系统安装
    VSpare ESXi 7.0 基本使用(模板、iso、SRIOV)
    VSpare ESXi 7.0 服务器安装
    open SUSE leap 15.1 安装图解
    KVM虚拟机网卡连接网桥
    GitHub Action一键部署配置,值得拥有
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/7255374.html
Copyright © 2011-2022 走看看