表格、表单-优快云博客

本文链接：https://blog.youkuaiyun.com/BigCherryss/article/details/126706227

本文详细介绍了HTML中的表格元素，包括基本语法、属性及其用途，如width、height、align、border等。此外，还讲解了如何创建1px细线表格。接着，文章深入探讨了HTML表单，包括表单属性如action、method和target，以及各种表单控件如文本框、密码框、单选框、复选框、文件域、提交和重置按钮、图像域和下拉列表。最后，提到了HTML5新增的表单控件，如placeholder、tel、url、email、number、date等。

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

表格、表单

表格基本语法结构

<table>
	<tr>
		<th></th>
		......
	</tr>
	<tr>
		<td></td>
		......
	</tr>
</table>

表格的标签及属性

什么是表格？

用来表示网页中的数据

为什么会有表格？

<table>的本义应当用作数据列表的地方，对于一些数据处理用<table>显得更加有序和语义。

如何使用table标签以及相关属性？

table属性
Width、height 宽高（单位是像素或百分比）
align | 对齐
border 外边框
bgcolor 背景色
background 背景图片
cellspacing 单元格间距
cellpadding 单元格边距（表格边框与内容的间距）
tr属性：
Align 水平对齐
left/center/ right
valign 垂直对齐
Top/middle/bottom
bgcolor 背景色
td的基本属性
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan=“2” 水平合并
rowspan 垂直合并
表头th标签

….….….

<th>是特殊的单元格，文字会自动加粗、居中。它的用法是取代<td>的位置即可

<table border="1" width="300">
	<tr>
		<th>餐饮类型</th>
		<th>主要菜系</th>
		<th>价格</th>
	</tr>
	<tr>
		<td>中餐厅</td>
		<td>生猛海鲜</td>
		<td>1000元</td>
	</tr>
</table>

餐饮类型	主要菜系	价格
中餐厅	生猛海鲜	1000元

表格主体tbody标签
Thead 表格页眉
Tbody 表格主体
Tfoot 表格页脚
以上三个标签结合使用，可将表格中的一行或几行合成一组
（Tbody在表格中可以出现多次，thead和 tfoot只能出现一次）

<table>
	<thead><tr></tr>….</thead>
	<tbody><tr></tr>….</tbody>
	<tfoot><tr></tr>…. </tfoot>
</table>

如何制作1px细线表格?

将表格的边框border的值改成0，同时将单元格之间的间距cellspacing的值改成1

<table border="0" cellspacing="1">
		<tr>
			<td></td>
			...
		</tr>
	</table>

表单

表单属性

什么是表单？
表单在网页中主要负责数据采集功能，表单的标记是:
为什么会有表单？
表单用于提交数据，和后台程序相连接，把前面的一些数据提交到数据库
如何使用表单？
- action属性：设置表单的提交地
- method属性：设置表单的提交方法，属性值为get、post
- target属性：设置表单的打开方式，属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank在新窗口打开
- Name 名字
输入标记
表单元素中输入标签是,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中）

HTML常用表单控件

文本框
文本框：主要用于输入单行文本内容。代码如下:
姓名：<input type="text" />
效果如下：
密码框
密码框：主要用于输入一些保密信息，代码格式如下：
密码：<input type="password"/>
效果如下：
单选框
单选框主要是让网页浏览者在一组选项里选择一个。Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称。代码格式如下：
性别：

<input type="radio" name="sex"  checked="checked" />男 
<input type="radio" name="sex"  />女

复选框
复选框主要是让网页浏览者在一组选项里同时选择多个选项。checked=”checked” 默认选中代码格式如下：
爱好：读书<input type="checkbox" />
听歌<input type="checkbox" checked="checked"/>
阅读<input type="checkbox" />
效果如下：

文件域
文件域主要是让网页浏览者上传文件。代码格式如下
上传文件：<input type="file"/>
效果：
提交按钮
提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字，代码格式如下：
<input type="submit" value="提交" />
重置按钮
重置按钮用来重置表单中输入的信息。代码格式如下：
<input type="reset"value="重置"/>
图片域
图像域标记代码格式如下:
<input type=”image” src=”图片的路径” />
下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。代码格式如下：

<select>
<option selected></option>
<option></option>
     …
</select>

文本域标记及属性
文本域主要用于输入较长的文本信息。代码格式如下：
<textarea cols="30" rows="5">默认文字</textarea>
效果：
Cols属性：定义文本域的宽度列
rows属性：定义文本域的高度行

HTML5新增表单控件

HTML5文本框及placeholder属性
当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。代码格式：
<input type="text" placeholder="请输入账号"/>
效果：
HTML5文本框类型tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码还包括其他字符（如+ 、-、(、)等），如86-0536-8888888 代码格式：
电话号码：<input type="tel"/>
效果:
HTML5文本框类型url
url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．代码如下
<input type="url"/>
<input type="submit" value="提交">
效果：
HTML5文本框类型emali
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．代码如下：

效果：
HTML5文本框类型number max min step
Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。代码如下：
<input type="number"/>
<input type="submit" value="提交">
效果：
HTML5文本框类型date
Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示,代码如下
<input type="date"/>
<input type="submit" value="提交">
效果：