如何 - 带图标的表单

了解如何创建带有图标的表单。

登记

如何创建图标表单

步骤1）添加HTML：

使用 <form> 元素来处理输入。您可以在我们的网站中了解更多相关信息PHP教程。然后为每个字段添加输入：

示例

<form action="/action_page.html">
<h2>Register Form</h2>
<div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>

<div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
</div>

<div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
</div>

<button type="submit" class="btn">Register</button>
</form>

步骤2）添加CSS：

示例

* {box-sizing: border-box;}

/* Style the input container */
.input-container {
display: flex;
width: 100%;
margin-bottom: 15px;
}

/* Style the form icons */
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}

/* Style the input fields */
.input-field {
width: 100%;
padding: 10px;
outline: none;
}

.input-field:focus {
border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

.btn:hover {
opacity: 1;
}

亲自试一试 »

提示：去我们的HTML 表单教程了解有关 HTML 表单的更多信息。

提示：去我们的CSS 表单教程了解有关如何设置表单元素样式的更多信息。

提示：去我们的CSS Flexbox 教程了解有关灵活框布局模块的更多信息。