html&css系列学习——（三）html表格和表单的学习

最新推荐文章于 2025-04-26 19:08:18 发布

浅浅云烟

最新推荐文章于 2025-04-26 19:08:18 发布

阅读量142

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/qianqianyunyan/article/details/125879971

版权

html&css系列学习——（三）html表格和表单的学习

今日份学习计划：

✔html中的表格

✔html中的表单

首先，我们来了解一下表格和表单的相关知识！

表格Table

#表格格式

<!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>表格Table</title>
</head>
<body>
   <table>
  <caption>表格的标题</caption>
  <thead>
      <tr>
          <th>每一列的标题</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>数据</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td>数据</td>
      </tr>
  </tfoot>
</table>
</body>
</html>

#表格属性

1.border：边框设置，默认为0；
2.align：设置水平对齐（left center right）；
3.valign：设置垂直对齐（top mid bottom）；
4.width/height：设置宽、高；
5.cellspacing：边框外边距，默认为2px；
6.cellpadding：边框内边距，默认为1；

#细线表格

table    bgcolor='black' cellspacing='1'
tr       bgcolor='white'

#合并单元格

colspan 跨列合并 
rowspan 跨行合并

表单From

<!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>表单From</title>
</head>
<body>
	<!-- 表单元素 -->
	<!-- action提交表单的服务器 -->
	<form action="xxx">
		<!-- 单选框 单选按钮 复选框 -->
		<!-- 明文输入框  value就是默认值-->
		<!-- readonly 只读 disbaled禁用 -->
		<!-- label作用:使文字和输入框关联 聚焦输入框 -->
		<label for="one">账号：</label>
		<input readonly type="text" name="account" value="admin" id="one" ><br>
		<!-- 暗文输入框 加上disabled后禁用 -->
		密码：<input  type="password" name="pwd" ><br>
		<!-- 单选按钮 -->
		人物:
		商场负责人：<input type="radio" name="role" value="admin">
		顾客：<input type="radio" name="role" value="customer">
		商场员工：<input type="radio" name="role" value="employee"><br>
		<!-- 复选框 默认选中checked-->
		爱好:
		买买买：<input checked type="checkbox" name="hobbies" value="sing">
		ktv拼歌：<input type="checkbox" name="hobbies" value="dance">
		幸运大转盘：<input type="checkbox" name="hobbies" value="rap"> <br>
		<!-- 下拉框 在optgroup中加入disabled,禁用下拉选项 -->
		所属城市：<select name="city">
			<optgroup label="一线城市" >
				<option value="shanghai">上海</option>
				<option value="beijing" >北京</option>
				<!-- selected默认选中 -->
				<option value="liuzhou" selected>柳州</option>
			</optgroup>
		</select>
<br>
		<!-- 附件上传表单元素 -->
		<input type="file" name="file">
		<!-- 普通按钮 配合js做一些动作-->
		<input type="button" value="按钮×1">
		<!-- 图片按钮 -->
		<!-- <input type="image" src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg" alt=""> -->
		<!-- 隐藏域 如果你希望悄悄地往服务器提交一些数据-->
		<input type="hidden" name="token" value="xadfhsdkfhkajhd">
		<!-- 重置按钮 将用户在表单中所选重置 -->
		<!-- 重置作用：清空表单用户所选 -->
		<input type="reset" value="重置">
		<!-- 提交按钮 -->
		<input type="submit" value="提交">
		<!-- json格式字符串 -->
		<!-- {
			"username":"admin"
		} -->
		<!--查询字符串 -->
		<!-- a=1&b='zhangsan'&c=... -->
	</form>
</body>
</html>

#表单属性

1.输入框 type='text'/password/radio(name必须一样) 
2.复选框 checkbox  
3.普通按钮 button
4.图像按钮 image
5.提交按钮 submit
6.重置按钮 reset
7.隐藏域 hidden
8.多行输入框 textarea
9.内容分组 filedset （类似于div加边框，legend为上边框加入标题）
例如：<fieldset>
		<legend>请登录</legend>
		账号: <input type="text"><br>
		密码: <input type="password">
		<input type="submit" value="提交">
	</fieldset>

#h5新增表单

1.邮箱 email
2.域名 url
3.日期 date
4.颜色 color
5.数字 number
6.电话 tel  h5新增表单属性：pattern
7.时间日期 dataTime-local
8.进度条 progress
9.滑块 range

<!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>h5新增表单</title>
</head>
<body>
	<!-- datalist 给输入框绑定待选项 
		list属性设置给input输入框
		给datalist标签设置id属性=list属性值
	-->
	<form action="xxx">
		<input type="text" list="input_ref">
		<datalist id="input_ref">
			<option >周一</option>
			<option >周二</option>
			<option >周三</option>
			<option >周四</option>
			<option >周五</option>
			<option >周六</option>
			<option >周日</option>
		</datalist>
		<!-- 进度条 --><br>
		<progress value="70" max="100"></progress>
		<!-- 滑块 --><br>
		<input type="range" value="80" step="20" max="100" min="0">
		<!-- 邮箱 --><br>
		<input type="email" >
		<!-- 电话 利用正则表达式 pattern--><br>
		<input type="tel" pattern="1[0-9]{10}">
		<!-- 数字 --><br>
		<input type="number" >
		<!-- 域名 --><br>
		<input type="url" >
		<!-- 时间日期 --><br>
		<input type="datetime-local" >
		<!-- 日期 --><br>
		<input type="date" >
		<!-- 颜色 --><br>
		<input type="color" >
		<!-- 提交按钮 --><br>
		<input type="submit" value="提交">
		<!-- 其他h5新特性 --><br>
		<mark>高亮效果</mark>
		<cite>倾斜效果</cite>
        <!-- 导入函数 -->
		<pre>
			<code>var a=1;</code>
		</pre>
		<strike>删除线</strike>
	</form>
</body>
</html>