• 前端HTML基础之form表单
  • 一:form表单
    • 1.form表单功能
    • 2.表单元素
  • 二:form表单搭建(注册页面)
    • 1.编写input会出现黄色阴影问题
  • 三:完整版，前端代码(注册页面)
  • 四:type属性介绍
    • 1.input(type属性)
  • 五:form表单提交数据
  • 六:前后端交互
    • 1.搭建简易版服务端
    • 2.前端设置(提交数据网址参数)
    • 3.网址测试
    • 4.服务端(后端)
    • 5.服务端不显示客户端数据原因
  • 七:完整版 前后端交互
    • 1.前端解决方法
    • 2.网址注册测试(前后端交互测试)

前端HTML基础之form表单

一:form表单

1.form表单功能

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

form表单:获取用户的数据并发送给后端(服务端)
eg:网站的登录、注册、验证码等...

2.表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

二:form表单搭建(注册页面)

• 简易版注册页面

注册页面

    
    
   
        username:
        
        
    
    
   
        password:
        
    
  
    
birthday:

1.编写input会出现黄色阴影问题

• 解决方法

直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用

方式1:lable包裹input并绑定id
   input标签

方式2:label与input单独出现并绑定id
username:
   

三:完整版，前端代码(注册页面)

    
注册页面
    
        
 
            username:
            
        
        

            password:
            
        
        
birthday:
        

            male
            female
            others
        
        
hobby:
            篮球
            足球
            双色球
        
        
email:
            
        
        
province
            
                北京
                深圳
                上海
            
        
        
明星
            
                苍老师
                明老师
                三上老师
            
        
        
info:
            
        
        
file:
            
        
        
files:
            
        
        

            
            
            
        
    
    

四:type属性介绍

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

1.input(type属性)

 元素会根据不同的 type 属性，变化为多种形态。
通过type参数的不同变换不同的表现形式

五:form表单提交数据

• 方法1

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

• 方法2

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

• 方法3

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

六:前后端交互

• 只看效果即可
• 后端框架TCP服务端

以flask框架为例>>>:第三方框架 pip3 install flask

1.搭建简易版服务端

from flask import Flask,request

app = Flask(__name__)

@app.route('/index/', methods=['GET', 'POST'])
def index():
    print(request.form)
    print(request.form)
    return 'flask框架真简单'
app.run()

2.前端设置(提交数据网址参数)

    form表单在提交数据的时候 如果含文件则需要指定两个固定参数
    method='post'
    
    

3.网址测试

4.服务端(后端)

测试服务器接收客户端数据，不显示用户数据

5.服务端不显示客户端数据原因

1.前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性
相当于字典的key

2.用户输入的数据会存储到标签的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)  # 获取文件数据
    file_obj = request.files.get('file')  # 获取文件对象
    file_obj.save('xxx.md')  # 保存文件
    return 'flask框架真简单'
app.run()
PYTHON 复制 全屏

1.前端解决方法

前端用户输入的数据会存储到标签的value属性中 
相当于字典的value如果是选择型标签需要自行加上name和value 
k:v键值对 才能将用户数据发送到后端

2.form如果包含文件则需要指定两个固定参数
enctype="multipart/form-data"

• 前端

    
注册页面
    

        

            username:
            
        
        

            password:
            
        
        
birthday:
        

            male
            female
            others
        
        
hobby:
            篮球
            足球
            双色球
        
        
email:
            
        
        
province
            
                北京
                深圳
                上海
            
        
        
明星
            
                苍老师
                明老师
                三上老师
            
        
        
info:
            
        
        
file:
            
        
        
files:
            
        
        

            
            
            
        
    

2.网址注册测试(前后端交互测试)