Bearbeiten von „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:
‎<syntaxhighlight lang="html">
<form>
.
Formelemente
.
</form>
‎</syntaxhighlight>

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="checkbox"> ===

=== <input type="text"> ===

=== <input type="radio"> ===

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

=== <input type="submit"> ===

=== <input type="button"> ===

=== <select> ===

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== <textarea> ===

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

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

== <textarea> ==

= Vorlage =

== alle häufig verwendeten sichtbaren Elemente ==

=== PHP Funktion ==

<syntaxhighlight lang="php">
<?php defined( 'ABSPATH' ) or die();

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/// FORMULAR /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function process_form_request()
{
    if (!isset($_POST['datenschutz']) || ($_POST['datenschutz'] !== "akzeptiert"))
        return wp_send_json_error(array('message' => 'Bitte akzeptiere unsere Datenschutzbestimmungen!'), 403);

    // Anpassen je nach Empfänger
    $receiver = 'sebastian.kalms@elsterkind.de';
    $subject = 'Kontaktanfrage BALANCE 7 Website';

    // Zuweisung der Formulardaten
    $textfeld   = $_POST['textfeld'];
    $email      = $_POST['email'];
    $phone      = $_POST['telefon'];
    $selection  = $_POST['selection'];
    $checkbox1  = $_POST['checkbox1'];
    $checkbox2  = $_POST['checkbox2'];
    $radio      = $_POST['radio'];
    $range      = $_POST['range'];
    $message    = $_POST['textbox'];
    $privacy    = $_POST['datenschutz'];

    // E-Mail-Inhalt
    $body = <<<BODY
Neue Kontaktanfrage

Textfeld: $textfeld
E-Mail: $email 
Telefon: $phone
Auswahl: $selection
Checkbox 1: $checkbox1
Checkbox 2: $checkbox2
Radio Button: $radio
Range: $range

Textbox:
$message

Datenschutz: $privacy

_________________
Diese Nachricht wurde automatisch erstellt
BODY;

    $headers = array('Content-Type: text/plain; charset=UTF-8');

    // Versenden der E-Mail
    $res = wp_mail($receiver, $subject, $body, $headers);
    if ($res) {
        return wp_send_json(array('message' => 'Vielen Dank für Deine Anfrage!'), 200);
    } else {
        return wp_send_json_error(array('message' => 'Fehler beim Versenden des Formulars!'), 500);
    }
}

// Hinzufügen eines Rest Api Endpunktes
add_action('rest_api_init', function () {
    // Kontaktanfrage
    register_rest_route('wp/v2', 'submit-form-request', array(
        'methods' => 'POST',
        'callback' => 'process_form_request'
    ));
});

=== PHP (inkl. HTML & JS) ===

<syntaxhighlight lang="html">
<?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>
</syntaxhighlight>

=== CSS ===

<syntaxhighlight lang="scss">

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

</syntaxhighlight>

== mit Gruppierung via Fieldset ==

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== CSS ==