一、<form>表单
1. <form>表单的作用
<form> 标签用于为用户输入创建 HTML 表单，用于向服务器传输数据。
表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、label等元素。
2. form表单的常用属性
- action 规定当提交表单时向何处发送表单数据，一般填地址
- method 规定用于发送 form-data 的 HTTP 方法(get 或 post)
代码：
<form action="/abc" method="post">
</form>
<form action="/abc" method="get">
</form>
二、常见的<input>标签
1. 定义和用法
- <input> 标签用于搜集用户信息。
- 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
2. 常用属性
text 文本框
<input type="text" name="Username">
password 密码框
<input type="password" name="password">
placeholder 帮助用户填写输入字段的提示
<input type="text" name="Username" placehoder="请输入用户名">
radio 单选框(三选一)
<input type="radio" name="hobby" value="read">看书
<input type="radio" name="hobby" value="study">学习
<input type="radio" name="hobby" value="music">听歌
checkbox 复选框(以下4项多选)
<input type="checkbox" name="hobby" value="climb">爬山
<input type="checkbox" name="hobby" value="swim">游泳
<input type="checkbox" name="hobby" value="dota">Dota
<input type="checkbox" name="hobby" value="study">学习
submit 向服务器提交表单
<input type="submit" value="Submit">
reset 重置已输入或已选择的选项
<input type="reset" value="Reset">
file 插入文件
<input type="file" accept="image/png">
hidden 隐藏属性
<input type="hidden" name="csrf" value="3h2dfefl123dabcoegh ">
三、post和get方式的区别
1. 用法
<form action="/abc" method="post">
</form>
<form action="/abc" method="get">
</form>
2. 区别
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。
- GET - 从指定的资源请求数据。
- POST - 向指定的资源提交要被处理的数据
| GET | POST | |
|---|---|---|
| 消息发送方法 | 在 GET 请求的 URL 中发送的 | 在 POST 请求的 HTTP 消息主体中发送的 |
| 缓存 | 能被缓存 | 不能缓存 |
| 书签 | 可收藏为书签 | 不可收藏为书签 |
| 编码类型 | application/x-www-form-urlencoded | 为二进制数据使用多重编码 |
| 历史 | 参数保留在浏览器历史中 | 参数不会保存在浏览器历史中 |
| 对数据长度的限制 | 是的 | 无限制 |
| 对数据类型的限制 | 只允许 ASCII 字符 | 没有限制 |
| 安全性 | 与 POST 相比，GET 的安全性较差 | POST 比 GET 更安全 |
四、在<input>里，name 属性的作用
1. name 的用法
<input type="text" name="Username">
<input type="password" name="Password">
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formtest</title>
</head>
<body>
<form action="/abc" method="post">
<div class="login">
<div class="username">
<label for="username1">姓名</label>
<input id="username1" type="text" name="Username">
</div>
<div class="password">
<label for="password1">密码</label>
<input id="password1" type="password" name="Password">
</div>
</div>
</form>
</body>
</html>
演示：
Paste_Image.png
2. name 属性的作用
- name 属性规定 input 元素的名称。
- name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
- 个人的理解是传参，相当于一个变量名。
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
五、radio如何分组
1. radio的用法
<input type="radio"> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
代码：
<div class="sex">
<label>性别：</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
演示：
Paste_Image.png
六、placeholder 属性的作用
1. 属性简介
该属性是 HTML5 中新加入的特性，该属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏，需要高版本的浏览器支持。
2. 代码及演示
代码：
<div class="username">
<label for="username1">姓名：</label>
<input id="username1" type="text" name="Username" placeholder="请输入姓名...">
</div>
<div class="password">
<label for="password1">密码：</label>
<input id="password1" type="password" name="Password" placeholder="请输入密码...">
</div>
演示：
Paste_Image.png
七、type="hidden" 有什么的作用
1. 作用
- 用于传输关于客户/服务器交互的状态信息
- 这种输入类型用户无法控制，但是却在提交表单时发送 value 属性的值
- 此元素在 Internet Explorer 3.0 及以上版本的 HTML 和脚本中可用
- 用户不可见，查看源代码可以看到，但是却在提交表单时发送 value 属性的值
2. 代码及示例
代码：
<form action="/abc" method="post">
<div class="login">
<div class="username">
<label for="username1">姓名：</label>
<input id="username1" type="text" name="Username" placeholder="请输入姓名...">
</div>
<div class="password">
<label for="password1">密码：</label>
<input id="password1" type="password" name="Password" placeholder="请输入密码...">
</div>
<div class="hidden">
<input type="hidden" name="myID" value="C66BF685983CBA7E5E7CAF6700CDECAE4C0848CB">
</div>
<div class="submit">
<input type="submit" value="Submit">
</div>
</div>
</form>
演示：
Paste_Image.png
网友评论