知识问答
如何打造6款引人注目的HTML CSS用户留言表单设计？
2025-09-22 01:46:54
来源：互联网转载
这是6款漂亮的HTML CSS样式用户留言表单，它们具有不同的设计和布局，可以满足不同网站的需求。
本文将介绍六款漂亮且实用的HTML CSS样式用户留言表单，这些表单适用于各种网站和应用程序，以提升用户体验和界面美观度，我们将逐一展示每款表单的设计特点、代码实现以及应用场景。
1. 简洁现代风格表单
设计特点：
简洁明了的布局
使用柔和的颜色搭配
响应式设计，适应不同屏幕尺寸
HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>简洁现代风格表单</title> <link rel="stylesheet" href="styles.css"></head><body> <p class="container"> <form action="/submit" method="post"> <h2>留言表单</h2> <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> <button type="submit">提交</button> </form> </p></body></html>
CSS代码：
body { fontfamily: Arial, sansserif;}.container { maxwidth: 500px; margin: 0 auto; padding: 20px; boxshadow: 0 0 10px rgba(0, 0, 0, 0.1);}form { display: flex; flexdirection: column;}label { margintop: 10px;}input, textarea, button { margintop: 5px; padding: 10px; border: 1px solid #ccc; borderradius: 5px;}button { backgroundcolor: #4CAF50; color: white; cursor: pointer;}button:hover { backgroundcolor: #45a049;}2. 渐变背景表单
设计特点：
使用渐变背景增加视觉吸引力
白色输入框与背景形成对比
圆角设计使界面更柔和
HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>渐变背景表单</title> <link rel="stylesheet" href="styles.css"></head><body> <p class="container"> <form action="/submit" method="post"> <h2>留言表单</h2> <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> <button type="submit">提交</button> </form> </p></body></html>
CSS代码：
body { fontfamily: Arial, sansserif; background: lineargradient(to right, #6dd5ed, #2193b0);}.container { maxwidth: 500px; margin: 50px auto; padding: 20px; background: white; borderradius: 8px; boxshadow: 0 0 10px rgba(0, 0, 0, 0.1);}form { display: flex; flexdirection: column;}label { margintop: 10px;}input, textarea, button { margintop: 5px; padding: 10px; border: 1px solid #ccc; borderradius: 5px;}button { backgroundcolor: #4CAF50; color: white; cursor: pointer;}button:hover { backgroundcolor: #45a049;}3. 卡片式表单
设计特点：
卡片式布局，增强视觉效果
使用阴影效果提升层次感
适合博客和新闻网站的留言板
HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>卡片式表单</title> <link rel="stylesheet" href="styles.css"></head><body> <p class="container"> <p class="card"> <form action="/submit" method="post"> <h2>留言表单</h2> <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> <button type="submit">提交</button> </form> </p> </p></body></html>
CSS代码：
body { fontfamily: Arial, sansserif;}.container { maxwidth: 500px; margin: 0 auto; padding: 20px;}.card { background: white; padding: 20px; borderradius: 8px; boxshadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);}form { display: flex; flexdirection: column;}label { margintop: 10px;}input, textarea, button { margintop: 5px; padding: 10px; border: 1px solid #ccc; borderradius: 5px;}button { backgroundcolor: #4CAF50; color: white; cursor: pointer;}button:hover { backgroundcolor: #45a049;}4. 悬浮效果表单
设计特点：
表单悬浮在页面中央，吸引眼球
使用透明背景和边框效果
适合登录和注册页面
HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>悬浮效果表单</title> <link rel="stylesheet" href="styles.css"></head><body> <p class="overlay"></p> <p class="formcontainer"> <form action="/submit" method="post"> <h2>留言表单</h2> <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> <button type="submit">提交</button> </form> </p></body></html>
CSS代码：
body { fontfamily: Arial, sansserif; height: 100vh; margin: 0; display: flex; alignitems: center; justifycontent: center;}.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}.formcontainer { background: white; padding: 30px; borderradius: 10px; boxshadow: 0 0 10px rgba(0, 0, 0, 0.3);}form { display: flex; flexdirection: column;}label { margintop: 10px;}input, textarea, button { margintop: 5px; padding: 10px; border: 1px solid #ccc; borderradius: 5px;}button { backgroundcolor: #4CAF50; color: white; cursor: pointer;}button:hover { backgroundcolor: #45a049;}| 用户留言表单样式 | 描述 | 代码片段 |
||||
| 1. 简洁风格 | 清晰的布局，使用文本框和按钮，背景色为浅灰色，文字为深灰色，简洁大方。 |
<form> <table> <tr> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name"></td> </tr> <tr> <td><label for="email">邮箱：</label></td> <td><input type="email" id="email" name="email"></td> </tr> <tr> <td><label for="message">留言：</label></td> <td><textarea id="message" name="message" rows="5" cols="30"></textarea></td> </tr> <tr> <td colspan="2"><button type="submit">提交</button></td> </tr> </table></form>
form { backgroundcolor: #f0f0f0; padding: 20px; borderradius: 5px;}table { width: 100%;}td { padding: 10px;}label { fontweight: bold; color: #333;}input, textarea { width: 100%; padding: 5px; border: 1px solid #ccc; borderradius: 3px;}button { backgroundcolor: #4CAF50; color: white; border: none; padding: 10px 20px; textalign: center; textdecoration: none; display: inlineblock; fontsize: 16px; margin: 4px 2px; cursor: pointer; borderradius: 5px;}| 2. 卡通风格 | 使用卡通图标，颜色鲜艳，布局简单，突出留言区域。 |
<form> <table> <tr> <td><img src="icon.png" alt="Icon" width="50" height="50"></td> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name"></td> </tr> <tr> <td><img src="icon.png" alt="Icon" width="50" height="50"></td> <td><label for="email">邮箱：</label></td> <td><input type="email" id="email" name="email"></td> </tr> <tr> <td colspan="3"><label for="message">留言：</label></td> </tr> <tr> <td colspan="3"><textarea id="message" name="message" rows="5" cols="30"></textarea></td> </tr> <tr> <td colspan="3"><button type="submit">提交</button></td> </tr> </table></form>
form { backgroundcolor: #fff; padding: 20px; borderradius: 5px;}table { width: 100%;}td { padding: 10px;}label { fontweight: bold; color: #333;}input, textarea { width: 100%; padding: 5px; border: 1px solid #ccc; borderradius: 3px;}button { backgroundcolor: #ff4500; color: white; border: none; padding: 10px 20px; textalign: center; textdecoration: none; display: inlineblock; fontsize: 16px; margin: 4px 2px; cursor: pointer; borderradius: 5px;}| 3. 水平布局 | 将留言表单的元素水平排列，视觉效果更宽敞。 |
<form> <table> <tr> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name"></td> </tr> <tr> <td><label for="email">邮箱：</label></td> <td><input type="email" id="email" name="email"></td> </tr> <tr> <td><label for="message">留言：</label></td> <td><textarea id="message" name="message" rows="5" cols="30"></textarea></td> </tr> <tr> <td colspan="2"><button type="submit">提交</button></td> </tr> </table></form>
form { backgroundcolor: #f0f0f0; padding: 20px; borderradius: 5px;}table { width: 100%;}td { padding: 10px;}label { fontweight: bold; color: #333;}input, textarea { width: 100%; padding: 5px; border: 1px solid #ccc; borderradius: 3px;}button { backgroundcolor: #4CAF50; color: white; border: none; padding: 10px 20px; textalign: center; textdecoration: none; display: inlineblock; fontsize: 16px; margin: 4px 2px; cursor: pointer; borderradius: 5px;}| 4. 悬浮效果 | 使用伪元素创建悬停效果，增加用户交互体验。 |
<form> <table> <tr> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name"></td> </tr> <tr> <td><label for="email">邮箱：</label></td> <td><input type="email" id="email" name="email"></td> </tr> <tr> <td><label for="message">留言：</label></td> <td><textarea id="message" name="message" rows="5" cols="30"></textarea></td> </tr> <tr> <td colspan="2"><button type="submit">提交</button></td> </tr> </table></form>
form { backgroundcolor: #f0f0f0; padding: 20px; borderradius: 5px;}table { width: 100%;}td { padding: 10px;}label { fontweight: bold; color: #333;}input, textarea { width: 100%; padding: 5px; border: 1px solid #ccc; borderradius: 3px;}button { backgroundcolor: #4CAF50; color: white; border: none; padding: 10px 20px; textalign: center; textdecoration: none; display: inlineblock; fontsize: 16px; margin: 4px 2px; cursor: pointer; borderradius: 5px;}button:hover { backgroundcolor: #45a049;}| 5. 隐藏表单元素 | 隐藏部分表单元素，只显示最重要的部分，简化用户操作。 |
<form> <table> <tr> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name"></td> </tr> <tr> <td><label for="message">留言：</label></td> <td><textarea id="message" name="message" rows="5" cols="30"></textarea></td> </tr> <tr> <td colspan="2"><button type="submit">提交</button></td> </tr> </table></form>
form { backgroundcolor: #f0f0f0; padding: 20px; borderradius: 5px;}table { width: 100%;}td { padding: 10px;}label { fontweight: bold; color: #333;}input, textarea { width: 100%; padding: 5px; border: 1px solid #ccc; borderradius: 3px;}button { backgroundcolor: #4CAF50; color: white; border: none; padding: 10px 20px; textalign: center; textdecoration: none; display: inlineblock; fontsize: 16px; margin: 4px 2px; cursor: pointer; borderradius: 5px;}
上一篇：投资顾问是做什么的
