HTML Forms

Allgemeines

Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet.

Allgemein

Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:

‎

<form>
.
Formelemente
.
</form>
‎

Das <form>-Element ist ein Container für verschiedene Arten von Eingabeelementen, wie z. B.: Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw.

Folgende, verschiedene HTML-Formularelemente sind innerhalb des <form>-Element möglich (unvollständig)

HTML-Form-Elemente

<input>

<select>

<select id="" name="">
  <option value="value 1">value 1</option>
  <option value="value 2">value 2</option>
  <option value="value 3">value 3</option>
</select>

<textarea>

<textarea name="message" rows="10" cols="30">
</textarea>

<select>

<label for="selection">Selection</label> <select id="selection" name="selection" size="4" multiple>

 <option value="option1">Option 1</option>
 <option value="option2">Option 2</option>
 <option value="option3">Option 3</option>

</select>

Vorlage

alle häufig verwendeten sichtbaren Elemente

HTML

<form action="/action_page.php">
    <label for="textfeld">Textfeld</label><br>
    <input type="text" id="text" name="Textfeld" value="text"><br>
    <label for="email">E-Mail</label><br>
    <input type="email">
    <label for="telephone">Telefonnummer</label><br>
    <input type="tel">
    <label for="selection">Selection</label>
    <select id="selection" name="selection" size="4" multiple>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <label for="checkbox">Checkbox</label><br>
    <input type="checkbox">
    <label for="radiobutton">Radiobutton</label><br>
    <input type="radio">
    <label for="Range">Range Slider</label><br>
    <input type="range">
    <label for="fileupload">Dateiupload</label><br>
    <input type="file">
    <label for="fileupload">Textbox</label><br>
    <textarea name="message" rows="10" cols="30"></textarea>
    <input type="submit" value="Submit">
    <input type="reset">
</form>

CSS

form, .ek-block-form {
  transition: opacity .5s 0s, max-height 1s .5s;
  opacity: 1;
  max-height: 2000px;

  &.form-sent {
  opacity: 0;
  overflow: hidden;
  max-height: 0;
  }

  .ek-block-form__inner-container {
    clear: both;
    margin: 10px 0 20px 0;

    label {
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 4px;
      display: inline-block;
      user-select: none;
    }

    input, textarea, select {
      border: 1px solid $color-grey;
      outline: none;
      display: block;
      box-sizing: border-box;
      width: 100%;

      box-shadow: none !important;
      &[type="submit"], &[type="button"], &[type="reset"] {
        border: 0px;
      }
    }

    input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="reset"] {
      display: inline-block;
      width: auto;
    }

    input[type="checkbox"], input[type="radio"] {
      margin: 10px;
    }

    input[type="file"] {
      background-color: $color-white;
      padding: 10px;
    }

    input[type="submit"], input[type="reset"] {
      border-radius: 10px;
      background-color: unset;
      text-align: center;
      width: fit-content;
      min-width: 130px;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.35px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    input[type="submit"] {
      background: linear-gradient(to bottom, $color-main, $color-main-dark);
      color: $color-white;
      &:hover {
        background: $color-main;
        color: $color-white;
      }
    }

    input[type="reset"] {
      border: 1px solid $color-main;
      background: $color-white;
      color: $color-main;
      &:hover {
        background-color: $color-main;
        color: $color-white;
      }
    }

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat, repeat;
      background-position: right 10px top 50%, 0 0;
      background-size: .65em auto, 100%;

      &::-ms-expand {
        display: none;
      }
    }

    textarea {
      resize: vertical;
    }


  }
}

.submit-msg {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s 0s, opacity .5s 1.5s;
  font-weight: bold;
  font-size: 120%;

  &.form-sent {
    max-height: 100px;
    opacity: 1;
  }
}

mit Gruppierung via Fieldset

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>