如何 - 带有图标的表单
了解如何创建带有图标的表单。
注册
如何创建图标表单
步骤 1) 添加 HTML
使用 <form> 元素来处理输入。您可以在我们的 PHP 教程中了解更多信息。然后为每个字段添加输入
示例
<form action="/action_page.php">
<h2>注册表单</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="用户名" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="电子邮件" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="密码" name="psw">
</div>
<button type="submit" class="btn">注册</button>
</form>
步骤 2) 添加 CSS
示例
* {box-sizing: border-box;}
/* 样式化输入容器 */
.input-container {
display: flex;
width: 100%;
margin-bottom: 15px;
}
/* 样式化表单图标 */
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
/* 样式化输入字段 */
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* 设置提交按钮的样式 */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
亲自尝试 »
提示：访问我们的<a href="/html/html_forms.asp">HTML 表单教程</a>，了解更多关于 HTML 表单的信息。
提示：访问我们的<a href="/css/css_form.asp">CSS 表单教程</a>，了解更多关于如何样式化表单元素的信息。
提示：访问我们的<a href="/css/css3_flexbox.asp">CSS Flexbox 教程</a>，了解更多关于弹性盒子布局模块的信息。
