今日内容

  • 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()

前端表单标签form 及 简单应用的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  2. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  4. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  5. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  6. 对象化前端表单(Form)提交

    很常见的业务场景,就是前端一个表单,submit给后台,在web.form时代,有from 的runat="server" 配合submit 自动会提交给服务端,然后服务端解析Re ...

  7. Html 表单标签 Form

    Html表单 #转载请留言联系 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1.<form>标签 定义整体的表单区域 action属性 定义表单数据 ...

  8. 0007 表单标签(form、select)

    目标: 能写出最常用的注册类表单 能说出input表单常见属性 现实中的表单,类似我们去银行办理信用卡填写的单子. 如下图 作用: 表单目的是为了收集用户信息. 在我们网页中, 我们也需要跟用户进行交 ...

  9. springMVC(7)---表单标签

    springMVC(7)---表单标签 form标签作用                                     简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...

随机推荐

  1. vue-router 两个子路由之间相互跳转时出错

    patient页面跳转到apply页面后,再点击patient页面后无法跳回 解决方法:使用`${path + path1}` 来自为知笔记(Wiz)

  2. 基于Apache Hudi + Flink的亿级数据入湖实践

    本次分享分为5个部分介绍Apache Hudi的应用与实践 实时数据落地需求演进 基于Spark+Hudi的实时数据落地应用实践 基于Flink自定义实时数据落地实践 基于Flink+Hudi的应用实 ...

  3. [未完] Linux 4.4 USB —— spiflash模拟usb大容量存储设备 调试记录 Gadget Mass Stroage

    linux 4.4 USB Gadget Mass Stroage 硬件平台: licheepi nano衍生 调试记录 驱动信息 │ This driver is a replacement for ...

  4. 《剑指offer》面试题61. 扑克牌中的顺子

    问题描述 从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的.2-10为数字本身,A为1,J为11,Q为12,K为13,而大.小王为 0 ,可以看成任意数字.A 不能视为 14. 示例 ...

  5. Zotero群组新建后无法显示

    我们新建Zotero的群组后无法显示. 此时需要点击文献库,就刷新了. 修改Zotero的群组后无法显示修改后的名称 点击同步即可同步内容.

  6. epoll(1)

    #include<stdio.h> #include<fcntl.h> #include<unistd.h> #include<sys/epoll.h> ...

  7. 挂载的卸载与运行 关闭selinux

    目录 一:系统目录结构介绍 1 定义挂载设备信息 光驱设备 /cd/cdrom 2 完成设备挂载操作 运行挂载 mount/dev/cdrom /mnt/ 3 检查测试挂载结果 挂载检查 df -h ...

  8. 强化学习实战 | 自定义Gym环境之扫雷

    开始之前 先考虑几个问题: Q1:如何展开无雷区? Q2:如何计算格子的提示数? Q3:如何表示扫雷游戏的状态? A1:可以使用递归函数,或是堆栈. A2:一般的做法是,需要打开某格子时,再去统计周围 ...

  9. lsof恢复误删文件

    用 lsof 恢复 误删除文件实验: 先模拟一个进程: [tiger@root:/home/tiger]$ echo "hello deletede" >> test. ...

  10. keepalive 和 Keep-Alive有没有区别?

    keepalive传输层的TCP协议,keep-alive应用层的HTTP协议 TCP的keepalive是在ESTABLISH状态的时候,双方空闲没有数据传输,多次发送心跳包检测连接是否存活(如果每 ...