帮我用 html css php代码制作一个可以网页 关于林俊杰 里面要有前后端交互 以紫色为主
时间: 2024-02-13 09:07:29 浏览: 29
好的,以下是使用 HTML、CSS 和 PHP 实现前后端交互的关于林俊杰的网页,使用紫色作为主题色:
index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Lin Junjie</title>
<style>
body {
background-color: purple;
color: white;
font-family: sans-serif;
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin: 10px;
padding: 5px;
width: 200px;
border-radius: 5px;
border: none;
}
button {
padding: 10px;
border-radius: 5px;
border: none;
background-color: white;
color: purple;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>About Lin Junjie</h1>
<form action="about.php" method="post">
<input type="text" name="name" placeholder="Your Name">
<input type="number" name="age" placeholder="Your Age">
<button type="submit">Submit</button>
</form>
</body>
</html>
```
about.php
```php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Lin Junjie</title>
<style>
body {
background-color: purple;
color: white;
font-family: sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<?php
$name = $_POST['name'];
$age = $_POST['age'];
echo "<h1>Welcome to the about page, $name! You are $age years old.</h1>";
?>
</body>
</html>
```
在这个代码中,我们创建了一个包含一个表单的 HTML 页面,表单使用 POST 方法提交到 about.php 文件处理。在 PHP 文件中,我们从表单中获取用户输入的姓名和年龄,并且返回一个包含欢迎信息的 HTML 页面。
请注意,这里我们使用了 PHP 的内嵌语法来直接在 HTML 中插入 PHP 代码。这是一种快速实现前后端交互的方法,但是也有一些安全性和可读性的问题。在实际开发中,我们应该使用更加规范和安全的方法来实现前后端交互,例如使用 MVC 模式、RESTful API 等。
希望这可以帮助到你。