时间戳

首页 > 技术文章 > 前端表单标签form 及 简单应用

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

elijah-li 2022-01-21 20:11 原文

今日内容

  • 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一般需要结合label一起使用

特别注意

‘label’ 别写错了，别写成 lable,还搞半天发现不了
label绑定input的id，这样，点击label标签内的任意符号都会触发input

方式1:label包裹input并绑定id
	<label for='input标签id值'>input标签</label>
方式2:label与input单独出现并绑定id，这样，点击label标签内的任意符号都会触发input
    <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()

推荐阅读