A complete list of commonly used attributes of forms and tables

A must-read for zero basics of HTML - getting started with HTML, programming is so simple

1. form form

The form is mainly for user information, collecting data, sending the information entered by the user to the server, and then returning it to the login interface.

1.1 form form tag

Used to mark a form and store form data
. Syntax format:
<form action="" method="" name="" target="">表单内容</form>

Some attributes of form form tags:

• form form field
• action: indicates the submission address
• name: form name
• target: where the new page will be opened after submitting the form. It was mentioned in the previous link a

1.2 input input form control label

• The input is an inline element, so it can be displayed on one line. At the same time, input is a replacement element, so it supports width and height attributes. (In the previous Chapter 5: 2. Inline elements were mentioned. img and input are both inline elements and replacement elements)

Format:<input type="输入控件类型" >

Some properties of input input form controls:

• placeholder: Prompts you for what you want to enter
• value: represents the default input content in the control
• disabled: Disable selection of your selected content
• checked: used for single selection and multi-selection to indicate that it is checked by default

1.2.1 text text box

Format:<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">

• name: the name of the text box, can be repeated
• id: It is also the name of the text box and cannot be repeated.
• placeholder: Prompts you for what you want to enter
• value: represents the default input content in the control
• size: width of the text box
• maxlength: the maximum number of characters input into the text box
• minlength: the minimum number of characters input into the text box

1.2.2 password password box

Format: <input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
The password box has the same properties and format as the text box, except that the content entered in the password box will be replaced by a small black dot.

1.2.3 radio radio button

Format:<input type="radio" name="" checked vaule><label for="">单选项的名称</label>

• name: The name of the radio button. Note: The names of each group of radio options in the same group of radio button boxes must be the same.
• checked: Indicates that the selected content is checked by default
• disabled: Disable selection of the selected content
• vaule: The default value of the radio button (the value passed when submitting data to the server)
• <label></label>Label: Auxiliary input label for selection

1.2.4 checkbox multiple selection box

Format:<input type="checkbox" name="" checked vaule><label for="">当前选项的名称</label>

• name: The name of the radio button. Note: The names of each group of single options in the same group of check boxes must be consistent.
• checked: Indicates that the selected content is checked by default
• disabled: Disable selection of the selected content
• vaule: The default value of the check box (the value passed when submitting data to the server)
• <label></label>Label: Auxiliary input label for selection

<form action="">
        账号：<input type="text" name="username" placeholder="请输入账号" value="123456"><br>
        <!-- 因为input是行内元素，不会自动换行，所以我们加上一个换行符 -->
        密码：<input type="password" name="password" placeholder="请输入密码" value="123456">
         <form action="">
        性别：
        <input type="radio" name="sex" checked><label for="boy">男孩</label>
        <!-- 男孩里面加上了checked 表示默认勾选男孩 -->
        <input type="radio" name="sex"><label for="girl">女孩</label>
        <br>

        喜欢的科目：
        <input type="checkbox" name="subject" checked><label for="Chinese">语文</label>
        <!-- 语文里面加上了checked 表示默认勾选语文 -->
        <input type="checkbox" name="subject"><label for="math">数学</label>
        <input type="checkbox" name="subject"><label for="English">英语</label>
        <input type="checkbox" name="subject"><label for="physical">物理</label>
        <input type="checkbox" name="subject" checked><label for="history">历史</label>
        <!-- 历史里面加上了checked 表示默认勾选历史 -->

        <input type="reset" value="重新选择">
        <!-- 默认值就是重置，此处通过value改变预设值 -->
    </form>

1.2.5 Normal button submit button reset button

• botton: Ordinary buttons (ordinary buttons can be bound to scripts through js to complete some operations, and then combined with subsequent js) combined with js such as:<input type="button" value="给关闭" oncClick="WinClose()">

• submit: Submit button, which can trigger the action of form submission (combined with the following js, such as the implementation of some registration and login functions)

• reset: Reset button to restore the form to the original page

  All three types of buttons can specify the text content displayed on the button through the value attribute.

1.2.6 image image submit button

Format:<input type="image" src="作为图像按钮的图片路径"> -->

<form action="">
        <input type="button" value="我是普通按钮">
        <br>
        <input type="submit" value="我是提交按钮">
        <input type="reset" value="我是重置按钮">

        <!-- 使用图片作为提交1按钮的样式 -->
        <input type="image" src="./img/2.jpg" width="30px" height="30px">
    </form>

Rendering:

1.2.7 New features of css3

<form action="">
        <!-- 7.文件上传框file -->
        <!-- css3新特性 -->
          <!-- 文件上传  -->
          <input type="file"><br>   
           

          <!-- 日期选择框 -->
          请选择日期：<input type="date"><br>

          <!-- 时间 -->
          请选择时间：<input type="time"><br>
          
          <!-- 数字输入框  只能输入数字 字母e是特殊数字 -->
          请输入数字：<input type="number" placeholder="只能输入数字,字母e是特殊数字"><br>

          请滑动滑块验证：<!-- 数字滑块 -->
          <input type="range"><br>
          
          <!-- 颜色 -->
          请选择颜色：<input type="color"><br>
          
          <!-- 电子邮件 -->
          请输入电子邮件：<input type="email" placeholder="请输入电子邮件"><br>
    </form>

Rendering:

2The ：focusform is selected when it gets focus

When the mouse clicks on the form control input box, the outer input box can be displayed through the style modified by css.
It will only take effect when used in form tags.

这段样式加入rest（1）.css外部样式里，引入就行 
       /* 清除默认焦点边框 */
        button,input{
            outline: none;
        }

Format:

selector ：focus{/ write style /}

<style>
        /* 这段加入rest（1）.css外部样式里，引入就行 */
       /* 清除默认焦点边框 */
        button,input{
      
      
            outline: none;
        }

        .text{
      
      
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        /* 点击表单控件    获取焦点选中
        鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示
        */
        .text:focus{
      
      
            border: 1px solid green;
        }

    </style>
</head>
<body>
    账号：<input type="text" name="username" class="text" placeholder="请输入账号">
    <br>
    密码：<input type="password" name="password" class="text" placeholder="请输入账号">

Rendering: When the mouse clicks on the input control box, the color of the control box will change to the color changed in the style.

2. Select drop-down menu

• select is a container element that marks a menu or drop-down list. It contains option elements that mark each item in a menu or drop-down list.
• When select uses the multiple attribute, the user can select multiple items in the list at the same time
• The selected attribute of the option tag specifies that the item is selected. By default, the first item is selected.
• The disabled attribute of the option tag specifies that the item is not available

<label for="season">请选择最喜欢的季节</label>
    <select name="" id="">
        <option value="red">春天</option>
        <option value="green">夏天</option>
        <option value="blue" selected>秋天</option>
        <!-- option标记的selected属性指定该项被选取，默认是第一项被选取 -->
        <option value="white" disabled>冬天</option>
        <!-- option标记的disabled属性指定该项不可用 -->
    </select>

Rendering:

3. textarea multi-line input text box

Generally used for multi-line input text boxes such as comments at the bottom of web pages
. Format:<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

• textarea: retractable text box element
• cols: number of characters in each line
• rows: display the number of rows
• placeholder: Prompts you for what you want to enter
• readonly: Set the multi-line text area to be read-only and cannot be edited or modified.

<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

Rendering: Click the mouse on the lower right corner to resize the text box.

4. Form

• table: table tag, table tag represents a table
• tr: There are as many rows as there are tr in the row.
• td: cell, one row consists of multiple td cells
• th: header is generally used for the first row or column of the table
• caption: table title

<style>
        table {
      
      
            width: 300px;
            height: 50px;
            border: 1px solid red;
        }

        th,
        tr,
        td {
      
      
            width: 100px;
            height: 50px;
            border: 1px solid pink;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 定义表格 -->
    <table>
        <!-- 表格里面的一行 -->
        <tr>
            <!-- 表示单元格 -->
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>18岁</td>
            <td>456</td>
        </tr>

    </table>

    <!-- 
         table  定义表格标签
         caption: 定义表格标题
         tbody: 表格内容  不写也会自动生成
         th:表头标签
         tr:表格一行   
         td:表示表格里一个单元格   必须嵌套在 tr中标签

        thead：代表表格头部
        tbody: 表格内容  不写也会自动生成
        tfoot：代表表格尾部
            
        
     -->

    <table>
        <!-- 定义这个表格标题 -->
        <caption>老师调查表</caption>
        <tr>
            <!-- 表头 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>性别</th>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>小春</td>
            <td>18岁</td>
            <td>写代码</td>
            <td>男</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>无限</td>
            <td>19岁</td>
            <td>喜欢漂亮小姐姐</td>
            <td>男</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>夏栀老师</td>
            <td>19岁</td>
            <td>爱吃小龙虾 螃蟹</td>
            <td>女</td>
        </tr>
    </table>

Rendering: table

merge cells:
merge cells
formula: number of merged cells - 1 = number of deleted cells

  rowspan: 跨行合并   合并顺序是从上往下  合并的
  
  colspan: 跨列合并  先左后右

<style>
        table{
      
      
            width: 900px;
            border: 1px solid red;
            margin: 30px auto;
            /* 表格  单边框样式 */
            border-collapse: collapse;
        }
        tr,td,th{
      
      
            width: 350px;
            height: 60px;
            border: 1px solid #096;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 合并单元格  难点 -->
    <table >
        <!-- 表格标题 -->
        <caption>征婚表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>征婚条件</th>
        </tr>
        <tr>
            <td>黄黄</td>
            <td>男</td>
            <td rowspan="3">21岁</td>
            <!-- 这是跨行合并， 此处td rowspan="3"，后面删除两个第三列的td即可-->
            <td>21岁-29岁 特征:美女</td>
        </tr>
        <tr>
            <td>文文</td>
            <td rowspan="2">女</td>
            <!-- <td>21岁</td> -->
            <td>22岁-28岁 特征:有钱</td>
        </tr>
        <tr>
            <td>水水</td>
            <!-- <td>女</td> -->
            <!-- <td>21岁</td> -->
            <td>22岁-28岁 特征:有钱</td>
        </tr>
        <tr>
            <td>西西</td>
            <td>男</td>
            <td>22岁</td>
            <td>21岁-30岁 特征:有钱 美女</td>
        </tr>
        <tr>
            <td>南南</td>
            <td>男</td>
            <td>22岁</td>
            <td>21岁-30岁 特征:有钱 美女 黑丝</td>
        </tr>

        <tr>
            <!-- 这是跨列合并， 此处td colspan="4"，后面删除本行里的3个td即可-->
            <td colspan="4">都喜欢漂亮的小姐姐</td>
            <!-- <td>都喜欢漂亮的小姐姐</td>
            <td>都喜欢漂亮的小姐姐</td>
            <td>都喜欢漂亮的小姐姐</td> -->
        </tr>
    </table>
    <!-- 
       合并单元格   
         公式:  合并单元格个数(2) - 1 = 删除个数 2

      rowspan: 跨行合并   合并顺序是从上往下  合并的
      
      colspan: 跨列合并  先左后右-->

Rendering:

Summarize

The above is the form form compiled by the editor for everyone, as well as some types of input input form controls. It also adds drop-down menus and multi-line text input boxes. Finally, it also talks about tables, table cell merging, etc. combined with related cases. A more detailed explanation. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.