Wie erstellt man: Formulare mit Symbolen

Wie erstellt man ein Symbolformular

Schritt 1 - Fügen Sie HTML hinzu:

Verwenden Sie das <form>-Element, um Eingaben zu verarbeiten. Mehr Informationen finden Sie in unserem PHP-Tutorial.

Dann fügen Sie für jedes Feld Eingabekontrollen hinzu:

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

Probieren Sie es selbst aus

Verwandte Seiten

Tutorials:HTML-Formular

Tutorials:CSS-Formular

Tutorials:CSS-Flexbox