实验要求
1、利用老师给的工具phpstudy构建实验环境;
2、运用课程所学变现代码编写左侧控件;
3、在表单页面嵌入自己最喜欢的背景音乐;
4、修改老师给出的PHP程序,在控件点击OK按钮后,在页面上显示每一个控件用户输入的值。
实验目的
熟悉掌握表单的使用,了解用户交互过程的数据传递
实验内容
- 打开visual studio core,创建一个文件夹。在文件夹中增添html文件,记得加上后缀名.html
- 打出‘!’+tab键,使用emmet插件进行自动补齐
- 写‘title’标签,命名网页名;
写标题‘h1’—“Web程序设计–表单演示程序” - 设置表单
<form action="http://localhost/test.php" method="POST">
其中,action属性是指定接收表单元素的脚本程序;
method方法:
get:输入表单的元素会通过附加在URL尾部提交给服务器的表单输入,可传的数据少,且不安全,适合传递对保密要求不高的少量数据;
post:输入的数据放在HTTP表头里面传送给服务器的脚本程序,可传大量数据,且保密性较高;
6. 写表格‘table’,注意表头‘th’,单元格‘td’的使用,复习上节课的讲课内容
7. 在单元格中嵌入表单组件,在‘input’中挑选所需要组件类型,分别是text,password,radio,checkbox,file,submit,除此之外,还有textarea,select.
对于这些组件,要注意的有以下几点:
(1) name和value值,两者相当于是一对键值对,会在提交后传递给服务器;
(2) 输入姓名和密码时,可以指定输入大小,避免造成缓冲区溢出,提高安全性;
<input type="password" name="password" maxlength="30">
(3) 使用for属性为标签指定组件
<input type="radio" name="sex" value="male" checked="checked">
<label for="male">男性
<input type="radio" name="sex" value="female" >
<label for="female">女性
(4)下拉复选框设置multiple属性使选项可多选
<select name="grade" id="grade" multiple>
(5)checkbox的name属性的值要设置成数组,否则无法接收到值
<input type="checkbox" name="hobby[]" value="美食" id='1' checked="checked">美食
<input type="checkbox" name="hobby[]" value="旅游" >旅游
<input type="checkbox" name="hobby[]" value="健身" >健身<br>
<input type="checkbox" name="hobby[]" value="阅读" >阅读
<input type="checkbox" name="hobby[]" value="交友" >交友
<input type="checkbox" name="hobby[]" value="美容" >美容
美食
旅游
健身
阅读
交友
美容
8. 插入音频,
<audio src="That girl.mp3" controls autoplay loop>
</audio>
Controls使得用户可以自己设置音频播放的音量,暂停等,autoplay可以让页面一加载就开始播放音频,但是播完即停,加上loop可以无限循环播放。但是,有些浏览器不支持autoplay属性。
9. 写php动态网页,可以先写一个简单的hello world文件测试phpstudy环境是否搭建成功,基本语法规则是:<?php sentence?>。将写好的PHP文件放在phpstudy安装目录的WWW文件夹下
<?php
echo '<head><title>动态网页示范</title><meta charset="UTF-8"></head>';
echo'<body>';
echo '<p>hello world</p>';
echo'</body>';
?>
然后进行数据传递,基本规则是:获取get传送的变量
var lg = $_GET[“组件变量名”];
获取post传送的变量
var lg =$_POST[“组件变量名”];
这里使用第二种方法:
echo '姓名:'.$_POST["name"];
echo '<br>密码:'.$_POST["password"];
echo '<br>个人描述:'.$_POST['info'];
echo '<br>性别:'.$_POST['sex'];
echo '<br>年级:'.$_POST['grade'];
echo'<br>爱好:';
foreach ($_POST['hobby'] as $option)
{
echo $option."<br>";
}
注意到:hobby是一个数组,使用foreach循环来取值,所得到的值用‘.’和字符串连接
9.美化页面,规范代码。
实验效果
实验完整代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>表单网页</title>
<h1>计算机学院Web程序设计--表单演示程序</h1>
</head>
<body>
<form action="http://localhost/test.php" method="POST">
<table border="1" >
<tr>
<th><b>姓名</b></th>
<td><input type="text" name="name" maxlength="30" value="张三"></td>
</tr>
<tr>
<th><b>密码</b></th>
<td><input type="password" name="password" maxlength="30" value="123456789"></td>
</tr>
<tr>
<th><b>个人描述</b></th>
<td>
<textarea name="info" id="info" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<th>
<b>性别</b>
</th>
<td>
<input type="radio" name="sex" value="male" checked="checked"><label for="male">男性
<input type="radio" name="sex" value="female" ><label for="female">女性
</td>
</tr>
<tr>
<th>
<b>年级</b>
</th>
<td>
<select name="grade" id="grade" multiple>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</td>
</tr>
<tr>
<th><b>爱好</th>
<td>
<input type="checkbox" name="hobby[]" value="美食" id='1' checked="checked">美食
<input type="checkbox" name="hobby[]" value="旅游" >旅游
<input type="checkbox" name="hobby[]" value="健身" >健身<br>
<input type="checkbox" name="hobby[]" value="阅读" >阅读
<input type="checkbox" name="hobby[]" value="交友" >交友
<input type="checkbox" name="hobby[]" value="美容" >美容
</td>
</tr>
<tr>
<th>
<b>简历</b>
</th>
<td>
<input type="file" name='file' >
</td>
</tr>
<tr>
<th>
<b></b>
</th>
<td>
<input type="submit" name='submit' value="提交" >
</td>
</tr>
</table>
</form>
<audio src="That girl.mp3" controls autoplay loop>
</audio>
</body>
</html>