html页面设置一个漂亮的表单,填写完毕后提交可显示所填写的信息。
时间: 2023-07-16 12:11:26 浏览: 53
HTML表单可以通过使用表单元素和表单控件来创建。以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
<style>
form {
width: 50%;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
button[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
button[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<form action="#" method="post">
<div class="container">
<div class="row">
<div class="col-25">
<label for="name">姓名:</label>
</div>
<div class="col-75">
<input type="text" id="name" name="name" placeholder="请输入您的姓名...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">邮箱:</label>
</div>
<div class="col-75">
<input type="text" id="email" name="email" placeholder="请输入您的邮箱...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="message">留言:</label>
</div>
<div class="col-75">
<textarea id="message" name="message" placeholder="请输入您的留言..." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<button type="submit">提交</button>
</div>
</div>
</form>
<?php
if(isset($_POST['submit'])){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
echo "<h2>您填写的信息如下:</h2>";
echo "姓名:".$name."<br>";
echo "邮箱:".$email."<br>";
echo "留言:".$message."<br>";
}
?>
</body>
</html>
```
这个表单包含了三个表单控件:一个文本框、一个下拉列表和一个多行文本框。在提交表单时,服务器端代码将获取表单控件的值,并显示出来。
你可以将这份代码保存为一个 HTML 文件,然后在浏览器中打开它,即可看到漂亮的表单效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)