HTML表单

HTML表单

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它；

• HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮；

• HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器；

form表单

所有的HTML表单都是以一个

标签开始的；

• form表单:获取用户的数据并发送给后端(服务端)
• 标签

这个元素正式定义了一个表单，就像

和

标签，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

• action 属性定义了在提交表单时,应该把所收集的数据送给谁(地址)(URL)去处理，.action="URL"
• method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”)，method="数据的提交方式"
• 提交方式：get post put delete patch

input标签

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

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

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



 name:




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



name:

• input标签通过type指定不同的参数来修改表现形式（变形金刚）

type指定的参数

参数	说明
text	普通文本
password	密文密码
date	日历展示
radio	单选 -> 多个选项标签需要有相同的name属性 默认选中需要额外配置checked='checked' 当属性名与属性值相等的时候可以简写checked
checkbox	多选，相当于复选框，默认选中参数也是checked
email	邮箱格式
file	上传文件（单个）
file 添加multiple参数	上传多个文件
submit	提交按钮
button	普通按钮（本身没有任何功能，需要绑定js）
reset	重置按钮

按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息，尤其是submit按钮

select标签

下拉框

        
            Beijing
            Shanghai
            Tianjin
        

进度条标签

30/100

textarea标签

文本框

textbox:
        
        
    

案例：前后端交互

flask框架写后端，可以用过后端框架来达到TCP服务端的目的

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 '提交成功'
app.run()

HTML表单写提交数据

    
    


信息页面


    
    
    

        name:
        

    
    
    
    
pwd:  
    
birthday:
    
    
gender
        
        
        male
        female
        others
    
    
    
hobby:
        
        baskball
        football
        pingpang
        
others hobby:

        
email:
    

    
province:
        
        
            Beijing
            Shanghai
            Tianjin
        
    
    
idol:
        
        
            邓紫棋
            周杰伦
            陈奕迅
        
    
    
textbox:
        
        
    
    
File:
        
        
    
    
MultFile:
        
        
    
    

    
        
        
        
        
    

注意事项：

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

• 用户输入的数据会存储到标签的value属性中，相当于字典的value；

• 如果是选择型标签需要自行加上name和value；

• 数据的提交地址由form表单的action参数来控制

  action="URL"
      	# 不写默认朝当前页面所在的地址提交
  method="数据的提交方式"
  方式：get post put delete patch
  

• form表单在提交数据的时候，如果含文件则需要指定两个固定参数：

  method='post'
  enctype="multipart/form-data"
  

案例2：简易表单

    
    
    




  

    Name:
    
  
  

    E-mail:
    
  
  

    Message:
    
  
  

  Send your message