阅读量:0
这是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> <div 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> </div> </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> <div 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> </div> </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> <div class="container"> <div 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> </div> </div> </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> <div class="overlay"></div> <div 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> </div> </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; } 