前端——表格与表单
表格table
-
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
-
最主要的目的是显示表格类数据
表格类数据
- 最适合以行列来排布的数据
表格的基本结构
<table>
<thead> <!--表头（字段信息）-->
<tr>
<!--th:加粗文本-->
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody> <!--表单（数据信息）-->
<tr> <!--行-->
<!--td:正常文本-->
<td>1</td> <!--列-->
<td>Yumi</td>
<td>追番</td>
</tr>
<tr>
<td>2</td>
<td>jason</td>
<td>美女</td>
</tr>
</tbody>
</table>
<!--
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
-->
表单form
表单的功能
- 用于向服务端发送数据，实现用户与web服务器的交互
- 表能能够包含input系列标签，例如文本字段、复选框、单选框、提交按钮等
- 表单还可以包含
textarea、select、fieldset和label标签
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单元素
input元素
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
<!--
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读(可以向后端传数据)
disabled：所有input均适用(禁用，设置后对应的input不可以向后端传数据)
-->
select标签
<!--下拉框-->
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
<!--
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用，禁用后表单无法向后端传输该数据
selected：默认选中该项
value：定义提交时的选项值
-->
label标签
定义：
- label 标签为 input 元素定义标注（标记）。
说明：
- label 元素不会向用户呈现任何特殊效果。
- label 标签的 for 属性值应当与相关元素的 id 属性值相同。
<!--
label标签本身不会产生任何特殊效果，通常与input一起使用
用来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和该标签相关的表单控件上。
-->
<form action="">
<!--方式一-->
<!--当用户点击用户名时，焦点会自动转到input输入框上-->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<!--方式二-->
<label for="username">用户名：
<input type="text" id="username" name="username">
</label>
</form>
textarea多行文本
<!--textarea标签：文本域标签-->
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
<!--
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
-->
验证form表单提交数据
# 能够出发form表单提交数据的按钮
'''
1、<input type="submit" value="注册">
2、<button>点我</button>
'''
# 所有获取用户输入的标签 都应该有name属性
'''
后端会通过name来获取前端表单提交的数据
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</p>
'''
# 偷窥后端框架的基本使用(flask)
'''
环境准备：pip install Flask
'''
# 后端
from flask import Flask,request
app = Flask(__name__)
# 设置路由,methods不设置则默认只能支持get请求
@app.route('/index/', methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
print(request.files) # 获取文件数据
file_obj = request.files.get('photo') # 获取对应文件数据
file_obj.save(file_obj.name) # 保存文件数据
return 'OK'
app.run()
<!--
# 前端
"""
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据
"""
-->
<h1>注册页面</h1>
<!--在该form标签内部书写的用户数据都会被form标签提交给后端-->
<!--
action：表单提交的后端路径
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/'
-->
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="id">序号：</label>
<input type="text" id="id" disabled value="1"> <!--readonly-->
</p>
<p>
<label for="user">用户名：</label>
<input type="text" id="user">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password">
</p>
<p>性别：
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</p>
<p>
<label for="birth">出生日期：</label>
<input type="date" id="birth" name="birth">
</p>
<p>爱好：
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="animation" checked>动漫
<input type="checkbox" name="hobby" value="running">跑步
</p>
<p>
<label for="photo">上传头像：</label>
<input type="file" id="photo" name="photo">
</p>
<p>所在地：
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="sz">深圳</option>
</select>
</p>
<p>
<label for="about_me">自我介绍：</label>
<textarea name="about_me" id="about_me" cols="20" rows="10" maxlength="20"></textarea>
</p>
<p>
<input type="submit" name="submit" value="提交">
<input type="button" name="btn" value="按钮">
<input type="reset" name="reset" value="重置">
</p>
</form>
