web程序设计（２）——制作表单演示程序和配置PHP动态网站

最新推荐文章于 2022-10-11 09:16:04 发布

My_summers

最新推荐文章于 2022-10-11 09:16:04 发布

阅读量633

点赞数

分类专栏： Web 文章标签： html web php

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103927074

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

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>

My_summers

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web程序设计（２）——制作表单演示程序和配置PHP动态网站

实验要求1、利用老师给的工具phpstudy构建实验环境；2、运用课程所学变现代码编写左侧控件；3、在表单页面嵌入自己最喜欢的背景音乐；4、修改老师给出的PHP程序，在控件点击OK按钮后，在页面上显示每一个控件用户输入的值。实验目的熟悉掌握表单的使用，了解用户交互过程的数据传递实验内容打开visual studio core，创建一个文件夹。在文件夹中增添html文件，记得加上后...
复制链接

扫一扫

专栏目录