前端表单标签form 及简单应用

2023-09-30 20:58:52

今日内容

form 表单（重点）
后端框架之 flask 简介

内容详细

form 表单

1、作用

form 表单可以在前端获取用户输入的数据并发送给后端（服务端）

2、input 标签

获取用户数据最为常用的标签就是input标签并且该标签是行内标签，

input标签被称为前端标签里面的变形金刚，因为它可以通过type参数的不同变换不同的表现形式

<label for="d1">username:</label>
<input type="text" id="d1">

text		普通文本
password	密码展示
date		日历展示
radio		单选>>>:多个选项标签需要有相同的name属性
                    默认选中需要额外配置checked='checked'
                    当属性名与属性值相等的时候可以简写checked
checkbox	多选>>>:默认选中也是checked属性
email		邮箱格式
file		上传文件>>>:默认只支持单个文件
                    如果需要一次性上传多个需要额外配置multiple
submit		提交按钮>>>:点击出发提交数据的动作
button		普通按钮>>>:本身没有任何功能 需要绑定(JS)
reset		重置按钮

注意：

按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息尤其是submit按钮

input一般需要结合lable一起使用

方式1:lable包裹input并绑定id
	<label for='input标签id值'>input标签</label>
方式2:label与input单独出现并绑定id
    <label for="d1">username:</label>
    <input type="text" id="d1">

select标签是下拉框选项

一个个选项就是一个个option标签默认是单选也可以变为多选 --> multiple

textarea标签

获取大段文本内容,一般用于获取用户评论

3、form表单提交数据

数据的提交地址由form表单的action参数来控制
    action="URL"
# 不写默认朝当前页面所在的地址提交

    method="数据的提交方式"
# 数据的提交方式有很多种 这里先忽略(后续讲解)
get post put delete patch...


<!--
form表单在提交数据的时候 如果含文件则需要指定两个固定参数
	method='post'
	enctype="multipart/form-data"
-->

后端框架之 flask 简介

# 代码无需掌握 只看效果即可
"""后端框架:可以简单的理解为别人写好的一个非常牛逼的TCP服务端"""
以flask框架为例>>>:第三方框架 pip3 install flask
 

前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性
	相当于字典的key
 	用户输入的数据会存储到标签的value属性中 相当于字典的value
  	如果是选择型标签需要自行加上name和value

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 'flask框架真简单'
app.run()

码农公寓