教学设计表单

作者：子名 | 发布时间：2021-04-01 00:07:02 收藏本文下载本文

第1篇：《网页制作表单的设计》教学设计

表单的设计网页制作课程

15电商

4、5班2课时

一、【教学目标】

学会使用表单中文本域、图片域、单选按钮、复选框、跳转菜单、文本区域等的应用

二、【教学重点与难点】：

重点：文本域、跳转菜单，单选按钮的应用难点：单选按钮的应用，跳转菜单的制作

三、【教学方法】

讨论法、讲授法、演示法、练习法

五、【教学过程】

一、认识表单

表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。

二、生成表单

1、表单的创建与表单字段的添加

“插入”—“表单”—“选择需要的表单类型”

2、表单向导

“文件”—“新建”—“网页”--“常规”——“表单网页向导”

三、表单内容编辑

1、文本域——账号和密码的输入

3、图片域——制作提交按钮

4、单选按钮——性别选项设计

5、复选框——兴趣爱好设置

6、按钮（“验证有效性按钮” 登录）

7、跳转菜单菜单——密保问题的设置

8、文本区域——留言框的制作

四、学生练习制作表单

制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、留言框、收货地址、兴趣爱好、提交按钮、重填按钮

六、【课程小结】

七、【作业】

完成课堂示范案例，校园网站的注册和登录页面设计

第2篇：PHP 学习笔记(二)：表单：表单处理,表单验证,表单实例总结

PHP 学习笔记

（二）：表单：表单处理，表单验证，表单实例

PHP 表单

PHP 超全局变量 $_GET 和 $_POST 用于收集表单数据（form-data）。1 GET vs.POST

GET 和 POST 都创建数组（例如，array(key => value, key2 => value2, key3 => value3, …)）。此数组包含键/值对，其中的键是表单控件的名称，而值是来自用户的输入数据。

GET 和 POST 被视作 GET和_POST。它们是超全局变量，这意味着对它们的访问无需考虑作用域并且应该对其进行验证。如果未提交，则跳过验证并显示一个空白表单。

PHP 表单验证输入字段

从上一节中的验证规则中，我们看到 “Name”, “E-mail” 以及 “Gender” 字段是必需的。这些字段不能为空且必须在 HTML 表单中填写。

在上一节中，所有输入字段都是可选的。在下面的代码中我们增加了一些新变量：$nameErr、$emailErr、$genderErr 以及 $websiteErr。这些错误变量会保存被请求字段的错误消息。我们还为每个 $_POST 变量添加了一个 if else 语句。这条语句检查 $_POST 变量是否为空（通过 PHP empty()函数）。如果为空，则错误消息会存储于不同的错误变量中。如果不为空，则通过 test_input()函数发送用户输入数据：

$nameErr = $emailErr = $genderErr = $websiteErr = "";$name = $email = $gender = $comment = $website = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

if(empty($_POST["name"])){

$nameErr = "Name is reqwww.xiexiebang.comment"])){

$comment = "";

} else {

$comment = test_input($_POST["comment"]);

}

if(empty($_POST["gender"])){

$genderErr = "Gender is required";

} else {

$gender = test_input($_POST["gender"]);

} } ?> PHP验证 E-mail 和 URL

本节展示如何验证名字、电邮和 URL。

PHP验证 E-mail

以下代码展示的简单方法检查 e-mail 地址语法是否有效。如果无效则存储一条错误消息：

$email = test_input($_POST["email"]);if(!preg_match("/([w-]+@[w-]+.[w-]+)/",$email)){

$emailErr = "无效的 email 格式！";}

PHP验证 Name、E-mail、以及 URL

现在，脚本是这样的：

$nameErr = $emailErr = $genderErr = $websiteErr = "";$name = $email = $gender = $comment = $website = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

if(empty($_POST["name"])){

$nameErr = "Name is required";

} else {

$name = test_input($_POST["name"]);

// 检查名字是否包含字母和空格

if(!preg_match("/^[a-zA-Z ]*$/",$name)){

$nameErr = "Only letters and white space allowed";

}

if(empty($_POST["email"])){

$emailErr = "Email is required";

} else {

$email = test_input($_POST["email"]);

// 检查电邮地址语法是否有效

if(!preg_match("/([w-]+@[w-]+.[w-]+)/",$email)){

$emailErr = "Invalid email format";

}

if(empty($_POST["website"])){

$website = "";

} else {

$website = test_input($_POST["website"]);

// 检查 URL 地址语言是否有效（此正则表达式同样允许 URL 中的下划线）

if(!preg_match("/b(?:(?:https?|ftp)://|www.xiexiebang.comment"])){

$comment = "";

} else {

$comment = test_input($_POST["comment"]);

}

if(empty($_POST["gender"])){

$genderErr = "Gender is required";

} else {

$gender = test_input($_POST["gender"]);

} } ?>

接下来向您讲解如何防止表单在用户提交表单后保留输入字段中的值。

PHP-保留表单中的值

如需在用户点击提交按钮后在输入字段中显示值，我们在以下输入字段的 value 属性中增加了一小段 PHP 脚本：name、email 以及 website。在 comment 文本框字段中，我们把脚本放到了与之间。这些脚本输出 $name、$email、$website 和 $comment 变量的值。

然后，我们还需要显示选中了哪个单选按钮。对此，我们必须操作 checked 属性（而非单选按钮的 value 属性）：

Name: ">

E-mail: ">

Website: ">

Comment:

Gender:

value="female">Female value="male">Male

echo