前端表单标签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:第一就是往后端提交数据或者前端回显 ...
随机推荐
- Hive的连接和运行模式
原文链接: https://www.toutiao.com/i6771018203687551495/ Hive的连接 启动hadoop的时候将history也启动,如果出问题,可以方便我们后续定位 ...
- 周末撸了个Excel框架,现已开源,yyds!!
大家好,我是冰河~~ 不管是传统软件企业还是互联网企业,不管是管理软件还是面向C端的互联网应用.都不可避免的会涉及到报表操作,而对于报表业务来说,一个很重要的功能就是将数据导出到Excel. 如果我们 ...
- 开启mysql外部访问(root外连)
MySQL外部访问 mysql 默认是禁止远程连接的,你在安装mysql的系统行运行mysql -u root -p 后进入mysql 输入如下: mysql>use mysql; mysql& ...
- 机器学习&恶意代码检测简介
Malware detection 目录 可执行文件简介 检测方法概述 资源及参考文献 可执行文件简介 ELF(Executable Linkable Format) linux下的可执行文件格式,按 ...
- 我的MySQL学习记录 完结篇DAY05~
课程已全部学完,Redis\mongoDB 的学习也会提上日程啦~剩下的最大的最大的问题在于练习,大量的练习,后期会发我的学习记录. 小记:也不知道是不是加强针的缘故,老是拉肚子,记录彻底感冒的一天, ...
- Django 优化杂谈
Django 优化杂谈 Apr 21 2017 总结下最近看过的一些文章,然后想到的一些优化点,整理一下. 数据库连接池 http://mt.dbanotes.net/arch/instagram.h ...
- MyCms 自媒体 CMS 系统 v2.6,SEO 优化升级
MyCms 是一款基于Laravel开发的开源免费的自媒体博客CMS系统,助力开发者知识技能变现. MyCms 基于Apache2.0开源协议发布,免费且不限制商业使用,欢迎持续关注我们. V2.6 ...
- golang中的标准库数据格式
数据格式介绍 是系统中数据交互不可缺少的内容 这里主要介绍JSON.XML.MSGPack JSON json是完全独立于语言的文本格式,是k-v的形式 name:zs 应用场景:前后端交互,系统间数 ...
- IoC容器-Bean管理XML方式(自动装配)
IoC操作Bean管理(XML自动装配) 1,什么是自动装配 (1)根据指定装配规则(属性名称或者属性类型),Spring自动将匹配的属性值进行注入 2,演示自动装配过程 (1)根据属性名称自动注入 ...
- elasticsearch启动错误解决办法
1.max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 解决: [r ...