HTML表格及应用、表单域（5）

一、表格标签
一些简单的表格由table元素，一个或者多个tr,th,td组成。

<table>标签定义HTML表格。
<tr>标签定义表格行
<th>标签定义表头
<td>标签定义表格单元
 

<table border="1" style="width:400px">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>22</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>24</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <td>20</td>
        </tr>
    </table>
一些复杂的表格包括thead,tbody,tfoot元素

<thead>标签定义表格的表头内容。

<tbody>标签表格主体（正文）该标签用于对HTML表格中的主体内容进行分组。

<tfoot>标签定义表格的页脚（脚注或表注）该标签用于对HTML表格中的表注（页脚）内容进行分组。

二、边框、单元格间距、合并单元格

边框

<table border="1">

可以给表格以及表格中的单元格设置1像素的边框，数值变大只有table的边框变粗，单元格边框不变。

单元格间距

<table style="border-collpase:collapse;">

可以消除单元格之间的间距和多余边框

合并单元格

rowspan 属性规定单元格可纵跨的行数。例如：<td rowspan="2">该单元格占两行一列</td>
colspan属性规定单元格可横跨的列数。 例如：<td colspan="2">该单元格占一行两列</td>

三、表单域
<form>标签用于为用户输入创建HTML表单域。

表单域能够包含input元素，比如文本字段、复选框、单选框提交按钮等等。表单用于收集用户信息和向服务器传输数据。

action :该属性规定当提交表单时向何处发送表单数据。（规定表单的地址）

method :该属性规定用于发送form-data的HTTP方法。（表单的提交方式）

get和post的区别:

get的方式是把数据在地址栏中明文的形式发送

post则不是，而且post可以传递的数据比get多

注意！表单元素都是行内块级  form行内块级！

常见表单元素
input    根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框掩码后的文本控件、单选按钮、按钮等等。text、password、radio、 checkbox. file、 submit、image、 reset、 button、hidden
select    select元素可创建单选或多选菜单（下拉列表）。<select>元素中的<option>标签用于定义列表中的可用选项。multiple属性规定下拉列表可以多选。
textarea    <textarea>标签定义多行的文本输入控件。可以通过cols和rows属性来规定textarea 的尺寸,不过更好的办法是使用CSS的height和width属性。
label    <label>标签为表单元素定义标注
input
type    input元素
text    文本框
submit    提交按钮
password    密码框（掩码的形式）
radio    单选按钮（name=“sex”要一致否则变成了多选）
checkbox    复选框
file    文件域
image    图片提交按钮
reset    重置按钮
button    普通按钮
hidden    隐藏域
四、表单元素常用属性
表单元素常用属性
name属性    
在一个表单域中,每一个表单元素(除了按钮)必须包含一个name属性，否则该表单元素的数据无法正确提交。
value属性    用户选择的项需要设置value值(单选按钮、复选框、下拉列表项) ,输入框的value值就是用户输入的内容,可以通过设置输入框的value值来给表单元素
disabled = "disabled"    禁用表单元素
checked=”checked"    设置单选按钮、复选框的默认选中项
selected =”selected”    设置下拉表的默认选中项

————————————————
版权声明：本文为CSDN博主「sunnyaha12」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sunnyaha12/article/details/107442292