web应用开发学习——表单

一、学习内容

利用工具phpstudy构建实验环境；运用课程所学变现代码编写左侧控件；在表单页面嵌入自己最喜欢的背景音乐；在表单页面嵌入自己最喜欢的背景音乐；在控件点击OK按钮后，在页面上显示每一个控件用户输入的值。学习flask相关知识获得表单内容。

1. HTML表单

<form action=“test.php”  method=“get”>
	表单元素
</form>

action:这个属性用来指定接收表单元素的脚本程序；
method方法：

• get:输入表单的元素会通过附加在URL尾部提交给服务器的表单输入；

• post:输入的数据放在HTTP表头里面传送给服务器的脚本程序；

表单组件：

<input type=“组件类型”  name=“组件名字”/>

单行文本框：text
密码框：password
文本域：textarea
单选按钮：radio
复选框：checkbox
下拉列表框：select
文件上传域：file
按钮： button
标签：label
组合表单元素：fieldset

• HTML5组件

• 画布：

• SVG：使用XML来构建图形

• 音频：

• 视频：

• Flash播放多媒体
  

3. HTML5表单处理
   Flask:Flask是一个轻量级的基于Python的web框架。
   Flask具体讲解

二、实验过程

1.创建一个新的HTML文档，获得一个完整的文档结构。

2.利用title定义文档标题。

3.利用audio来循环播放一首音乐，应用controls autoplay loop 实现循环播放。

4.制作网站标题，总共可以用h1、h2、h3、h4、h5、h6表示，数字越小字体越大。

5. 利用标签来定义表格以将表单格式美化制作成表格， 用来设置表格的每一行;用来设置表格中的行标签与列标签;用来设置表格中的单元格数据。
   

制作出表格如图。

6. 构建表单结构，action用来指定接收表单元素的脚本程序； get方法输入表单的元素会通过附加在URL尾部提交给服务器的表单输入；post方法输入的数据放在HTTP表头里面传送给服务器的脚本程序；
   

7. 利用input制作单行文本框以输入名字。
   

8. 利用input制作密码框以输入密码。
   

9. 利用input制作文本框输入个人描述。
   
   

10. 利用input制作单选按钮选择性别，使用for属性为标签指定组件。
    
    

11. 利用input制作下拉列表框选择年级。

11. 利用input制作复选按钮进行兴趣多选。
    

12. 利用input制作文件上传组件选择文件上传。

13. 利用input制作提交按钮以能跳转到能显示用户输入的信息页面。

14.编写py文件获取表单中的输入值并将值返回出来。

from flask import Flask