Die Kundenüberprüfung ist eine der am häufigsten verwendeten Funktionen von Web -Client -Programmen. HTML5 hat uns bereits die Funktion der Formularüberprüfung zur Verfügung gestellt. Warum es nicht beliebt ist, es wird schätzungsweise kompatibel und der Stil zu hässlich.
Im Folgenden erstellen wir Schritt für Schritt eine Formüberprüfung von HTML5 und CSS3 unter Verwendung von HTML und CSS.
Das Folgende lautet wie folgt:
Schritt 1: Sortieren Sie das Feld und Typ -Bestätigung und TypZunächst brauchen wir die folgenden Felder:
Nachdem der Benutzer einige Informationen eingegeben hat, müssen wir überprüfen, ob die Informationen des Benutzers korrekt sind, um Fehlerdaten zu vermeiden und Daten an den Server zu täuschen.
In den neuen Spezifikationen von HTML5 enthält das Eingabefeld eine Vielzahl von Eingabetypen wie Tel, E -Mail, Nummer, Reichweite, Farbe usw. Diese Typen spiegeln im Allgemeinen nicht sehr im Desktop -Client wider. Beispielsweise wechselt die Nummer automatisch auf reine Nummern auf der mobilen Tastatur, und die E -Mail -Tastatur wechselt automatisch mit @tastatur.
Schritt 2: Bestimmen Sie den FormstilWir müssen auch den endgültigen Stil des Formulars bestimmen. Hier fand ich einen Formstil auf Dribbeln als Demo -Stil dieser Zeit.
Schritt 3: VorlagencodeVerwenden Sie Standard -HTML5 -Anweisungscode
<!Schritt 4: Erstellen Sie ein Formular
Erstellen Sie ein grundlegendes Formatelement.
<Form action = onSubmit = return false> </form>Schritt 5: Erstellen Sie das Element
Die Tabellenelemente haben die folgende Elementzusammensetzung:
UL- und Li -Elemente werden für Typografie -Layouts verwendet, mit denen die Elemente und Layouts von Tabelleneinheiten geteilt werden. Etikett wird für den Feld Eingabeaufforderung des Formulars verwendet. Eingabe wird für Benutzereingabedaten verwendet. Span wird verwendet, um Emoji zu verwenden, um anzugeben, ob das Benutzerfeld korrekt ausgefüllt ist.
<ul> <li> <Label für = Name> Vollständiger Name </Label> <Eingabe type = Text id = Name Name = Name Placeholder = Geben Sie den Namen/> <span class = icon-name> </span> < /span> </span> li> </ul>
Formularformular HTML -Code Complete Code lautet wie folgt:
Schritt 6: Stil hinzufügenVervollständigen Sie das Schreiben von Formelemente, verbessern Sie seinen Stil eng und lassen Sie es schöner aus.
Body {Anzeige: Flex;} Form {Padding: 0 10%; ; Farbe: Schwarz; Absolut;Der CSS -Code vervollständigt den Code wie folgt:
Schritt 7: Emoji -Eingabeaufforderung hinzufügenIn jeder Formularform-Struktur haben wir ein Span-Tag hinzugefügt, wie wir eine <span class = icon-name> </span> im Feld Namen einbezogen haben. Fügen Sie nun den Stil dem Zustand des Schultestfelds hinzu.
li span {display: block;