Sådan oprettes: Formular med ikon

Sådan oprettes et ikonformular

Første trin - tilføj HTML:

Brug <form>-elementet til at håndtere input. Læs mere om dette i vores PHP-tutorial.

Så tilføj input-kontroller til hver felt:

<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>

Second step - Add CSS:

* {box-sizing: border-box;}
/* Set the style of the input container */
.input-container {
  Display: flex;
  Width: 100%;
  Margin-bottom: 15px;
}
/* Set the style of the form icon */
.icon {
  Padding: 10px;
  Background: dodgerblue;
  Color: white;
  Min-width: 50px;
  Text-align: center;
}
/* Set the style of the input field */
.input-field {
  Width: 100%;
  Padding: 10px;
  Outline: none;
}
.input-field:focus {
  Border: 2px solid dodgerblue;
}
/* Set the style of 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;
}

Prøv det selv

Relaterede sider

Tilrettelæggelse:HTML formulær

Tilrettelæggelse:CSS formulær

Tilrettelæggelse:CSS Flexbox