（二）WEB表单设计

2023-09-25 13:39:51

实验目的

了解HTML表单的基本含义、基本类型以及工作流程
认识HTML表单结构、掌握action属性、两种method方法的用法以及一些基本表单组件的使用
了解HTML5相对于HTML的优势，掌握HTML5组件的使用，并且使用HTML5里面的音频组件完成此次实验
掌握HTML的表单处理，完成环境搭建，安装flask来成功处理请求数据，利用接收的数据构建新的网页

实验环境

VS code、flask、python

实验内容

基本流程

1.首先创建基本html代码，然后完成音频文件的导入
2.利用单行文本框、密码框、文本域、单选按钮、复选按钮、下拉复选框、文件上传等表单组件以及表格创建的基本标签来共同创建表格
3.导入flask，编写 Python代码，接收输入的数据，成功实现网页的跳转

网页实现展示

具体代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络空间安全学院表单实例</title>
</head>
<body>
    <h1>网络空间安全学院表单实例演示</h1>
    <form action="http://127.0.0.1:5000/" method="POST">
       <h2>音频播放</h2>
       <audio src="华晨宇 - 好想爱这个世界啊.mp3"controls autoplay loop></audio>
        <table border="1">
            
            <tr>
                <td>姓名：</td>
                <td>
                    <input type="text" name="user"  value="输入姓名" id="">
                </td>

            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="pass" value="输入密码" id="">
                </td>
            </tr>
            <tr>
                <td>个人描述：</td>
                <td>
                    <textarea name="descr" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="female" id="">女
                    <input type="radio" name="sex" value="male" id="">男
                </td>
            </tr>
            <tr>
                <td>年级：</td>
                <td>
                    <select name="grade" id="">
                        <option value="1">grade one</option>
                        <option value="2">grade two</option>
                        <option value="3">grade three</option>
                        <option value="4">grade four</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="fav" value="sleep" id="">睡觉
                    <input type="checkbox" name="fav" value="game" id="">玩游戏
                    <input type="checkbox" name="fav" value="reading" id="">阅读
                    <input type="checkbox" name="fav" value="eating" id="">美食
                    <input type="checkbox" name="fav" value="travel" id="">旅行
                    <input type="checkbox" name="fav" value="dancing" id="">跳舞
                </td>
            </tr>
            <tr>
                <td>简历：</td>
                <td>
                    <input type="file" name="file" id="">
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交"></td>
            </tr>

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

from flask import Flask,request
app = Flask(__name__)

@app.route("/",methods=["GET","POST"])
def home():
    string="<p>姓名：</p>{}<br>\
        <p>密码：</p> {}<br>\
         <p>个人陈述：</p>{}<br>\
         <p>性别：</p>{}<br>\
         <p>年级：</p> {}<br> \
        <p>爱好：</p>{}<br>\
        <p>上传文件名：</p>{}"

    if request.method=="POST":
        name=request.form["user"]
        password=request.form["pass"]
        desc=request.form["descr"]
        sex=request.form["sex"]
        grade=request.form["grade"]
        fav=request.form.getlist("fav")
        file=request.form["file"]
        return string.format(name,password,desc,sex,grade,fav,file)
    else:
        return u"你的请求方式存在问题"


if __name__=="__main__":
    app.run()

结果

利用音频组件向网页中插入背景音乐并能控制音乐的暂停和播放，利用相关标签创建表格，向表格中插入表单组件，实现web表单的创建，最后通过导入flask编写python代码，实现新网页的跳转。

小结

通过此次实验，我深入理解了表单的基本含义、基本类型以及工作流程；此次实践有利于我对基本表单组件的熟练掌握。而这次实验我感到最困难的部分是flask的导入，之前下载了anaconda但是还是无法成功导入flask模块，最后通过老师和助教的帮助，以及不断在网上寻找解决办法，发现是自己的python环境里没有pip相关文件，最后通过cmd命令行导入pip相关文件，再次安装flask，终于成功导入flask模块完成了实验环境的搭建。

码农公寓