html表单
HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它；
-
HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮；
-
HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器；
form表单
所有的HTML表单都是以一个
<form>标签开始的；
- form表单:获取用户的数据并发送给后端(服务端)
-
<form></form>标签
<form action="/my-handling-form-page" method="post">
</form>
这个元素正式定义了一个表单，就像<div>和<p>标签，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。
-
action属性定义了在提交表单时,应该把所收集的数据送给谁(地址)(URL)去处理，.action="URL" -
method属性定义了发送数据的HTTP方法(它可以是“get”或“post”)，method="数据的提交方式" - 提交方式：get post put delete patch
input标签
获取用户数据最为常用的标签就是
<input>标签并且该标签是行内标签；
- 直接编写
input标签会出现黄色阴影，原因在于input需要结合lable标签一起使用；
方式1:lable包裹input并绑定id
<label for='input标签id值'>input标签</label>
<!--案例-->
<p>
<label for="d1">name:
<input type="text" id="d1">
</label>
</p>
方式2:label与input单独出现并绑定id
<label for="d1">username:</label>
<input type="text" id="d1">
<!--案例-->
<p>
<label for="d1">name:</label>
<input type="text" id="d1">
</p>
-
input标签通过type指定不同的参数来修改表现形式（变形金刚）
type指定的参数
| 参数 | 说明 |
|---|---|
| text | 普通文本 |
| password | 密文密码 |
| date | 日历展示 |
| radio | 单选 -> 多个选项标签需要有相同的name属性 默认选中需要额外配置checked='checked' 当属性名与属性值相等的时候可以简写checked |
| checkbox | 多选，相当于复选框，默认选中参数也是checked |
| 邮箱格式 | |
| file | 上传文件（单个） |
| file 添加multiple参数 |
上传多个文件 |
| submit | 提交按钮 |
| button | 普通按钮（本身没有任何功能，需要绑定js） |
| reset | 重置按钮 |
按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息，尤其是submit按钮
select标签
下拉框
<!--select下拉框，默认单选，多选需要指定参数multiple-->
<select name="province" id="" >
<option value="北京">Beijing</option>
<option value="上海">Shanghai</option>
<option value="天津">Tianjin</option>
</select>
进度条标签
<progress max="100" value="30">30/100</progress>
textarea标签
文本框
<p>textbox:
<!-- 文本框 -->
<textarea name="info" cols="30" rows="10"></textarea>
</p>
案例：前后端交互
flask框架写后端，可以用过后端框架来达到TCP服务端的目的
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取普通数据
print(request.files) # 获取文件数据
# print(request.form.get('name'))
file_obj = request.files.get('file') # 获取文件对象
file_obj.save('xxx.md') # 保存文件
return '提交成功'
app.run()
HTML表单写提交数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>信息页面</h2>
<!--表单-->
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<!--利用块级标签分行显示 -->
<!--lable绑定id-->
<p>
<label for="d1">name:</label>
<input type="text" id="d1" name="name">
</p>
<!-- 密文密码 -->
<!-- lable标签包裹input -->
<p><label>pwd: <input type="password" name="pwd"></label></p>
<p><label>birthday:<input type="date" name="data"></label></p>
<!--性别单选框-->
<p>gender
<!--如果想要实现单选的功能，name指定同一个参数 -->
<!--checked默认选中，参数名和参数值相同可以简写为checked-->
<input type="radio" name="gender" checked="checked" value="男">male
<input type="radio" name="gender" value="女">female
<input type="radio" name="gender" value="其他">others
</p>
<!--爱好-->
<p>hobby:
<!-- 复选框 -->
<input type="checkbox" checked="checked" name="hobby" value="篮球">baskball
<input type="checkbox" name="hobby" value="足球" >football
<input type="checkbox" name="hobby" value="乒乓">pingpang
<p>others hobby:<input type="text" name="hobby" value="其他爱好"><p>
<p>email:<input type="email" name="email" value="please input Email"></p>
</p>
<p>province:
<!--select下拉框，默认单选，多选需要指定参数multiple-->
<select name="province" id="" >
<option value="北京">Beijing</option>
<option value="上海">Shanghai</option>
<option value="天津">Tianjin</option>
</select>
</p>
<p>idol:
<!--多选multiple-->
<select name="idol" id="" multiple>
<option value="dzj">邓紫棋</option>
<option value="zjl">周杰伦</option>
<option value="cyx">陈奕迅</option>
</select>
</p>
<p>textbox:
<!-- 文本框 -->
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>File:
<!--上传单个文件-->
<input type="file" name="file">
</p>
<p>MultFile:
<!--上传多个文件，文件夹不可以-->
<input type="file" multiple name="files">
</p>
<p>
<!-- 按钮组 -->
<!-- 添加value可以指定字段，不添加value参数自动渲染系统默认的字段 -->
<input type="submit" value="注册" >
<input type="button" value="返回">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
注意事项：
-
前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性，相当于字典的key；
-
用户输入的数据会存储到标签的value属性中，相当于字典的value；
-
如果是选择型标签需要自行加上name和value；
-
数据的提交地址由
form表单的action参数来控制action="URL" # 不写默认朝当前页面所在的地址提交 method="数据的提交方式" 方式：get post put delete patch -
form表单在提交数据的时候，如果含文件则需要指定两个固定参数：
method='post' enctype="multipart/form-data"
案例2：简易表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hammer</title>
<style>
form {
/* 居中表单 */
margin: 0 auto;
width: 400px;
/* 显示表单的轮廓 */
padding: 1em;
border: 1px solid #af2c2c;
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
margin-top: 1em;
}
label {
/* 确保所有label大小相同并正确对齐 */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* 确保所有文本输入框字体相同
textarea默认是等宽字体 */
font: 1em sans-serif;
/* 使所有文本输入框大小相同 */
width: 300px;
box-sizing: border-box;
/* 调整文本输入框的边框样式 */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* 给激活的元素一点高亮效果 */
border-color: #000;
}
textarea {
/* 使多行文本输入框和它们的label正确对齐 */
vertical-align: top;
/* 给文本留下足够的空间 */
height: 5em;
}
.button {
/* 把按钮放到和文本输入框一样的位置 */
padding-left: 90px; /* 和label的大小一样 */
}
button {
/* 这个外边距的大小与label和文本输入框之间的间距差不多 */
margin-left: .5em;
}
</style>
</head>
<body>
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
<div>
<!-- <textarea>by default this element is filled with this text</textarea>-->
</div>
</form>
</body>
</html>