Das Typattribut gibt den Typ des Eingabeelements an.
Hinweis: Dieses Attribut ist nicht erforderlich, wir sind jedoch der Meinung, dass Sie es immer verwenden sollten.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>Farbauswahl</title></head><body> <input type=color id=color></body><script> document.querySelector(#color).onchange = function () { document.getElementById('color').click(); // Zum Auslösen muss ein Klickereignis hinzugefügt werden, andernfalls kann die Farbänderung nicht durch Klicken auf die Schaltfläche „OK“ ausgelöst werden .body.style.background = this.value; }</script></html> Werfen wir einen Blick auf das HTML 5-Typattribut <input>Attributwert
| Wert | beschreiben |
|---|---|
| Taste | Definieren Sie anklickbare Schaltflächen (wird hauptsächlich mit JavaScript zum Starten von Skripten verwendet) |
| Kontrollkästchen | Checkboxen definieren. |
| Farbe | Definieren Sie den Farbwähler. |
| Datum | Datumsfelder definieren (mit Kalendersteuerung) |
| Datum/Uhrzeit | Datumsfelder definieren (mit Kalender- und Zeitsteuerung) |
| datetime-local | Datumsfelder definieren (mit Kalender- und Zeitsteuerung) |
| Monat | Definieren Sie den Monat des Datumsfelds (mit Kalendersteuerung) |
| Woche | Definieren Sie die Woche des Datumsfelds (mit Kalendersteuerung) |
| Zeit | Stunden, Minuten und Sekunden eines Datumsfeldes definieren (mit Zeitsteuerung) |
| Definieren Sie das für E-Mail-Adressen verwendete Textfeld | |
| Datei | Definieren Sie Eingabefelder und Durchsuchen-Schaltflächen für Datei-Uploads |
| versteckt | Definieren Sie versteckte Eingabefelder |
| Bild | Bild als Senden-Button definieren |
| Nummer | Definieren Sie ein numerisches Feld mit einem Spinner-Steuerelement |
| Passwort | Definieren Sie das Passwortfeld. Zeichen im Feld werden maskiert. |
| Radio | Optionsfelder definieren. |
| Reichweite | Definieren Sie ein numerisches Feld mit einem Schieberegler. |
| zurücksetzen | Definieren Sie die Reset-Taste. Mit der Schaltfläche „Zurücksetzen“ werden alle Formularfelder auf ihre ursprünglichen Werte zurückgesetzt. |
| suchen | Definieren Sie das für die Suche verwendete Textfeld. |
| einreichen | Definieren Sie die Schaltfläche „Senden“. Die Schaltfläche „Senden“ sendet Daten an den Server. |
| Tel | Definieren Sie ein Textfeld für Telefonnummern. |
| Text | Standard. Definieren Sie ein einzeiliges Eingabefeld, in das Benutzer Text eingeben können. Der Standardwert beträgt 20 Zeichen. |
| URL | Definiert das für die URL verwendete Textfeld. |
Das Obige ist der Beispielcode des vom Herausgeber eingeführten neuen Typattribut-Farbwählers für die HTML5-Eingabe. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten Zeit. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!