<form class="msg-form">
<div class="form-group">
<label class="form-label" for="name">名称：</label>
<input required="" placeholder="请输入联系人名称" class="form-input" type="text">
</div>
<div class="form-group">
<label class="form-label" for="email">邮箱：</label>
<input required="" placeholder="请输入联系邮箱" class="form-input" name="email" id="email" type="email">
</div>
<div class="form-group">
<label class="form-label" for="message">内容：</label>
<textarea required="" placeholder="请输入反馈内容" class="form-input" name="message" id="message"></textarea>
</div>
<button class="form-button" type="submit">提交</button>
</form>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8e8e8;
box-sizing: border-box;
padding: 15px;
}
.msg-form {
width: 400px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 1px 1px 6px 1px rgba(200,200,200,.3);
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
.form-input {
box-sizing: border-box;
width: 100%;
padding: 10px;
border: none;
background-color: #fff;
color: #333;
border-radius: 5px;
box-shadow: 1px 1px 2px 1px #eee;
}
textarea.form-input {
height: 100px;
}
.form-button {
display: block;
width: 100%;
padding: 10px;
background-color: #00a369;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 1px 1px 2px 1px #eee;
transition: background-color 0.3s ease;
}
.form-button:hover {
background-color: #009359;
}
预览
控制台