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>

<input type="radio">

• name muss vergeben sein, da sonst die einfachauswahl nicht funktioniert

<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

PHP (inkl. HTML & JS)

<?php defined( 'ABSPATH' ) or die(); ?>

<form name="my-new-form" onsubmit="submitForm(this);" class="ek-block-form my-form" action="<?php echo get_site_url(); ?>/wp-json/wp/v2/submit-contact-request">
    <div class="ek-block-form__inner-container">
        <label for="textfeld">Textfeld</label>
        <input type="text" id="text" name="Textfeld" value="">
    </div>
    <div class="ek-block-form__inner-container">
        <label for="email">E-Mail</label>
        <input type="email" required>
    </div>
    <div class="ek-block-form__inner-container">
        <label for="telephone">Telefonnummer</label>
        <input type="tel">
    </div>
    <div class="ek-block-form__inner-container">
        <label for="selection">Selection</label>
        <select id="selection" name="selection" size="">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="checkbox" id="checkbox1" name="" value="">
        <label for="checkbox1">checkbox1</label><br>
        <input type="checkbox" id="checkbox2" name="" value="">
        <label for="checkbox2">checkbox1</label><br>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="radio" id="radiobutton1" name="radio" value="">
        <label for="radiobutton1">Radiobutton 1</label><br>
        <input type="radio" id="radiobutton2" name="radio" value="">
        <label for="radiobutton2">Radiobutton 2</label><br>
        <input type="radio" id="radiobutton3" name="radio" value="">
        <label for="radiobutton3">Radiobutton 3</label>
    </div>
    <div class="ek-block-form__inner-container">
        <label for="Range">Range Slider</label>
        <input type="range">
    </div>
    <div class="ek-block-form__inner-container">
        <label for="fileupload">Dateiupload</label>
        <input type="file">
    </div>
    <div class="ek-block-form__inner-container">
        <label for="message">Textbox</label>
        <textarea name="message" rows="10" cols="30"></textarea>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </div>
</form>


<div class="form-submit-msg submit-msg">
    Vielen Dank für Ihre Anfrage!
</div>


<script>
    let submitForm = function(form) {
        event.preventDefault();

        let FD, XHR;
        XHR = new XMLHttpRequest();
        FD = new FormData(form);

        XHR.addEventListener('load', function(event) {
            if (event.target.status === 200) {
                document.querySelector('form.my-form').classList.add("form-sent");
                document.querySelector('.form-submit-msg').classList.add("form-sent");
            } else {
                let json = JSON.parse(event.target.responseText);

                let msg;
                if (json.data) {
                    msg = json.data.message;
                } else {
                    msg = json.message;
                }

                return alert(msg);
            }
        });

        XHR.addEventListener('error', function (event) {
            return alert('Fehler beim Versenden des Formulars!');
        });

        XHR.open('POST', form.getAttribute('action'));
        XHR.send(FD);

        return false;
    };
</script>

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>