Je, haujui kuzungumza kuhakikisha kilele cha muungano kwa ikoni: muungano kwa ikoni

Je, haujui kuzungumza kuhakikisha kilele cha muungano kwa ikoni.

Mwaka mmoja - Ongeza HTML:

Tumia elementi ya <form> kuendeleza muungano. Unaweza kueleza jueleza zaidi katika mafunzo yetu ya PHP.

Kisha ya kila kiini cha kibali:

<form action="/action_page.php">
  <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>

第二步 - 添加 CSS：

* {盒模型：边框盒模型;}
/* 设置输入容器的样式 */
.input-container {
  显示：弹性盒模型;
  宽度：100%;
  底部外边距：15px;
}
/* 设置表单图标的样式 */
.icon {
  填充：10px;
  背景： DodgerBlue;
  颜色：白色;
  最小宽度：50px;
  文本对齐：居中;
}
/* 设置输入字段的样式 */
.input-field {
  宽度：100%;
  填充：10px;
  轮廓：无;
}
.input-field:focus {
  边框：2px 实线 DodgerBlue;
}
/* 设置提交按钮的样式 */
.btn {
  背景颜色： DodgerBlue;
  颜色：白色;
  填充：15px 20px;
  边框：无;
  光标：指针;
  宽度：100%;
  透明度：0.9;
}
.btn:hover {
  透明度：1;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单

教程：CSS Flexbox