HTML5 -Eingabe erforderlich Attribut
Dieses Handbuch erklärt den Eingang “erforderlich”Attribut und seine Verwendung.
Was ist das HTML -Eingang "Erforderlich" -attribut?
Der "erforderlichAttribut ist ein boolescher Attribut, das eine Bedingung angibt. Die für wichtigen Daten angegebenen Eingabefelder müssen mit dem erforderlichen Attribut festgelegt werden. Dieses Attribut funktioniert auf verschiedenen Eingaben.
So verwenden Sie das Attribut "Erforderliches" in HTML5?
Um das zu nutzenerforderlich”Attribut im HTML5 folgen Sie den folgenden Anweisungen:
- Fügen Sie ein Divelelement mit der Klasse hinzu "hauptsächlich”.
- Fügen Sie in diesem Div ein anderes DIV -Element mit dem Klassennamen hinzu “Form-Inhalt”.
- Innerhalb der Form-In-Intensiva-DIV werden zwei Tags für den ersten und Nachnamen hinzugefügt.
- Dann ist die ""Element mit den Attributen"Typ"Ist auf Text eingestellt", "Name”F-Name und L-Name für den Vornamen bzw. den Nachnamen. Das Platzhalterattribut wird im Textfeld angezeigt. Wir haben das Attribut verwendet “erforderlich”Im ersten Eingabetag nur, um seine Funktionalität zu sehen.
Html
Der obige Code generiert das Ergebnis, wie im folgenden Bild gezeigt:
Gehen wir zum CSS -Abschnitt, wo wir die HTML -Datei stylen und dann sehen, wie das erforderliche Attribut funktioniert.
Stil „Haupt“ Div
.hauptsächlichHintergrundfarbe: RGBA (0, 0, 0, 0, 0.159);
Max-Breite: 500px;
Rand: Auto;
Höhe: 270px;
Grenzradius: 30px;
Polsterung: 10px;
Gemäß dem angegebenen Code -Snippet werden die folgenden CSS -Eigenschaften auf das angewendethauptsächlichContainer:
- “HintergrundfarbeEigenschaft gibt die Hintergrundfarbe des Elements an.
- “maximale BreiteEigenschaft definiert die maximale Breite eines HTML -Elements.
- “Rand”Eigenschaft gibt Platz für das ausgewählte HTML -Element an.
- “HöheEigenschaft definiert die Höhe eines HTML -Elements.
- “GrenzradiusDie Eigenschaft passt die Kanten des Elements rund an.
- “PolsterungEigenschaft definiert den erforderlichen Platz um den Inhalt.
Stil „Form-Inhalt“ div
.Form-InhaltAnzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;
Höhe: 100%;
Schriftgröße: 20px;
Um die Div „Form-In-Inhalts“ zu stylen, wenden Sie die eingetragenen CSS-Eigenschaften an:
- “AnzeigeEigenschaft legt das Layout des Elements fest.
- “RechtfertigungsbekämpfungDie Eigenschaft passt das Element horizontal an.
- “AusrichtungImmobilien legt die Elemente flexibler Artikel fest.
- “HöheDie Eigenschaft wird verwendet, um die Höhe eines Elements festzulegen.
- “SchriftgrößeEigenschaft zeigt die Größe der Textschrift an.
Stil „Eingabe“ -Element von "Form-Content" Div
.Eingabe von Form-in-in-in-in-in-in-in-in-inz-Grenze: 1PX Solid RGB (47, 63, 63);
Polsterung: 6px 10px;
Schriftgröße: 20px;
Hintergrundfarbe: RGB (85, 104, 104);
Farbe: #ffffff;
Umriss: Keine;
Nach dem bereitgestellten CSS -Styling:
- “FarbeEigenschaft definiert die Farbe der Schriftart.
- “Umriss"Mit dem Wert"keiner”Entfernt die Umrisse des Elements bei Auswahl.
Stil „Platzhalter“ des „Eingabe“ -Elements
.Form-In-Intent-Eingabe :: PlatzhalterFarbe: #dadada;
Die Platzhalter -Schriftfarbe des Eingangsfeldes wird als "festgelegt" gesetzt "#dadada”.
Stil „Button“ -Element von "Form-Content" Div
.Schaltfläche "Form-Inhaltsab)Grenze: 1PX Solid RGB (47, 63, 63);
Polsterung: 10px 20px;
Schriftgröße: 22px;
Hintergrundfarbe: RGB (12, 33, 33);
Farbe: #a3a3a3;
Cursor: Zeiger;
Rand-Links: 5px;
Übergang: alle 0.3s Leichtigkeit;
Nach den gegebenen Eigenschaften:
- “MauszeigerEigenschaft wird mit dem Wertzeiger festgelegt. Wenn die Maus schwebt, wird eine Hand mit einem spitzen Finger angezeigt.
- “linksEigenschaft fügt links vom Inhalt Platz hinzu.
- “Übergang"Eigenschaft wird mit dem Wert festgelegt"alle 0.3s Leichte”, Wo alle alle Eigenschaften darstellen, 0.3S ist die Übergangsdauer und die Leichtigkeit repräsentiert die Bewegung des Übergangs.
Stil „Button“ -Element auf „schweben
“.Schaltfläche "Form-Inhalt": HoverTransformation: Skala (1.1, 1.2);
Farbe weiß;
Das Schaltflächenelement wird auf die “angewendetverwandelnSkala (1.1, 1.2) Transformieren Sie das Element in einer 3D -Ebene.
Das erforderliche Attribut wird an das erste Eingangselement angehängt. Wenn das Feld leer ist, wird eine Nachricht wie unten im Bild gezeigt angezeigt:
Aus dem folgenden Bild ist es ersichtlich, dass wir das erste Eingangselement nicht leer lassen können:
Das zweite Eingangselement ist dem erforderlichen Attribut nicht zugeordnet. Ob es also als leer eingereicht wird. Wenn das erste Eingabelement gefüllt ist, gibt die URL an, dass das Formular erfolgreich eingereicht wird:
So funktioniert das erforderliche Attribut in HTML5.
Abschluss
Das CSS -Eingabeelement ist vielen Attributen zugeordnet, z. B. Typ, Platzhalter, Erforderlich oder mehr. Das erforderliche Attribut ist ein Booleschen. Dieses Handbuch hat die Verwendung der HTML gezeigt “erforderlich”Attribut mit einem praktischen Beispiel.