HTML-form表单和table表格_html提交整个table数据-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73595197/article/details/129781990

本文介绍了HTML中的表单元素，包括form标签的属性如name、id、action、method和enctype，以及input标签的不同类型如text、password、email、date等。同时讲解了单选按钮（radio）和多选按钮（checkbox）的使用，以及textarea和select标签的应用。最后，文章涵盖了文件上传功能的实现以及表格元素，如table、tr、td、th等的属性和作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1表单

1.1form标签

form标签是用于指定表单数据的提交方式和地址，它有以下几个属性：

name：用于指定表单的名称，方便后续提交使用

id：表单的唯一名称，一般用于提交或样式设置

action：用于定义表单数据的提交地址

method：用于指定表单数据的提交方式

enctype：用于指定表单提交的数据类型

<form name="表单名称" method="表单提交方式" action="处理表单的文件" method="get"></form>

1.2文本输入框

文本输入框是使用input标签来指定，根据它的type属性来指定是什么样的类型的输入框，它有以下几个属性：

name：用于表单提交是把数据提交到后端

id：给这个输入框一个唯一值，一般是用于JavaScript来获取它时所使用

value：它代表是这个输入框所输入的值

size：用于指定这个输入框的长度，不推荐使用，后续会用CSS来控制

maxlength：用于指定这个输入框所能输入值的最大的长度

placeholder：用于指定在输入框中没有值是的提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <title>form表单标签</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<p><input type="text" name="username" value="" placeholder="请输入用户名" size="20" maxlength="5"></p>
<p><input type="password" name="password" placeholder="请输入密码"></p>
<p><input type="email" name="email" placeholder="请输入邮箱地址"></p>
<p><input type="date" name="date" placeholder="请输入日期"></p>
<p><input type="time" name="time" placeholder="请输入时间"></p>
<p><input type="tel" name="phone" placeholder="请输入手机号"></p>
<p><input type="number" name="age" placeholder="请输入年龄"></p>
    </form>
</body>
</html>

1.3单选框

单选框也是使用input标签，但它的type属性的值为radio，它一般用于多个值中只能选择一个值况，它有以下几个属性：

name：给这个单选框指定一个组名，也是数据提交后后端能够获取数据的值，多个单选框如果name属性相同才会是同一个组。

value：单选框的值

checked：它是一个布尔值（真和假），如果值为值（true）即选中，值为假（false）则未选中，没有给值的情况下默认的是true

<!DOCTYPE html>
<html lang="en">
<head>
    <title>form表单标签</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<input type="radio" name="gander" value="男" checked>男
<input type="radio" name="gander" value="女">女
    </form>
</body>
</html>

1.4多选框

多选框也是使用input标签，但它的type属性的值为checkbox，一般用于多个选择的情况，它有以下几个属性：

name：给这个单选框指定一个组名，也是数据提交后后端能够获取数据的值，多个单选框如果name属性相同才会是同一个组。

value：单选框的值

checked：它是一个布尔值（真和假），如果值为值（true）即选中，值为假（false）则未选中，没有给值的情况下默认的是true

<!DOCTYPE html>
<html lang="en">
<head>
    <title>form表单标签</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<p>
<input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="游戏" checked>游戏
<input type="checkbox" name="hobby" value="电影">电影
</p>
    </form>
</body>
</html>

1.5文本输入域

文本输入域是用于输入长文本的内容，使textarea标签，它有以下几个属性：

name：用于获取文本域的值

rows：指定文本域的高度（行数）

cols：指定文本域的宽度（列数）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>form表单标签</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<p>
<textarea name="intro" rows="10" cols="40" placeholder="请输入文本"></textarea>
</p>
    </form>
</body>
</html>

1.6下拉列表

下拉列表是用于选择使用的，它可以是单选的，也可以是多选的。使用select标签来指定，它有以下几个属性：

name：用于获取下拉框的值

multiple：指定是否可以多选

size：用于指定可看选项个数

子标签是option，用于指定下拉选项，它的value属性用于指定这个选项的值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>form表单标签</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<p>
    <select  name="province" multiple size="2">
        <option value="重庆">重庆</option>
        <option value="上海">上海</option>
        <option value="北京">北京</option>
        <option value="深圳">深圳</option>
    </select>
</p>
    </form>
</body>
</html>

1.7文件上传

文件上传还是使用input标签，但它的type属性为file，常用的属性也是name。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>form表单标签</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<p>
    <input type="file" name="f">
</p>
    </form>
</body>
</html>

2表格

表格标签用于数据展示的，它涉及到table、tr、td、th等子标签。

2.1table标签

width：用于指定表格的宽度，单位是像素

border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗

cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离

cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离

align：用于定义表格的对齐方式

2.2table的子标签

2.2.1caption标签

用于定义表格的标题

2.2.2thead标签

用于定义表头部分

2.2.3tbody标签

用于定义表体部分

2.2.4tfoot标签

用于定义表尾部分

2.2.5tr标签

用于定义表格的一行

2.2.6td标签

用于定义一个单元格

colspan：用于定义跨列操作，也就是合并多个列

rowspan：用于定义跨行操作，也就是合并多个行

2.2.7th标签

用于定义一个单元格，它的特点是内容加粗且居中显示

下面是table表格的代码及展示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <title>表格</title>
</head>
<body>
    <table width="500" border="1" cellpadding="10" cellpadding="1" cellspacing="0" align="center">
        <caption>这是表格标题</caption>
        <tr>
            <th>居中加粗</th>
            <td width="200">表格宽度</td>
            <td align="center" >居中</td>
        </tr>
        <tr>
            <td rowspan="2">合并两行</td>
            <td>刘备</td>
            <td>13</td>
        </tr>
        <tr align="center">
            <td>整行居中</td>
            <td>整行居中</td>
        </tr>
        <tr>
            <td colspan="2">合并两列</td>
            <td>别看我，就是凑数的</td>
        </tr>
    </table>
</body>
</html>