Basin | Powerful, easy-to-configure form backend

Der Formulardienst Basin arbeitet mit gewöhnlichen HTML-Formular-Elementen ohne dienstspezifische Zusätze.

Ihr könnt also folgendes Muster für Formulare auch als generelles Muster ansehen.

Wenn ihr bei Basin einen Endpoint, also ein Formular, erstellt, erhält ihr unter «Setup» einen «URL Endpoint». Diesen müsst ihr in eure action="" einfügen, method="POST" ergänzen und los gehts. Folgendes Formular erzeugt das darauf folgend abgebildete Resultat.

Wichtig: Bei Checkboxen und Radiobuttons muss den Inputs ein value mitgegeben werden. Andernfalls werden keine, bzw. unbrauchbare Daten transportiert.

Zu den Input-Typen: email, password, number und tel sind als Varianten von text zu verstehen. Ihr könntet alle diese Inputs als type="text" verbauen. Die Präzisierungen durch die Typen dient aber Validierung der Eingaben oder dem automatischen Ausfüllen und unterstützt die Zugänglichkeit generell.

 <form class="form" action="**<https://usebasin.com/f/[formcode]**>" method="POST">

  <div class="form__feld">
    <label for="vorname">Vorname</label>
    <input type="text" name="Vorname" id="vorname" placeholder="Marta">
  </div>

  <div class="form__feld">
    <label for="nachname">Nachname</label>
    <input type="text" name="Nachname" id="nachname" placeholder="Emmenegger">
  </div>

  <div class="form__feld">
    <label for="email">E-Mail</label>
    <input type="email" name="E-Mail" id="email" placeholder="fritz@muster.ch" required>
  </div>

  <div class="form__feld">
    <label for="password">Passwort</label>
    <input type="password" name="Passwort" id="password" placeholder="kiw[#%@">
  </div>

  <div class="form__feld">
    <label class="label" for="menge">Menge</label>
    <input type="number" id="menge" name="Menge">
  </div>

  <div class="form__feld">
    <label for="tageszeit">Tageszeit</label>
    <select name="Tageszeit" id="tageszeit">
      <option>Vormittag</option>
      <option>Nachmittag</option>
      <option>Abend</option>
    </select>
  </div>

  <div class="form__feld">
    <label for="newsletter">Newsletter abonnieren:</label>
    <input type="checkbox" name="Newsletter?" id="newsletter" value="Ja">
  </div>

  <div class="form__feld">
    <label>Status:</label>
    <label>
      <input type="radio" name="Status" value="Single"> Single
    </label>
    <label>
      <input type="radio" name="Status" value="Verheiratet"> Verheiratet
    </label>
    <label>
      <input type="radio" name="Status" value="Geschieden"> Geschieden
    </label>
    <label>
      <input type="radio" name="Status" value="Verwittwet"> Verwittwet
    </label>
  </div>

  <div class="form__feld">
    <label for="bemerkung">Bemerkungen</label>
    <textarea name="Bemerkungen" rows="4"></textarea>
  </div>

  <div class="form__feld">
    <input type="submit" value="Senden">
  </div>

  <div class="form__feld">
    <input type="reset" value="Zurücksetzen">
  </div>

</form>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/def7f954-c3bf-4524-a1b6-a7f2122a9ac9/Firefox_2019-11-02_at_21.51.09.png

Komplette Übung

36: Form für "usebasin"

Alternative

FORM.TAXI " Übertragung Ihrer Online-Formulare

CSS

Für Formulare eignen sich die Attribut-Selektoren sehr gut – vorallem dann, wenn das Formular nicht von Hand gebaut, sondern vielleicht per CMS generiert wurde.

Attribut-Selektoren

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea
  display: block
  width: 100%
  background-color: whitesmoke
  border: 1px solid black
  transition: background-color 0.2s ease-out
  padding: 0.3rem 0.7rem
  &:focus
    background-color: white

input::placeholder
  color: silver

input[type="submit"]
  display: inline-block
  background-color: black
  border: none
  color: white
  padding: 0.3rem 0.7rem

Selects

Um Selects als «aufklappbar» zu markieren, benötigen sie mindestens eine Art Pfeil als Hintergrundbild. Vergessen könnt ihr die Option-Elemente. Die sind sehr resistent gegen CSS. Die beiden gehighlighteten Zeilen sind zwingend, damit euer CSS überhaupt durchgehend greift.

select
  **-moz-appearance: none
  -webkit-appearance: none**
  display: block
  width: 100%
  border: 1px solid black
  background-color: white
  border-radius: 0
  padding: 0.3rem 0.7rem
  background-image: url('dreieck.svg')
  background-repeat: no-repeat
  background-position: right .7em top 50%
  background-size: .5em auto

Referenzen

A free tutorial to learn HTML and CSS