HTML -Eingangstypen komplette Anleitung

Zu den Texteingangstypen gehören Text, Kennwort, E -Mail, Tel, URL und Suche, mit denen verschiedene Textdaten verarbeitet und eine Formatüberprüfung bereitgestellt werden. 2. Numerische und Bereicheingangstypen wie Anzahl, Bereich, Datum, Uhrzeit, datetime-lokaler, Monat und Woche, die Eingabe und Einschränkungen von digitalen und zeitlichen Daten unterstützen; 3. Die Auswahl- und Dateieingangstypen enthalten Kontrollkästchen, Radio und Datei, die für mehrere Auswahl, Einzelauswahl und Datei -Upload verwendet werden. 4. Taste und versteckte Eingangstypen inklusive Taste, Senden, Zurücksetzen und Versteckt, die für Formularvorgänge und Speicherung unsichtbarer Daten verwendet werden; 5. Erweiterte Eingangstypen Farbe und Bild bieten Farbauswahl- und Bildübermittlungsfunktionen; Alle Eingabetypen sollten mit Platzhalter, Erforderlich, Autofokus und andere Attribute kombiniert werden, um die Benutzererfahrung zu verbessern und mit der serverseitigen Überprüfung zusammenzuarbeiten, um die Datensicherheit zu gewährleisten und letztendlich die Zugänglichkeit, Verfügbarkeit und Genauigkeit des Formulars zu verbessern.

HTML -Eingangstypen sind für das Erstellen interaktiver Formulare auf Webseiten unerlässlich. Sie definieren, welche Art von Datennutzern eingeben können, wie es angezeigt wird und wie es validiert wird. Mit der Entwicklung von HTML5 haben sich die Eingabetypen erheblich erweitert, was eine bessere Benutzererfahrung und eine integrierte Validierung bietet. Nachfolgend finden Sie eine vollständige Anleitung zu allen Standard -HTML -Eingangstypen, deren Verwendungen und Schlüsselattributen.

1. Texteingangstypen

Diese werden für die Texteingabe verwendet und enthalten verschiedene Variationen.

type="text"

• Der Standardeingangstyp.
• Wird für einleitende Texteingaben verwendet.
• Beispiel:

   <Eingabe type = "text" placeholder = "Geben Sie Ihren Namen ein">

type="password"

• Masken Eingabezeichen (normalerweise mit Punkten oder Sternchen).
• Deaktiviert in einigen Fällen automatisch Browser automatisch.
• Beispiel:

   <Eingabe type = "Passwort" Placeholder = "Passwort eingeben">

type="email"

• Validiert Eingaben als gut geformte E-Mail-Adresse.
• Mobile Browser zeigen möglicherweise eine E-Mail-freundliche Tastatur.
• Beispiel:

   <Eingabe type = "E -Mail" placeholder = "name@example.com">

type="tel"

• Für Telefonnummern entwickelt.
• Löst eine numerische Tastatur auf mobilen Geräten aus.
• Keine automatische Validierung, es sei denn, sie werden mit pattern verwendet.
• Beispiel:

   <Eingabe type = "tel" muster = "[0-9] {10}" placeholder = "123-456-7890">

type="url"

• Erwartet eine gültige URL (z. B. https://example.com ).
• Validiert das Format bei Formulareinreichung.
• Beispiel:

   <Eingabe type = "url" placeholder = "https://www.example.com">

type="search"

• Semantik für Suchfelder.
• Kann in einigen Browsern eine Klärtaste anzeigen.
• Das Styling kann sich leicht vom text unterscheiden.
• Beispiel:

   <Eingabe type = "suche" placeholder = "such ...">

2. Numerische und Bereicheingangstypen

Wird für Zahlen, Daten und Bereiche verwendet.

type="number"

• Akzeptiert nur numerische Eingaben.
• Kann min , max und step umfassen.
• Beispiel:

   <Eingabe type = "number" min = "1" max = "100" step = "1" value = "10">

type="range"

• Slider -Steuerung zur Auswahl eines Wertes innerhalb eines Bereichs.
• Weniger Präzision als number , gut für Eingaben wie Volumen oder Bewertung.
• Häufig mit <output> verwendet, um den Wert anzuzeigen.
• Beispiel:

   <Eingabe type = "Bereich" min = "0" max = "10" value = "5" oninput = "this.NextElementSibling.Value = this.value">
  <ausgabe> 5 </output>

type="date"

• Öffnet einen Date Picker.
• Format: YYYY-MM-DD .
• Beispiel:

   <Eingabe type = "Datum">

type="time"

• Wählen Sie Zeit (Stunden und Minuten).
• Unterstützt min , max und step .
• Beispiel:

   <Eingabe type = "Zeit" min = "09:00" max = "18:00">

type="datetime-local"

• Kombiniert Datum und Uhrzeit ohne Zeitzone.
• Beispiel:

   <input type = "datetime-local">

type="month"

• Wählt ein Monat und ein Jahr aus.
• Format: YYYY-MM .
• Beispiel:

   <Eingabe type = "Monat">

type="week"

• Wählt eine Woche und ein Jahr aus.
• Format: YYYY-W## .
• Beispiel:

   <input type = "woche">

3.. Auswahl- und Dateieingangstypen

Auswahl aus Optionen oder Hochladen von Dateien.

type="checkbox"

• Ermöglicht mehrere Auswahlmöglichkeiten.
• Verwenden Sie die Standardauswahl checked .
• Beispiel:

   <Eingabe type = "CheckBox" name = "Zinserteil" value = "codierung"> codieren
  <Eingabe type = "CheckBox" name = "Zinserteil" value = "Design" geprüft> Design

type="radio"

• Ermöglicht eine Auswahl aus einer Gruppe.
• Alle Eingaben in der Gruppe müssen denselben name teilen.
• Beispiel:

   <Eingabe type = "Radio" name = "Geschlecht" value = "männlich"> männlich
  <Eingabe type = "Radio" name = "Geschlecht" value = "weiblich"> weiblich

type="file"

• Kann Benutzer eine oder mehrere Dateien hochladen.
• Verwenden Sie accept , um Dateitypen einzuschränken.
• Fügen Sie multiple für mehrere Dateien hinzu.
• Beispiel:

   <Eingabe type = "Datei" "Accept =" Image/*"multiple>

4. Taste und versteckte Eingangstypen

Für Aktionen und das Speichern unsichtbarer Daten.

type="button"

• Eine anklickbare Schaltfläche ohne Standardverhalten.
• Normalerweise mit JavaScript verwendet.
• Beispiel:

   <input type = "button" value = "klicken Sie mich" onclick = "alert (&#39;hello&#39;)">

type="submit"

• Reicht das Formular dem Server ein.
• Standardverhalten: Formulardaten senden.
• Beispiel:

   <input type = "surug" value = "Formular"> Senden ">

type="reset"

• Setzt alle Formfelder auf ihre Anfangswerte zurück.
• Verwenden Sie sparsam - kann Benutzer frustrieren.
• Beispiel:

   <Eingabe type = "reset" value = "reset">

type="hidden"

• Speichert Daten, die für Benutzer nicht sichtbar sind.
• Oft verwendet, um Metadaten zu übergeben (z. B. Benutzer -ID, Sitzungstromtoken).
• Beispiel:

   <Eingabe type = "Hidden" name = "userId" value = "12345">

5. Fortgeschrittene und spezialisierte Eingangstypen

Neuere Typen mit spezifischen Zwecken.

type="color"

• Öffnet einen Farbwähler.
• Wert ist eine Kleinbuchstabenfarbe (z. B. #ff0000 ).
• Beispiel:

   <Eingabe type = "color" value = "#ff0000">

type="image"

• Fungiert mit einem Bild als Schaltfläche Senden.
• Benötigt src und alt .
• Sendet Klickkoordinaten ( x , y ) mit Formulardaten.
• Beispiel:

   <Eingabe type = "Image" Src = "subng" Alt = "subieren">

Schlüsselattribute, die vielen Eingabetypen gemeinsam sind

• placeholder - Hinweistext zeigte sich, wenn es leer ist.
• required - macht Feld obligatorisch.
• disabled - deaktiviert die Eingabe.
• readonly - verhindert die Bearbeitung, gibt aber den Wert ein.
• autofocus - Fokussierung auf die Seitenlast.
• autocomplete - Controls Browser Autofill (z. B. on , off , name , email ).
• pattern - Regelmäßiger Ausdruck für die Validierung (funktioniert mit text , tel , email usw.).

Browserunterstützung und Fallbacks

Alte Browser unterstützen möglicherweise keine neueren HTML5 -Eingabetypen (wie date , color , email ). Wenn nicht unterstützt:

• Browser fallen normalerweise auf type="text" zurück.
• Verwenden Sie immer die serverseitige Validierung-verlassen Sie sich niemals ausschließlich auf clientseitige Eingangstypen.

Für maximale Kompatibilität:

• Verwenden Sie bei Bedarf Polyfills für date oder color .
• Testformulare über Browser.

Zusammenfassung aller HTML -Eingangstypen

Die Verwendung des richtigen Eingangstyps verbessert die Zugänglichkeit, Benutzerfreundlichkeit und Validierung. Kombinieren Sie sie immer mit richtigen Beschriftungen ( <label for="id"></label> ) und betrachten Sie mobile UX. Während HTML5-Eingangstypen leistungsstark sind, können Sie auf der Serverseite validieren. Die clientseitigen Funktionen können umgangen werden.

Wählen Sie im Grunde den Eingabetyp aus, der Ihren Datenanforderungen am besten entspricht, und lassen Sie den Browser Ihnen helfen, die Richtigkeit durchzusetzen.

Das obige ist der detaillierte Inhalt vonHTML -Eingangstypen komplette Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!