您的位置:58编程 > html表格分组 HTML 表单元素分组

html表格分组 HTML 表单元素分组

2023-03-11 06:33 HTML教程

html表格分组 HTML 表单元素分组

html表格分组

HTML表格分组是一种将表格中的数据进行分组的方法,它可以帮助我们更好地理解和控制表格中的数据。它可以使我们更容易地对表格中的数据进行分类和统计,并且可以使我们更容易地对数据进行处理。

<table> 
    <thead> 
        <tr> 
            <th colspan="2">Group 1</th> 
            <th colspan="2">Group 2</th> 
        </tr> 
    </thead> 

    <tbody> 
        <tr> 
            <td>;Data 1A1<;/td>; 
            <;Data 1A2<;/td>; 

            <;Data 2A1<;/td>; 
            <;Data 2A2<;/td>;  

        <tr>  

        ...  

    <tbody>  
     ...  
     ...  

     ...  

     ...  

     ...  

     ...  

     ...  

     ...  

     ...  

     ...  

     ...  

     ...  

      ....   
      ....   
      ....   
      ....   
      ....   
      ....   
      ....   																                                                                                                                                                                         

HTML 表单元素分组

HTML fieldset

要将一些元素组合在一起,您可以使用 fieldset 元素。它具有局部属性: name,form,disabled

您可以在以下代码中了解如何应用fieldset元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="city">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <button>Submit Vote</button>
  </form>
</body>
</html>

legend - fieldset元素的描述性标签

您可以向每个fieldset元素添加legend元素以提供更多信息。

legend元素必须是fieldset元素的第一个子元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend accesskey="y">
        About <u>Y</u>ou (ALT + Y)
      </legend>
      <p><label for="userName">User name:</label>
         <input type="text" name="txtUserName" size="20" id="userName" />
      </p>
    </fieldset>

    <fieldset>
      <legend accesskey="u">
        About <u>U</u>s (ALT + U)
      </legend>
      <p>
        <label for="referrer">How did you hear about us?</label>:<br/>
        <select name="selReferrer" id="referrer">
          <option selected="selected" value="">Select answer</option>
          <option value="website">Another website</option>
          <option value="printAd">Magazine ad</option>
          <option value="friend">From a friend</option>
          <option value="other">Other</option>
        </select>
      </p>
    </fieldset>
    
    <button>Submit Vote</button>
  </form>
</body>
</html>

上面的代码还显示了如何设置长度标签的访问键。


fieldset disable - 禁用输入组

通过将disabled属性应用于fieldset
元素,可以在一个步骤中禁用多个输入元素。

以下代码显示如何使用fieldset元素禁用输入元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset disabled>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <button>Submit Vote</button>
  </form>
</body>
</html>
阅读全文
以上是58编程为你收集整理的html表格分组 HTML 表单元素分组全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58编程 58biancheng.com 版权所有 联系我们
桂ICP备12005667号-32 Powered by CMS