一、form标签
- form标签是用于指定表单数据的提交方式和地址。它有以下几个属性:
- name:用于指定表单的名称,方便后续提交使用
- id:表单的唯一名称,一般用于提交或样式设置
- action:用于定义表单数据的提交地址
- method:用于指定表单数据的提交方式,有以下几个常用值
- get:以get方式进行提交,所提交的数据会在浏览器地址栏中显示,这种提交方式所提交的数 据不能超过4K大小
- post:以post方式进行提交,这种提交方式会把数据放到请求头中,而不会在浏览器地址栏 中显示,理论上这种方式提交没有大小的限制
- put:用于修改数据,这种方式是 RestFul 风格的,后续在某些项目中会用到,一般现在可以 不用考虑
- delete:用于删除数据,这种方式是 RestFul 风格的,后续在某些项目中会用到,一般现在可 以不用考虑
- enctype:用于指定表单提交的数据类型,有以下两个值:
- multipart/form-data:以二进制流的方式进行提交,一般用于文件上传
- application/x-www-form-urlencoded:以文本的方式进行提交,常用方式,默认值
二、table表格
表格标签用于数据展示的,它涉及到 table、tr、td、th等子标签。 要定义一个表格,我们需要使用 table 标签,如果要定义一行,我们还需要使用 tr 子标签, 要在一行中定义单元格,就需要使用到 td 子标签。
table标签有以下几种属性:
- width:用于指定表格的宽度,单位是像素
- border:用于定义表格的边框,值的类型是数字,而是一个正数,值越大边框越粗
- cellpadding:用于定义单元格的内边距,即单元格中的内容也单元格的边之间的距离
- cellspecing:用于定义单元格的外边距,即单元格与单元格之间的距离
- align:用于定义表格的对齐方式
table还在以下几个子标签:
- caption:用于定义表格的标题
- thead:用于定义表头部分
- tbody:用于定义表体部分
- tfoot:用于定义表尾部分
- tr:用于定义表格的一行
- th:用于定义一个单元格,它的特点是内容加粗且居中显示
td:用于定义一个单元格 td 标签有几个属性需要说明:
- colspan:用于定义跨列操作,也就是合并多个列
- rowspan:用于定义跨行操作,也就是合并多个行
列如:
<!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 align="center">
<h3>用户注册</h3>
<table align="center">
<tr>
<td align="right">用户名</td>
<td align="left"><input type="text" name="username"></td>
</tr>
<tr>
<td align="right">密码</td>
<td align="left"><input type="text" name="password"></td>
</tr>
<td align="right">请选择您的性别</td>
<td align="left"><input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女</td>
<tr>
<td align="right">请选择您的爱好</td>
<td align="left"><input type="checkbox" name="hobby" value="唱歌">唱歌
<input type="checkbox" name="hobby" value="跳舞">跳舞
<input type="checkbox" name="hobby" value="说唱">说唱
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="bobby" value="音乐">音乐</td>
</tr>
<tr>
<td align="right">邮箱</td>
<td align="left"><input type="text" name="e-mali"></td>
</tr>
<tr>
<td align="right">用户头像</td>
<td align="left"><input type="file" name="head"></td>
</tr>
<tr>
<td align="right">您的家庭住址是</td>
<td align="left"><select name="province" multiple size="1">
<option value="西安">西安</option>
<option value="长安">长安</option>
<option value="安徽">安徽</option><select></td>
</tr>
<tr>
<td align="right">您的收货地址是</td>
<td align="left"><select name="province" multiple size="3" maxlength="9">
<option value="">请选择您的地址</option>
<option value="永川">永川</option>
<option value="江北">江北</option>
<option value="万州">万州</option>
</select></td>
</tr>
<tr>
<td align="right">请留下您的建议或者意见</td>
<td align="left"><textarea name="intro" rows="10" cols="30"></textarea></td>
</tr>
<tr>
<td align="right">请选择您喜欢的颜色</td>
<td><input type="color">
注册的时间:<input type="date"></td>
</tr>
<tr>
<td align="right"><input type="submit" name="send" value="确定"></td>
<td align="left"><input type="reset" name="reset" value="重置"></td>
</tr>
</table>
</body>
</html>