IT技术之家

首页 > 前端

前端

from表单_Felix.,

发布时间：2023-11-28 21:13:04 前端 10次 标签：前端 html javascript 开发语言 ecmascript
目录from表单的作用已注册页面为例type：redio 当有多个input标签但结果只能指向一个时，需要加上同一个name属性Checked：默认选中checkbox：单选框emlail：邮箱格式select：下拉框选项multiple：多选textarea标签file：上传文件>>>只支持单个文件file+multiple实现选中多个文件上传submit：提交按钮>&......

目录 from表单的作用 已注册页面为例 type：redio 当有多个input标签但结果只能指向一个时，需要加上同一个name属性Checked：默认选中checkbox：单选框emlail：邮箱格式select：下拉框选项multiple：多选textarea标签file：上传文件>>>只支持单个文件file+multiple实现选中多个文件上传submit：提交按钮>>>点击触发提交数据动作button:普通按钮>>>本身没有任何功能 需要绑定(JS)reset：重置按钮>>>按钮组的提示信息可以通过value属性自定义那么如何提交呢？form表单提交数据前后端交互 服务端代码前端设置(提交数据网址参数)

from表单的作用

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

功能：from表单获取用户数据并发送给后端

列举：网站的登录，注册，验证码等...

注意事项：

结束。

已注册页面为例

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

input就像是前端标签里的变形金刚，通过type参数的不同从而变换不同的表现形式。

type参数表现形式
text普通文本
password密码展示
date日历展示
redio单选框
checkbox多选框
email邮箱格式
file上传文件
submit提交按钮
button普通按钮
reset重置按钮

但是type参数绝不止这一星半点儿，改日我会专门写一篇博客。

from表单代码(注册页面)

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

方式一：lable包裹input并绑定id方式二：label与input单独出现并绑定id

绑定ID值是为了客户端用户在使用时可以直接在点击username时光标定格在对应的输入框内

<!DOCTYPE html>
<html lang="en">
<head>
    <!--这是一条注释-->
    <meta charset="UTF-8">
    <title>我命由我不由天</title>
</head>
<body>
    <h3>我自横刀向天笑,&nbsp;去留肝胆两昆仑, 少侠请输入注册信息</h3>
    <form action="">
        <p>          <!--设定要绑定的ID值-->
            <label for="d1">username:</label>
                            <!--绑定d1ID值-->
            <input type="text" id="d1">
        </p>

        <p>
            <label for="d2">password: <input type="password" id="d2"></label>
        </p>

        <p>
            birthday: <input type="date">
        </p>
    </form>
</body>
</html>

type：redio 当有多个input标签但结果只能指向一个时，需要加上同一个name属性

<p>gender:
    <label for=""><input type="radio" name="gender">male</label>

    <label for=""><input type="radio" name="gender">female</label>

    <label for=""><input type="radio" name="gender">others</label>
</p>

有个别网站会有默认单选框，当你填写注册信息时，性别将默认绑定male，同时你也可以手动更改，怎么实习的呢？

Checked：默认选中

默认选中需要额外配置checked='checked'，当属性名与属性值相等的时候可以简写checked

<label for=""><input type="radio" name="gender" checked>male</label>

checkbox：单选框

同样支持checked默认参数

<p>hobby:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">双色球
</p>

emlail：邮箱格式

<p>Email:
    <input type="email">
</p>

select：下拉框选项

select标签是下拉框选项，选项框内的一个个选项就是一个个option标签，默认单选，也可以改变为多选

<p>现居住地址：
    <select name="" id="">
        <option value="">北京</option>
        <option value="">深圳</option>
        <option value="">上海</option>
    </select>
</p>

multiple：多选

<p>日本女优:
    <select name="" id="" multiple>
        <option value="">筱田优</option>
        <option value="">桥本有菜</option>
        <option value="">水野朝阳</option>
        <option value="">明日花绮罗</option>
    </select>
</p>

textarea标签

获取大段文本内容，可调节大小，id报错可以无视

<p>自我介绍：
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

file：上传文件>>>只支持单个文件

如果需要一次性上传多个需要额外配置>>>multiple

<p>file:上传文件
    <input type="file">
</p>

file+multiple实现选中多个文件上传

<p>file:选中多个文件并上传
    <input type="file" multiple>
</p>

submit：提交按钮>>>点击触发提交数据动作

<p>
    <input type="submit">
</p>

button:普通按钮>>>本身没有任何功能 需要绑定(JS)

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

reset：重置按钮>>>按钮组的提示信息可以通过value属性自定义

如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮

<p>
    <input type="submit" value="提交">
    <input type="button" value="按钮">
    <input type="reset" value="重置">
</p>

那么如何提交呢？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

服务端代码

from flask import Flask, request

app = Flask(__name__)


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


app.run()

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

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

method='post'

<form action="http://127.0.0.1:5000/index/" method="post">
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <!--这是一条注释-->
    <meta charset="UTF-8">
    <title>我命由我不由天</title>
</head>
<body>
    <h3>我自横刀向天笑,&nbsp;去留肝胆两昆仑, 少侠请输入注册信息</h3>
    <form action="http://127.0.0.1:5000/index/" method="post">
        <p>          <!--绑定ID值-->
            <label for="d1">username:</label>
                            <!--绑定d1ID值-->
            <input type="text" id="d1">
        </p>

        <p>
            <label for="d2">password: <input type="password" id="d2"></label>
        </p>

        <p>
            <label for="d3">birthday: <input type="date" id="d3"></label>
        </p>

        <p>gender:
            <label for=""><input type="radio" name="gender" checked>male</label>
            <label for=""><input type="radio" name="gender">female</label>
            <label for=""><input type="radio" name="gender">others</label>
        </p>

        <p>hobby:
            <input type="checkbox">篮球
            <input type="checkbox">足球
            <input type="checkbox">双色球
        </p>

        <p>Email:
            <input type="email">
        </p>
        <p>现居住地址：
            <select name="" id="">
                <option value="">北京</option>
                <option value="">深圳</option>
                <option value="">上海</option>
            </select>
        </p>

        <p>日本女优:
            <select name="" id="" multiple>
                <option value="">筱田优</option>
                <option value="">桥本有菜</option>
                <option value="">水野朝阳</option>
                <option value="">明日花绮罗</option>
            </select>
        </p>
        <p>自我介绍：
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>file:上传文件
            <input type="file">
        </p>

        <p>file:选中多个文件并上传
            <input type="file" multiple>
        </p>
        
        <p>
            <input type="submit" value="提交">
            <input type="button" value="按钮">
            <input type="reset" value="重置">
        </p>
        

    </form>
</body>
</html>

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

    前端通过标签获取用户数据发送给后端的过程中，标签需要有name属性，相当于字典的key用户输入的数据会存储到标签的value属性中，相当也字典里的value，如果是选择型标签一定需要自定加上name和value，才能将用户数据发送到后端。
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <!--这是一条注释-->
    <meta charset="UTF-8">
    <title>我命由我不由天</title>
</head>
<body>
    <h3>我自横刀向天笑,&nbsp;去留肝胆两昆仑, 少侠请输入注册信息</h3>
    <form action="http://127.0.0.1:5000/index/" method="post">
        <p>          <!--绑定ID值-->
            <label for="d1">username:</label>
                            <!--绑定d1ID值-->
            <input type="text" name='username' id="d1">
        </p>

        <p>
            <label for="d2">password: <input type="password"  id="d2" name='pwd'></label>
        </p>

        <p>
            <label for="d3">birthday: <input type="date"  id="d3" name="生日"></label>
        </p>

        <p>gender:
            <label for=""><input type="radio" name="gender" checked value="男">male </label>
            <label for=""><input type="radio" name="gender" value="女">female</label>
            <label for=""><input type="radio" name="gender" value="其他">others</label>
        </p>

        <p>hobby:
            <input type="checkbox" value="basketball">篮球
            <input type="checkbox" value="football">足球
            <input type="checkbox" value="doublecolorball">双色球
        </p>

        <p>Email:
            <input type="email">
        </p>
        <p>现居住地址：
            <select name="" id="">
                <option value="">北京</option>
                <option value="">深圳</option>
                <option value="">上海</option>
            </select>
        </p>

        <p>日本女优:
            <select name="" id="" multiple>
                <option value="">筱田优</option>
                <option value="">桥本有菜</option>
                <option value="">水野朝阳</option>
                <option value="">明日花绮罗</option>
            </select>
        </p>
        <p>自我介绍：
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>file:上传文件
            <input type="file">
        </p>

        <p>file:选中多个文件并上传
            <input type="file" multiple>
        </p>

        <p>
            <input type="submit" value="提交">
            <input type="button" value="按钮">
            <input type="reset" value="重置">
        </p>


    </form>
</body>
</html>

注意：

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

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

服务端完整代码

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()

至此实现前后端交互

相关文章