一、学习内容
利用工具phpstudy构建实验环境;运用课程所学变现代码编写左侧控件;在表单页面嵌入自己最喜欢的背景音乐;在表单页面嵌入自己最喜欢的背景音乐;在控件点击OK按钮后,在页面上显示每一个控件用户输入的值。学习flask相关知识获得表单内容。
- 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播放多媒体
- HTML5表单处理
Flask:Flask是一个轻量级的基于Python的web框架。
Flask具体讲解
二、实验过程
1.创建一个新的HTML文档,获得一个完整的文档结构。
2.利用title定义文档标题。
3.利用audio来循环播放一首音乐,应用controls autoplay loop 实现循环播放。
4.制作网站标题,总共可以用h1、h2、h3、h4、h5、h6表示,数字越小字体越大。
- 利用标签来定义表格以将表单格式美化制作成表格, 用来设置表格的每一行;用来设置表格中的行标签与列标签;用来设置表格中的单元格数据。
制作出表格如图。
-
构建表单结构,action用来指定接收表单元素的脚本程序; get方法输入表单的元素会通过附加在URL尾部提交给服务器的表单输入;post方法输入的数据放在HTTP表头里面传送给服务器的脚本程序;
-
利用input制作单行文本框以输入名字。
- 利用input制作密码框以输入密码。
-
利用input制作文本框输入个人描述。
-
利用input制作单选按钮选择性别,使用for属性为标签指定组件。
-
利用input制作下拉列表框选择年级。
-
利用input制作复选按钮进行兴趣多选。
-
利用input制作文件上传组件选择文件上传。
- 利用input制作提交按钮以能跳转到能显示用户输入的信息页面。
14.编写py文件获取表单中的输入值并将值返回出来。