一:概念
<form>标签用于创建HTML表单
form元素是块级元素,它的前后会拆行
表单用于向服务器传输数据,action指定向何处发送表单数据
表单可包含input、lable、textarea、select
二:表单中可包含input标签
type属性 | 含义 |
text | 文本框(单行) |
passward | 密码框 |
submit | 提交按钮 |
radio | 单选按钮 |
checkbox | 多选按钮 |
button | 普通按钮 |
reset | 重置按钮 |
image | 按钮为图片 |
hidden | 隐藏域(不建议) |
file | 文本域(并未真正选上文件) |
邮箱输入 | |
number | 数字输入 |
color | 颜色选择 |
date | 日期 |
datetime-local | 日期及时间 |
time | 时间 |
range | 进度条 |
lable标签是为input标签定义的标签(不会给用户展示任何样式)
三:可包含textarea标签
cols | 以字符个数设定的多行文本框宽度 |
rows | 以字符个数设定的多行文本框高度 |
四:可包含select标签
option | 设置选项内容 |
multiple | 将选项全部显示 |
selected | 默认选项 |
五:常用属性method
常用有get和post,method属性规定如何发送表单数据
GET——用于从指定资源请求数据
(不安全,将name属性信息暴露在地址栏,地址默认大小64kb)
POST——用于将数据发送到服务器来创建/更新资源
(安全,不会暴露信息在地址栏)
GET | POST | |
刷新 | 无害 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交) |
书签 | 可收藏为书签 | 不可收藏为书签 |
历史 | 参数保留在浏览器历史中 | 参数不会保存在浏览器中 |
对数据长度的限制 | URL 的最大长度是 2048 个字符 | 无限制 |
安全性 | 所发送的数据是 URL 的一部分 | 参数不会被保存在浏览器历史或 web 服务器日志中 |
可见性 | 数据在 URL 中对所有人都是可见的 | 数据不会显示在 URL 中 |
六:表单展示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<body align=center bgcolor="#e3dede">
<h2>用户注册</h2>
<form methed="post" >
<p>用户名:<input type="text" placeholder="请输入您的用户名"></p>
<p>密码:<input type="pswd" placeholder="请输入您的密码" required autofocus></p>
<p>请选择您的性别:<input type="radio" name="xb" value="男" >男
<input type="radio" name="xb" value="女" >女</p>
<p>请选择您的爱好:<input type="checkbox" name="hobby" value="足球" >足球
<input type="checkbox" value="篮球">篮球
<input type="checkbox" value="LOL">LOL
<input type="checkbox" value="足球">足球
<input type="checkbox" value="韩剧">韩剧
<input type="checkbox" value="王者荣耀">王者荣耀 </p>
<p>邮箱:<input type="email" placeholder="请输入您的邮箱"></p>
<p>用户头像:<input type="file" ></p>
<p>您的家庭地址是:<select>
<option value="西安">西安</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="湖南">湖南</option>
</select></p>
<p>您的收获地址是:<select multiple="">
<option value="永川">永川</option>
<option value="江北">江北</option>
<option value="万州">万州</option>
<option value="重庆">重庆</option>
</select></p>
<p>请留下你的建议和意见:<textarea cols="20" rows="15" placeholder="您的建议和意见"></textarea></p>
<p>请选择你喜欢的颜色:<input type="color">
注册的时间:<input type="datetime-local"></p>
<p><input type="submit" value="注册">
<input type="reset"></p>
</form>
</body>
</html>