css 在线留言表单

发布时间:2025-12-10 12:52:37 浏览次数:11

CSS 在线留言表单非常常见,因为它可以帮助网站的访问者在网站上留言反馈,提供意见和建议。通过 CSS,我们可以定制表单的样式,使其更加美观而且易于使用。

下面是一个使用 CSS 定制的在线留言表单:

<form><p ><label for="name-input">姓名</label><input type="text"  name="name-input"></p><p ><label for="email-input">邮箱</label><input type="email"  name="email-input"></p><p ><label for="message-input">留言内容</label><textarea  name="message-input"></textarea></p><button type="submit">提交</button></form>

上面的代码创建了一个包含三个表单组件的表单:一个文本框(输入姓名)、一个 email 输入框和一个文本域(用于留言)。我们使用 CSS 添加样式来使表单看起来更好。例如:

.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: bold;}input[type="text"],input[type="email"],textarea {width: 100%;padding: 8px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}button[type="submit"] {background-color: #4CAF50;color: white;padding: 16px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;}button[type="submit"]:hover {background-color: #45a049;}

上面的代码中,我们使用了一些常见的 CSS 样式:设置了一些 margin 和 padding、改变字体大小、使用了圆角边框等。

这样看起来更加美观的留言表单将帮助访问者更方便地提供反馈和建议,这也是每个网站都应该考虑使用 CSS 来定制表单的原因之一。

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477