Überschrift strassencoder.ch
Logo strassencoder.ch
Überschrift Formulare

Was sind Formulare in HTML

Formulare sind ein wichtiger Bestandteil einer Webseite um mit den Usern zu kommunizieren. Um Inputs von Besuchern zu erhalten brauchen sie Formulare:

Arten von Formularen:
Kontaktformulare
Suchformulare
Bestellformulare
Das Formular beginnt mit dem Element <form> und endet mit </form>. Ein HTML <form> beinhaltet Formular-Elemente. Element Knopf(Button)
<input type="button" onclick="alert('Hallo User!')" value="Klick mich!">
Überschrift Output-Element
<form action="action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)" method="get">
500
<input type="range" id="a" name="a" value="550" min="500" max="600">
600
+
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br>
<input type="submit">
<input type="reset">
</form>
500 600
+

=


Überschrift Textarea-Element
<p style="color: black;">Hinterlassen Sie eine Nachricht:</p>
<form action="action_page.php" method="post">
<textarea cols="15" rows="10" name="message" required></textarea>
<input type="submit" value="Submit">
<input type="reset">
</form>

Hinterlassen Sie eine Nachricht:



Select Element
<form action="action_page.php" method="get">
<label for="Länder">Aus welchem Land kommst du:</label>
<select id="Länder" name="Länder">
<option value="Schweiz">Schweiz</option>
<option value="Österreich">Österreich</option>
<option value="Deutschland">Deutschland</option>
<option value="Frankreich">Frankreich</option>
<option value="Italien">Italien</option>
<option value="Spanien">Spanien</option>
<option value="Portugal">Portugal</option>
<option value="Belgien">Belgien</option>
<option value="Serbien">Serbien</option>
<option value="Griechenland">Griechenland</option>
<option value="Türkei">Türkei</option>
<option value="England">England</option>
<option value="aus einem anderen Land....">aus einem anderen Land</option>
</select>
<input type="submit">
<input type="reset">
</form>


Überschrift Datalist-Element
<p style="color: black;">Wähle eine Farbe aus:</p>
<form action="action_page.php" method="get">
<input list="farben" name="farbe" required>
<datalist id="farben">
<option value="Anthrazit">
<option value="Braun">
<option value="Citrusgelb">
<option value="Dunkelblau">
<option value="Elfenbein">
<option value="Feuerrot">
<option value="Grün">
<option value="Hellblau">
<option value="Indischgelb">
<option value="Jadegrün">
<option value="Kastanienbraun">
<option value="Lachsfarbe">
<option value="Magenta">
<option value="Neongelb">
<option value="Orange">
<option value="Pink">
<option value="Quarzgrau">
<option value="Rot">
<option value="Schwarz">
<option value="Türkis">
<option value="Ultramarin">
<option value="Violett">
<option value="Weinrot">
<option value="Zitronengelb">
</datalist>
<input type="submit">
<input type="reset">
</form>

Wähle eine Farbe aus:



Überschrift Input-Elemente

Es gibt unterschiedliche type="....." von Input-Elementen.

<input type="button"> <input type="checkbox"> <input type="color"> <input type="date">
<input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden">
<input type="image"> <input type="month"> <input type="number"> <input type="password">
<input type="radio"> <input type="range"> <input type="reset"> <input type="search">
<input type="submit"> <input type="tel"> <input type="text"> <input type="time">
<input type="url"> <input type="week">

Übersicht über input-Attribute:

size Mit dem size-Attribut können Sie bei den Typen text, search, tel, url, email, oder password die Länge in Zeichen festlegen, bei anderen Typen wird es ignoriert.
min, max Mit dem min bzw. max-Attributen legen Sie bei numerischen oder Datums- und Zeitangaben einen Mindest- bzw. Maximalwert fest.
step Das step-Attribut legt fest, in welchen Schritten eine numerische oder Datums- und Zeitangabe eingegeben werden kann. Der Wert any bedeutet, dass es keine Schrittweite gibt, also jeder Wert eingegeben werden kann.
list Das list-Attribut verknüpft ein Suchfeld mit einer Liste möglicher Suchbegriffe in einem datalist-Element. Der Wert des list-Attribut muss der id des datalist-Elements entsprechen.
multiple Mit dem multiple-Attribut können Sie bei Datei-Uploads und Emaileingaben mehrfache Eingaben vornehmen.
readonly Das readonly-Attribut legt fest, dass der vorgeschlagene Wert nur ausgelesen und nicht verändert werden können soll.
disabled Das disabled-Attribut legt fest, dass das Eingabefeld weder benutzt werden können soll, noch seine Inhalte bei einer Datenübertragung mitgeschickt werden sollen.
placeholder Mit dem placeholder-Attribut können Sie eine Beispielangabe auf das auszufüllende Feld setzen. Er verschwindet, sobald ein Zeichen im Eingabefeld steht.
autofocus Mit dem autofocus-Attribut wandert der Cursor beim Laden der Seite automatisch auf dieses Feld. Sie können dieses Attribut für die interaktiven Form-Elemente button, input (außer type="hidden"), textarea und select verwenden.
autocomplete Das autocomplete-Attribut zeigt dem Browser, ob ein Eingabefeld automatisch ausgefüllt werden soll.
minlength, maxlength Durch das maxlength- Attribut können Sie eine Maximallänge der Eingabe festlegen. Analog dazu können Sie mit dem minlength-Attribut eine Mindestlänge der Eingabe festlegen.
required Durch die Angabe von required kann eine Eingabe erzwungen werden. Ein vorzeitiges Absenden des Formulars erzeugt eine browsereigene Fehlermeldung und das noch auszufüllende Formularfeld wird hervorgehoben.
pattern Ein pattern ist ein Suchmuster, genauer ein regulärer Ausdruck. Es wird geprüft, ob der Inhalt auf dieses Suchmuster zutrifft.

Datenübertragung zum Server

<form action="action_page.php" method="post">:
Das Attribut action erhält als Wert eine URL (Adresse), an welche beim Klicken auf den submit-Button Daten gesendet werden – wodurch der Request ausgelöst wird. Methode POST oder GET? Es gibt zwei unterschiedliche HTTP-Methoden, wie die Formulardaten an den Server übermittelt werden. Diese werden mit POST und GET bezeichnet. Ohne hier auf die technischen Aspekte einzugehen, gilt die Faustregel: Ist es der vorrangige Sinn des Formulars, Daten vom Server abzurufen (z.B. eine Suchanfrage), so verwendet man GET; ist der Hauptzweck eher das Übermitteln von Daten zum Server (z.B. das Abschicken einer Bestellung an einen Online-Shop), so verwendet man POST. Überschrift type=text
<p style="color: black">Geben sie ihren Vorname und Nachname ein:</p>
<form action="action_page.php" method="post">
<label for="fname">Vorname:</label>
<input type="text" id="fname" name="fname" size="15" pattern="^[a-zA-Z-\s]{2,30}$" required>
<label for="lname">Nachname:</label>
<input type="text" id="lname" name="lname" size="15" pattern="^[a-zA-Z-\s]{2,30}$" required>
<input type="submit" value="Submit">
<input type="reset">
</form>

Geben sie ihren Vorname und Nachname ein:






Überschrift type=password
<p style="color: black">Geben sie Ihren Benutzername und das Passwort ein:</p>
<form action="action_page.php" method="post" autocomplete="on">
<label for="bname">Benutzername</label>
<input type="text" id="bname" name="bname" pattern="^[a-zA-Z-\s]{2,30}$" required>
<label for="passwort">Passwort</label>
<input type="password" id="passwort" name="password" minlength="6" maxlength="15" required>
<input type="submit" value="Submit">
<input type="reset">
</form>

Geben sie Ihren Benutzername und das Passwort ein:






Überschrift type=tel
<form action="action_page.php" method="post">
<label for="phonenr">Geben Sie ihre Mobilenummer ein:</label>
<input type="tel" id="phonenr" name="MobileNummer" placeholder="+41 080 00 00" pattern="^[+]{1}[0-9\s]{12,16}$" required>
<input type="submit" value="Submit">
<input type="reset">
</form>




Überschrift type=url
<form action="action_page.php" method="post">
<label for="url">Geben sie ihre url ein:</label>
<input type="url" id="url" name="deine-url" placeholder="https://www.strassencoder.ch" size="26" pattern="^[https://]{8}[www.]{4}[a-zA-Z0-9]{1,40}[.]{1}[a-zA-Z]{2,6}$" required>
<input type="submit" value="Submit">
<input type="reset">
</form>




Überschrift type=e-mail
<form action="action_page.php" method="post">
<label for="email">Geben sie ihre E-Mail Adresse ein:</label>
<input type="email" id="email" name="email" placeholder="hans_muster@hispeed.ch" size="26" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" required>
<input type="submit" value="Submit">
<input type="reset">
</form>




Überschrift type=nummer
<p style="color:black">Geben sie ihre Grösse und ihr Gewicht ein:</p>
<form action="action_page.php" method="get">
<label for="groesse">Größe:</label>
<input type="number" id="groesse" name="groesse" min="100" max="220" step="1" value="175">cm
<label for="gewicht">Gewicht:</label>
<input type="number" id="gewicht" name="gewicht" min="30" max="225" step="1" value="75">kg
<input type="submit" value="Submit">
<input type="reset">
</form>

Geben sie ihre Grösse und ihr Gewicht ein:


cm

kg

Überschrift type=date
<form action="action_page.php" method="post">
<label for="gebdat">Geben Sie Ihr Geburtsdatum ein:</label>
<input type="date" id="gebdat" name="gebdat" required>
<input type="submit" value="Submit">
<input type="reset">
</form>




Überschrift type=radio
<p style="color:dodgerblue">Geben Sie Ihre Zahlungsweise an:</p>
<form action="action_page.php" method="post">
<fieldset>
<input type="radio" id="mc" name="Zahlmethode" value="Mastercard" checked="checked">
<label for="mc">Mastercard</label>
<input type="radio" id="vi" name="Zahlmethode" value="Visa">
<label for="vi">Visa</label>
<input type="radio" id="pp" name="Zahlmethode" value="PayPal">
<label for="pp">PayPal</label><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>

Geben Sie Ihre Zahlungsweise an:





Überschrift type=checkbox
<script>
function Validate(){
if(!validateForm()){
alert("Sie haben nichts markiert!!! ");
return false;
}
return true
}
function validateForm()
{
var c=document.getElementsByTagName('input');
for (var i = 0; i; c.length; i++){
if (c[i].type=='checkbox')
{
if (c[i].checked){return true}
}
}
return false;
}
</script>
<form action="action_page.php " onsubmit="return Validate()" method="get">
<h3>Kreuzen Sie die gewünschte Pasta an:</h3>
<fieldset>
<table>
<tr>
<td>
<input type="checkbox" id="pomodoro" name="pasta" value="Spaghetti Pomodoro">
<label for="pomodoro">Spaghetti Pomodoro</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="bolognese" name="pasta" value="Spaghetti Bolognese">
<label for="bolognese">Spaghetti Bolognese</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="carbonara" name="pasta" value=" Spaghetti alla Carbonara">
<label for="carbonara">Spaghetti alla Carbonara</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="penne" name="pasta" value="Penne all‘arrabiata">
<label for="penne">Penne all‘arrabiata</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="tortellini" name="pasta" value="Tortellini Spinaci">
<label for="tortellini">Tortellini Spinaci</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="gnocchi" name="pasta" value="Gnocchi Maison">
<label for="gnocchi">Gnocchi Maison</label>
</td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit ">
<input type="reset" value="Reset">
</form>

Kreuzen Sie die gewünschte Pasta an:

Überschrift type=color
<form action="action_page.php" method="get">
<label for="lieblingsfarbe">Wähle deine Lieblingsfarbe:</label>
<input type="color" id="lieblingsfarbe" name="lieblingsfarbe" value="#1e90ff">
<input type="submit" value="Submit">
<input type="reset" value="Reset" ">
</form>



Überschrift type=datetime-local
<p style="color:black;text-align:center">Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.</p>
<form action="action_page.php" method="get">
<label for="ferien">Wann fährst du das nächste mal in die Ferien (Datum und Uhrzeit):</label>
<input type="datetime-local" id="ferien" name="ferien" required>
<input type="submit" value="Submit">
<input type="reset" value="reset">
</form>

Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.



Überschrift type=file
<form action="action_page.php" method="get">
<label for="meineDatei">Wähle ein Datei:</label>
<input type="file" id="meineDatei" name="meineDatei" multiple required><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>



Überschrift type=month
<p style="color:black;text-align:center">Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.</p>
<form action="action_page.php" method="get">
<label for="geburtstagsMonat">Wann hast du Geburtstag: (Monat und Jahr):</label>
<input type="month" id="geburtstagsMonat" name="geburtstagsMonat" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.



Überschrift type=range
<form action="action_page.php" method="get" oninput="x.value=parseInt(vol.value)">
<label for="vol">0</label>
<input type="range" name="vol" id="vol" min="0" value="50" max="100">
<label for="vol">100</label><br>
<output name="x" for="vol"></output><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>


Überschrift type=search
<form id="search" method="get" action="suchen.php">
<label for="suchbegriff">Auf https://www.strassencoder.ch suchen:</label><br>
<input type="search" name="q" id="suchbegriff" /><br>
<input type="submit" value="suchen"/>
</form>
Überschrift type=time
<p style="color:black;text-align:center">Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.</p>
<form action="action_page.php" method="get">
<label for="chooseTime">Wähle die Zeit aus:</label>
<input type="time" id="chooseTime" name="chooseTime" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.



Überschrift type=week
<p style="color:black;text-align:center">Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.</p>
<form action="action_page.php" method="get">
<label for="woche">Wähle eine Woche aus:</label>
<input type="week" id="woche" name="woche" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Schauen Sie sich dieses Formular in Opera, Chrome oder Edge an.



Überschrift strassencoder.ch