Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Untersuchung Verschiedener Eingabetypen in HTML | HTML-Formulare und Benutzereingaben
Ultimatives HTML

book
Untersuchung Verschiedener Eingabetypen in HTML

HTML stellt verschiedene <input>-Elemente bereit, mit denen unterschiedliche Datentypen von Benutzern erfasst werden können. Im Folgenden werden einige häufig verwendete Eingabetypen vorgestellt:

email und password

  • type="email": Wird für E-Mail-Eingabefelder verwendet, die eine gültige E-Mail-Adresse erfordern. Der Browser validiert die E-Mail-Adresse automatisch und fordert den Benutzer auf, ungültige Eingaben zu korrigieren;

  • type="password": Wird für Passwortfelder verwendet, bei denen der eingegebene Text aus Sicherheitsgründen maskiert wird. Mit den Attributen minLength und maxLength können Anforderungen an die Passwortlänge festgelegt werden.

html

index.html

copy
<form onsubmit="return false">
<!-- Email input -->
<label for="mail">Email</label>
<input type="email" id="mail" />
<!-- Password input -->
<label for="password">Password</label>
<input type="password" id="password" />
<button type="submit">Submit</button>
</form>

number

type="number": Wird für numerische Eingaben verwendet. Mit den Attributen min und max kann ein bestimmter Wertebereich festgelegt werden, und mit dem Attribut step kann ein bestimmter Schrittwert definiert werden.

html

index.html

copy
<form onsubmit="return false">
<label for="year">Year of birth</label>
<input type="number" min="1900" max="2023" id="year" />

<label for="height">Height with 0.1 step</label>
<input type="number" id="height" step="0.1" min="0.1" max="10.0" />

<button type="submit">Submit</button>
</form>

telephone

type="tel": Gedacht für die Eingabe von Telefonnummern, jedoch erfolgt keine Validierung der Eingabe. Die Überprüfung und Sicherstellung einer gültigen Telefonnummer obliegt dem Entwickler.

html

index.html

copy
<form onsubmit="return false">
<label for="phone">Phone number:</label>
<input type="tel" id="phone" />

<button type="submit">Submit</button>
</form>

Kontrollkästchen

type="checkbox": ermöglicht es dem Benutzer, eine oder mehrere Optionen aus vordefinierten Auswahlmöglichkeiten auszuwählen. Das Attribut checked sorgt dafür, dass ein Kontrollkästchen standardmäßig ausgewählt ist.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite season?</p>
<label>
Winter
<input type="checkbox" name="winter" value="winter" checked />
</label>
<label>
Spring
<input type="checkbox" name="spring" value="spring" />
</label>
<label>
Summer
<input type="checkbox" name="summer" value="summer" />
</label>
<label>
Fall
<input type="checkbox" name="fall" value="fall" />
</label>
</form>

radio

type="radio": Erstellt eine Auswahl von Optionen, bei der nur eine Option ausgewählt werden kann. Jede Option wird durch eine Optionsschaltfläche dargestellt, und die Auswahl einer Option hebt automatisch die Auswahl der anderen auf. Jede Optionsschaltfläche sollte ein eindeutiges value-Attribut zur Identifikation besitzen.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite food?</p>
<label>
<input type="radio" name="dish" value="pasta" checked />
Pasta
</label>
<label>
<input type="radio" name="dish" value="pizza" />
Pizza
</label>
<label>
<input type="radio" name="dish" value="burger" />
Burger
</label>
<label>
<input type="radio" name="dish" value="steak" />
Steak
</label>
</form>

range

type="range": Erstellt ein Schieberegler-Steuerelement, mit dem Benutzer einen Wert innerhalb eines bestimmten Bereichs auswählen können. Die Attribute min, max, step und value können verwendet werden, um das Verhalten zu definieren.

html

index.html

js

index.js

copy
<form onsubmit="return false">
<label for="day">Day of the week</label>
<input id="day" type="range" value="5" min="1" max="7" step="1" />
</form>
<p>Selected value: <span class="selected-value">5</span></p>
<script src="index.js"></script>

Hinweis

JavaScript steht in diesem Kurs nicht im Mittelpunkt, daher wird die dahinterliegende Logik ausgelassen.

Datum und Uhrzeit

  • type="date": ermöglicht die Auswahl eines Datums über ein Kalender-Popup;

  • type="time": ermöglicht die Eingabe einer Uhrzeit im 24-Stunden-Format;

  • type="datetime-local": kombiniert Datums- und Zeiteingabe.

Beispiel:

html

index.html

copy
<form onsubmit="return false">
<!-- Date input -->
<label for="date">Date</label>
<input type="date" min="1970-01-01" max="2070-01-01" id="date" />

<!-- Time input -->
<label for="time">Time</label>
<input type="time" id="time" />

<!-- Date and Time input -->
<label for="full-time">Date and Time</label>
<input type="datetime-local" min="1900-01-01T00:00" max="2000-01-01T00:00" id="full-time" />
</form>

Hinweis

Für ein einheitliches Erscheinungsbild auf verschiedenen Geräten werden häufig vorgefertigte Lösungen für Popup-Kalender und Zeiteingaben verwendet.

question mark

Was ist der Hauptunterschied zwischen den Eingabefeldern type="email" und type="password"?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 5

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

We use cookies to make your experience better!
some-alt