1、编写一个 PHP 页面，使用 Form 表单上传一个留言，包括作者 ID，时间，主题，正文，图片。一个留言目前允许上传一个图片，一个留言生成一个文件。提示，文件的格式可以使用 JSON，便于解析。 2、编写一个页面，对所有的留言进行表格形式的浏览（不显示正文和图片，如实验二的方式），可以考虑分页的方式（可选，因为要用到 session）。 3、编写一个 php 页面用于显示留言的详细内容，当点击列表中的某个列表时，用该页面显示详细内容。 4、对展示的表格通过 CSS 或者 HTML 技术进行一定的美化。 5、注意三个页面的导航关系，可以设计一个顶层的导航菜单，或者是其他方式

时间: 2023-12-03 07:46:46 浏览: 122

【HTML登录表单详解】 HTML（HyperText Markup Language）是构建网页的基础语言，它用于定义网页的结构和内容。在本实例"login-form"中，我们关注的是如何创建一个简单的登录表单，这个表单采用了新的同态风格，提供了一种更加美观且用户友好的界面设计。同态风格，也称为拟物化设计，是一种模仿现实世界物体外观的设计方法，旨在使数字元素看起来更像它们在现实世界中的对应物。在登录表单中，这可能体现在输入框、按钮等元素的设计上，使其看起来更真实、更具质感。创建一个HTML登录表单的基本步骤如下： 1. **创建基本结构**：我们需要一个`<form>`标签来定义表单。例如： ```html <form action="submit.php" method="post"> ``` `action`属性指定提交表单后服务器处理表单数据的URL，`method`属性规定数据的发送方式，通常是"get"或"post"。 2. **添加输入字段**：接着，我们需要创建输入字段供用户输入用户名和密码。使用`<input>`标签实现： ```html <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> ``` `type="text"`用于普通文本输入，`type="password"`则隐藏输入内容，保护用户隐私。 3. **创建提交按钮**：表单需要一个提交按钮让用户触发数据的提交： ```html <input type="submit" value="登录"> ``` `value`属性定义了按钮上显示的文本。 4. **样式设计**：为了实现同态风格，我们需要使用CSS（Cascading Style Sheets）进行样式定义。这可能包括设置边框、阴影、背景色等属性，以模拟真实世界的物体外观。例如： ```css input { border: 2px solid #ccc; border-radius: 5px; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: #f8f8f8; } ``` 这段CSS代码为输入框添加了圆角、边框、内填充和阴影效果，使得它们看起来更像真实的物体。 5. **响应式设计**：现代网页需要适应不同设备的屏幕尺寸，因此，我们可以使用媒体查询（media queries）实现响应式布局，确保表单在手机、平板电脑和桌面设备上都能良好展示。 6. **表单验证**：虽然在HTML5中，我们可以使用内置的验证功能（如`required`属性），但更复杂的验证通常需要JavaScript或后端服务器处理，以确保用户输入的数据有效和安全。在"login-form-master"这个压缩包中，你可能找到HTML文件（如`index.html`）、CSS文件（如`style.css`）以及可能的JavaScript文件（如`script.js`），它们协同工作，共同构建并美化了这个登录表单。通过学习和理解这些文件，你可以掌握创建同态风格登录表单的完整过程，并能够应用到自己的项目中。

1、上传留言页面代码： ```php <!DOCTYPE html> <html> <head> <title>上传留言</title> <meta charset="utf-8"> </head> <body> <h2>上传留言</h2> <form action="submit.php" method="post" enctype="multipart/form-data"> <label for="author">作者ID：</label> <input type="text" name="author" id="author" required><br><br> <label for="time">时间：</label> <input type="datetime-local" name="time" id="time" required><br><br> <label for="subject">主题：</label> <input type="text" name="subject" id="subject" required><br><br> <label for="content">正文：</label> <textarea name="content" id="content" cols="30" rows="10" required></textarea><br><br> <label for="image">图片：</label> <input type="file" name="image" id="image"><br><br> <input type="submit" value="提交留言"> </form> </body> </html> ``` 2、上传留言处理页面代码（submit.php）： ```php <?php // 获取表单数据 $author = $_POST['author']; $time = $_POST['time']; $subject = $_POST['subject']; $content = $_POST['content']; // 处理图片上传 $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["image"]["name"]); $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION)); $uploadOk = 1; // 检查图片是否真实存在 if(isset($_POST["submit"])) { $check = getimagesize($_FILES["image"]["tmp_name"]); if($check !== false) { $uploadOk = 1; } else { echo "上传的文件不是图片。"; $uploadOk = 0; } } // 检查文件是否已经存在 if (file_exists($target_file)) { echo "抱歉，文件已经存在。"; $uploadOk = 0; } // 检查文件大小 if ($_FILES["image"]["size"] > 500000) { echo "抱歉，您上传的文件太大。"; $uploadOk = 0; } // 允许的文件格式 if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo "只允许上传 JPG, JPEG, PNG & GIF 格式的图片。"; $uploadOk = 0; } // 图片上传成功 if ($uploadOk == 0) { echo "抱歉，您的文件未能上传。"; } else { if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) { echo "文件". basename( $_FILES["image"]["name"]). "上传成功。"; } else { echo "抱歉，文件上传出现了问题。"; } } // 将数据写入 JSON 文件 $data = array( 'author' => $author, 'time' => $time, 'subject' => $subject, 'content' => $content, 'image' => $target_file ); $file = 'messages/' . time() . '.json'; file_put_contents($file, json_encode($data)); echo '<br><br><a href="index.php">返回留言列表</a>'; ?> ``` 3、留言列表页面代码（index.php）： ```php <!DOCTYPE html> <html> <head> <title>留言列表</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>留言列表</h2> <table> <tr> <th>ID</th> <th>作者</th> <th>时间</th> <th>主题</th> <th>操作</th> </tr> <?php $files = glob('messages/*.json'); foreach ($files as $file) { $data = json_decode(file_get_contents($file), true); echo '<tr>'; echo '<td>' . basename($file, '.json') . '</td>'; echo '<td>' . $data['author'] . '</td>'; echo '<td>' . $data['time'] . '</td>'; echo '<td>' . $data['subject'] . '</td>'; echo '<td><a href="view.php?id=' . basename($file, '.json') . '">查看</a></td>'; echo '</tr>'; } ?> </table> <?php if (count($files) == 0) { echo '暂无留言。'; } ?> <br><br> <a href="upload.php">上传留言</a> </body> </html> ``` 4、留言详情页面代码（view.php）： ```php <!DOCTYPE html> <html> <head> <title>留言详情</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>留言详情</h2> <?php $id = $_GET['id']; $file = 'messages/' . $id . '.json'; if (file_exists($file)) { $data = json_decode(file_get_contents($file), true); echo '<h3>' . $data['subject'] . '</h3>'; echo '<p>作者：' . $data['author'] . '</p>'; echo '<p>时间：' . $data['time'] . '</p>'; echo '<p>正文：' . $data['content'] . '</p>'; echo '<p>图片：<br><img src="' . $data['image'] . '"></p>'; } else { echo '留言不存在。'; } ?> <br><br> <a href="index.php">返回留言列表</a> </body> </html> ``` 5、CSS样式代码（style.css）： ```css table { border-collapse: collapse; width: 80%; margin: 20px auto; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } a { text-decoration: none; color: #069; } a:hover { color: #036; } ```

阅读全文

相关推荐

一个from表单提交多个功能

PHP-Forms:一个简单的php表单类

用php编写一个form表单

编写 PHP 页面实现一个留言板，包括留言者的 id（可以是网名），时间， 主题，正文和附件；另外设计一个页面对留言进行列表，以表格的形式展示留言 的简介；当点击一条信息后，显示该留言的详细信息

编写网页 practice1_1.html，具体要求如下： (1)网页中有个 form表单，表单处理程序为本页面程序，表单提交方式为“pos t”，表单提交编码方式为“multipart/form-data”

php编写一个可以上传图片的留言板

用php编写一个form表单，分别用get和post提交，然后在浏览器按F12 看下请求响应格式

ajax提交form表单 web端编写

html一个表单留言页面

jquery submit函数编写简单例子实现form表单验证

编写一个php动态页面，在html标记中用先嵌入一段php代码，给变量$xh赋一个文本数值；然后把$xh的数值作为一个html表单中的文本型输入框的value属性值。

php编写一个页面中有一个表单：可以输入年龄，并进行判断： 如果大于18岁，可以上网吧， 否则不可以！

在html中嵌入PHP命令标记实验任务：编写一个php动态页面，在html标记中用先嵌入一段php代码，给变量$xh赋一个文本数值；然后把$xh的数值作为一个html表单中的文本型输入框的value属性值

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

最新推荐

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

小栗子源码2.9.3版本发布

编写 PHP 页面实现一个留言板，包括留言者的 id（可以是网名），时间，主题，正文和附件；另外设计一个页面对留言进行列表，以表格的形式展示留言的简介；当点击一条信息后，显示该留言的详细信息

php编写一个页面中有一个表单：可以输入年龄，并进行判断：如果大于18岁，可以上网吧，否则不可以！