前端表单标签form 及 简单应用
今日内容
- 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 及 简单应用的更多相关文章
- 前端 HTML body标签相关内容 常用标签 表单标签 form
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍
input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍
定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...
- 对象化前端表单(Form)提交
很常见的业务场景,就是前端一个表单,submit给后台,在web.form时代,有from 的runat="server" 配合submit 自动会提交给服务端,然后服务端解析Re ...
- Html 表单标签 Form
Html表单 #转载请留言联系 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1.<form>标签 定义整体的表单区域 action属性 定义表单数据 ...
- 0007 表单标签(form、select)
目标: 能写出最常用的注册类表单 能说出input表单常见属性 现实中的表单,类似我们去银行办理信用卡填写的单子. 如下图 作用: 表单目的是为了收集用户信息. 在我们网页中, 我们也需要跟用户进行交 ...
- springMVC(7)---表单标签
springMVC(7)---表单标签 form标签作用 简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...
随机推荐
- Antd使用timePicker封装时间范围选择器(React hook版)
antd中提供了是日期范围选择器及datepaicker封装日期范围选择器的示例,但是没有时间选择范围的组件,这里使用两个timePicker组合一个事件范围选择器,通过disabled属性限定时间可 ...
- 智能集成接口:I3 ISA-95 的应用
介绍 多年来,使用基于制造运营管理 (MOM) 的应用程序的制造 IT 顾问试图说服制造商这些类型的应用的高价值.实时 MOM 解决方案是唯一一组能够精确优化工厂日常运营的 IT 应用程序,可为其可用 ...
- Unity3D开发入门教程(四)——用Lua实现组件
五邑隐侠,本名关健昌,12年游戏生涯. 本教程以 Unity 3D + VS Code + C# + tolua 为例. 一.Lua组件基类 1.在 Assets/Lua 目录下新建com目录用于存放 ...
- 【Java】抽象类与抽象方法
文章目录 抽象类与抽象方法 abstract关键字的使用 abstract修饰类:抽象类 abstract修饰方法:抽象方法 abstract使用上的注意点: 抽象类的匿名子类 模板方法设计模式 抽象 ...
- 【刷题-LeetCode】153 Find Minimum in Rotated Sorted Array
Find Minimum in Rotated Sorted Array Suppose an array sorted in ascending order is rotated at some p ...
- 【记录一个问题】android opencl c++: 不要Context, CommandQueue类的赋值函数
一开始代码中这样写了: cl::Context ctx = cl::Context(CL_DEVICE_TYPE_GPU, NULL); cl::CommandQueue queue= cl::Com ...
- gin源码解读2-揭开gin的神秘面纱
数据如何在gin中流转 func main() { gin.SetMode(gin.DebugMode) // 设置为开发模式 router := gin.Default() _ = router.S ...
- golang中字符串-字节切片,字符串-字符切片的互转
package main import ( "fmt" "reflect" ) func B2S(bs []uint8) string { // 将字节切片转换 ...
- kubernetes集群各模块功能描述
Master节点: Master节点上面主要由四个模块组成,APIServer,schedule,controller-manager,etcd APIServer: APIServer负责对外提供R ...
- 边带权并查集 学习笔记 & 洛谷P1196 [NOI2002] 银河英雄传说 题解
花了2h总算把边带权并查集整明白了qaq 1.边带权并查集的用途 众所周知,并查集擅长维护与可传递关系有关的信息.然而我们有时会发现并查集所维护的信息不够用,这时"边带权并查集"就 ...