HTML表单与表格详解-CSDN博客

本文链接：https://blog.csdn.net/JAVAWEB_/article/details/107550640

表格标签

表格是用来展示数据的

<table>
	<tr>//行标签
		<th>表头（默认加粗居中）</th>
		...
	</tr>
	<tr>
		<td>单元格里面的文字</td>//数据标签
		...
	</tr>
	...
</table>

表格的属性

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或""	表格是否拥有边框
cellpadding	像素值	单元边沿与其内容之间的空白，默认为1px
cellspacing	像素值	单元格之间的空白，默认为2px
width	像素或者百分比	表格的宽度

案例：
在这里插入图片描述

表格结构标签

<tabel>
	<thead>//头部分
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>//主体部分
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

合并单元格

跨行合并:rowspan="合并单元格的个数"
跨列合并:colsapn="合并单元格的个数"

列表

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能放li 没有顺序，使用较多 li里面可以包含任何标签
`<ol></ol>`	有序标签	里面只能放li 有顺序，使用相对少 li里面可以包含任何标签
`<dl></dl>`	自定义标签	里面只能包含dt和dd ，dt和dd里面可以放任何标签

表单标签

通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成
表单域
<form>会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

<input>表彰元素

<input type="属性值"/>

type属性值：

属性值	描述
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
checkbox	定义复选框
image	定义图像形式的提交按钮
file	定义输入字段和"浏览" 按钮，供文件上传
button	可点击按钮(多数情况下，用于通过JavaScript启动脚本)
submit	提交按钮，会把表单数据发送到服务器
reset	重置按钮，清除表单中的所有数据
hidden	字义隐藏的输入字段

其他属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定Input元素的值
checked	checked	规定此input元素首次加载里应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name属性和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选框要有相同的name值
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上增加用户体验

<label for="sax">男</label>
<input type="radio" name="sax" id="sax"/>

<select>下拉列表标签
语法：

<select>
	<option>选项一</option>
	<option  selected="selected">选项二</option>//默认选中
	<option>选项三</option>
</select>

<textarea>文本域标签

<textarea rows="每行中的字符数" cols="显示的行数">
	文本内容
</textarea>

注册页面案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table cellpadding="10">
			<tr>
				<th colspan="2">青春不常在，抓紧谈恋爱</th>
			</tr>
			<tr>
				<td>性别</td>
				<td>
					<input type="radio" name="sax" id="rad1"/><label for="rad1">男</label>
					<input type="radio" name="sax" id="rad2"/><label for="rad2">女</label>
				</td>
			</tr>
			<tr>
				<td>生日</td>
				<td>
					<select>
						<option>--请选择年--</option>
						<option>1999</option>
						<option>1998</option>
						<option>1997</option>
					</select>
					<select>
						<option>--请选择月--</option>
						<option>01</option>
						<option>02</option>
						<option>03</option>
					</select>
					<select>
						<option>--请选择日--</option>
						<option>22</option>
						<option>23</option>
						<option>24</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>婚姻状况</td>
				<td>
					<input type="radio" name="hy" />未婚
					<input type="radio" name="hy" />已婚
					<input type="radio" name="hy" />离婚
				</td>
			</tr>
			<tr>
				<td>学历</td>
				<td>
					<input type="text" value="幼儿园"/>
				</td>
			</tr>
			<tr>
				<td>喜欢的类型</td>
				<td>
					<input type="checkbox" name="ype"/>妩媚的
					<input type="checkbox" name="ype"/>可爱的
					<input type="checkbox" name="ype"/>小鲜肉
					<input type="checkbox" name="ype"/>都喜欢
				</td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td>
					<textarea>
						自我介绍
					</textarea>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="免费注册"/></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="checkbox" name="ty" />我同意注册条款和会员加入标准</td>
			</tr>
			<tr>
				<td></td>
				<td><a href="#">我是会员，立即登录</a></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<h3>我承诺</h3>
					<ul>
						<li>年满18岁</li>
						<li>抱着严肃的态度</li>
						<li>真诚寻找另一半</li>
					</ul>
				</td>
			</tr>
			
		</table>
	</body>
</html>