HTML表单与表格实战-CSDN博客

本文链接：https://blog.csdn.net/m0_72975897/article/details/126518485

文章目录

前言
一、表格的定义
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

今天学习了新知识，用HTML写表单表格，一起来看看吧！

提示：以下是本篇文章正文内容，下面案例可供参考

一、表格

表格由table定义，

tr：行；td：单元格；th:表头，用法和td相同，不同的是它有默认样式

caption：表格标题，有默认样式

table内设置

cellspacing：设置单元格之间的距离

cellpadding：设置内容与边框之间的距离

表格边框合并

border-spacing：0px；设置表格为单边框
border-collapse:collapse；设置表格边框合并，若和border-spacing一起使用，则border-spacing无效

单元格设置

rowspan：设置纵向的合并单元格

colspan：设置行向的合并单元格

注意：在设置合并单元格时，注意要删除要被合并的单元格

vertical-align：top/middle/bottom;设置单元格内容的垂直排列方向

表格结构，与书写位置无关

thead：头部

tbody：主体

tfoot：底部

二、使用步骤

-- 创建表单关键字：form
action:表单信息提交的地址
method:表单提交的方式；
可选值：post：将表单数据包含在表单体发送：更安全，所以常用与敏感数据的传送
get：将表单数据随着action提交的路径以？相隔的形式传输，不安全
autocomplete:设置表单内容是否可以自动填充
可选值：
on：默认值；可以自动填充
off：取消自动填充;
自动填充的前提条件：input要有name属性
target：设置跳转页面在哪个页面显示
可选值：_blank:在新页面展示
_self:默认值，在原先页面显示
_parent\_top?今天二选一总结一下效果
novalidate：设置表单不自动验证信息格式是否正确
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <div>


        <form action="./form1.html" method="post" autocomplete="on">

            姓名：<input type="text"  name="" id="" placeholder="请输入中文姓名" minlength="3" maxlength="8"><br>
            密码：<input type="password" required><br>
            喜好:<input type="checkbox">读书
            <input type="checkbox">睡觉
            <input type="checkbox">上课<br>
            日期：<input type="date" name="" id="" value="1988-02-03"><br>
            颜色：<input type="color" name="" id=""><br>
            邮箱:<input type="email">
            <!-- 注意：单选框要有name属性，且属性值相同 
            label:为了提高用户的体验效果，通过for来选择要作用的标签；for值=作用标签的id值-->
            性别：<label for="nan"><input type="radio" name="sex" id="nan">男</label>
            <input type="radio" name="sex" checked>女<br>
            <input type="file" multiple><br>
            <!-- <input type="button">这是button按钮
    <input type="reset">重置
    <input type="submit">提交 -->
    <!-- 下拉框：select 里面的选项是通过option来设置的-->
<select name="" id="">
<option value="">英语</option>
<option value="">数学</option>
<option value="语文">语文</option>
</select><br>
<!-- textarea:设置文本域；cols设置一行有多少列，rows：设置多少行 -->
<!-- <textarea name="" id="" cols="10" rows="30">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, consectetur perspiciatis repellendus quaerat consequuntur modi omnis ullam totam impedit doloribus inventore voluptate enim quisquam quo cumque, ut laborum dolores. Cumque, expedita sunt ipsa quis dolor explicabo cum molestias incidunt facilis porro sequi saepe natus aspernatur nobis odio vel eligendi iure.
</textarea> -->
            <button type="submit">提交</button>

<input list="data" name="data">
            <datalist id="data">
                <option value="语文"></option>
                <option value="数学"></option>
            </datalist>
        </form>
    </div>
</body>

</html>

2.用HTML写表格

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--设置标题 -->
		<h2>流量调查表</h2>
		<!-- 设置盒子边框 -->
		<table border="2">
			<tr>
				<td>总页面流量</td>
				<td>共计来访</td>
				<td>会员</td>
				<td>游客</td>
			</tr>
			<tr>
				<td>9756488</td>
				<td>97656</td>
				<td>7538087</td>
				<td>43364677</td>
			</tr>
			<tr>
				<td>46776686</td>
				<td>85544</td>
				<td>69357</td>
				<td>568787</td>
			</tr>
			<tr>
				<td>7538087</td>
				<td>546774</td>
				<td>476897</td>
				<td>334545</td>
			</tr>
			<tr>
				<td>平均每人浏览</td>
				<!-- 合并元素,删除被合并的单元格 -->
				<td colspan="3">85544</td>

			</tr>
		</table>
	</body>
</html>