# 表单布局漂亮html模板
表单是网页中非常重要的一个元素,用于收集用户输入的信息,一个漂亮的表单布局可以提升网页的整体美观度,同时也可以提高用户输入信息的效率,下面是一个简单的表单布局漂亮HTML模板,供您参考。
<!DOCTYPE html> <html> <head> <title>漂亮的表单布局</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; color: #333; } label { display: block; margin-bottom: 10px; color: #666; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } textarea { height: 100px; } input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>联系我们</h2> <form action="#" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="message">留言:</label> <textarea id="message" name="message" required></textarea> <input type="submit" value="提交"> </form> </div> </body> </html>
这个模板中,我们使用了简单的CSS样式来美化表单布局,容器使用了居中布局方式,并且设置了最大宽度和背景颜色,表单的每个元素都使用了margin和padding来调整位置和间距,并且对输入框和文本域进行了特殊的样式处理,提交按钮使用了绿色背景和白色文字,以突出其重要性和可点击性,整个表单布局简洁、美观,符合现代网页设计风格。