表单、表格常用属性大全

html零基础必看——html入门，编程就是如此简单

第十二章：表单、表格标签

一、form表单
二、select下拉菜单
三、textarea 多行输入文本框
四、表格
总结

一、form表单

表单主要是为了用户的信息，采集数据，将用户输入的信息发送到服务器，然后返回给登录接口。

1.1 form表单标签

用来标记一个表单，存储表单数据
语法格式：
<form action="" method="" name="" target="">表单内容</form>

form表单标签的一些属性：

form 表单域

action: 表示提交地址

name:表单名称

target: 提交完表单之后新页面在哪里打开。前面a链接里有讲到

1.2 input 输入表单控件标签

input是行内元素，因此可以在一行显示。同时，input又是置换元素，因此支持宽高属性。（在前面第五章中：二、行内元素有讲到，img、input都是行内元素，又是置换元素）

格式：<input type="输入控件类型" >

input 输入表单控件的一些属性：

placeholder: 提示你要输入什么内容

value: 表示控件里面默认输入的内容

disabled: 禁止选中你选择内容

checked: 用在单选和多选身上表示默认勾选

1.2.1 text文本框

格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">

name：文本框的名字，可以重复

id：也是文本框的名字，不可以重复

placeholder ：提示你要输入什么内容

value: 表示控件里面默认输入的内容

size:文本框的宽度

maxlength：文本框最大输入字符数

minlength：文本框最小输入字符数

1.2.2 password密码框

格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
密码框和文本框属性、格式和文本框一样，只是密码框输入的内容会被小黑点代替

1.2.3 radio单选框

格式：<input type="radio" name="" checked vaule><label for="">单选项的名称</label>

name：单选框的名字。注意：同一组单选框里面的每一组单选项的name名字必须一致

checked：表示默认勾选该项选择的内容

disabled: 禁止选中该项选择的内容

vaule：单选框的预设值（向服务器提交数据时传递的值）

<label></label>标签：辅助input标签进行选择

1.2.4 checkbox多选框

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

name：单选框的名字。注意：同一组复选框里面的每一组单选项的name名字必须一致

checked：表示默认勾选该项选择的内容

disabled: 禁止选中该项选择的内容

vaule：复选框的预设值（向服务器提交数据时传递的值）

<label></label>标签：辅助input标签进行选择

<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 普通按钮提交按钮重置按钮

botton：普通按钮（普通按钮可以通过js绑定脚本程序，完成一些操作，后要结合后面的js）结合js如：<input type="button" value="给关闭" oncClick="WinClose()">
submit：提交按钮，可以激发表单提交的动作（结合后面js，如一些注册、登录功能的实现）
reset：重置按钮，可以将表单恢复到初始的页面

这三种按钮都可以通过value属性指定按钮上显示的文字内容

1.2.6 image 图像提交按钮

格式：<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>

效果图：
在这里插入图片描述

1.2.7 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>

效果图：
在这里插入图片描述

2 `：focus`表单获得焦点时被选中

鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示。
只限于表单标签使用才会生效。

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

格式：

选择器：focus {/写样式/}

<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="请输入账号">

效果图：鼠标点击输入控件框时，这个控件框颜色会变成样式里面自己更改的颜色。
在这里插入图片描述

二、select下拉菜单

select是一个容器元素，标记一个菜单或下拉列表。它所包含的option元素标记一个菜单或下拉列表中的每一项。
当select使用multiple属性时，用户可以同时选择列表中的多项内容
option标记的selected属性指定该项被选取，默认是第一项被选取
option标记的disabled属性指定该项不可用

<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>

效果图：
在这里插入图片描述

三、textarea 多行输入文本框

一般用于网页底部留言之类的多行输入文本框
格式：<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

textarea:伸缩文本框元素

cols: 每一行中字符数量

rows: 显示行数

placeholder: 提示你要输入什么内容

readonly：设定多行文本区只读，不能编辑和修改

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

效果图：鼠标点击右下角可以伸缩文本框大小
在这里插入图片描述

四、表格

table：表格标签，table标记代表一个表格

tr：行有多少个tr，就有多少行

td ：单元格，一行里有多个td单元格构成

th：表头一般用于表格的第一行或第一列

caption ：表格标题

<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>

效果图：
在这里插入图片描述
表格合并单元格：
合并单元格
公式: 合并单元格个数 - 1 = 删除个数

  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: 跨列合并  先左后右-->

效果图：
在这里插入图片描述

总结

上述是小编为大家整理的form表单，以及input输入表单控件的一些类型、同时也补充了下拉菜单、多行文本输入框，最后还讲到表格、表格的单元格合并等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。