Satz von HTML-Formularen. HTML-Formulare. Mehrzeiliges Textfeld – Tag
Hallo, liebe Leser der Blogseite. Im weiteren Verlauf betrachten wir die Formular- und Eingabe-Tags mit ihren Attributen (), mit denen Sie eine Vielzahl von Formularen für die Site erstellen können.
Unabhängig vom Thema und Inhalt einer bestimmten Webressource enthält sie höchstwahrscheinlich Formulare in der einen oder anderen Form: Textfelder, Dropdown-Menüs, verschiedene Schaltflächen oder Schalter. Übrigens habe ich in einer der Veröffentlichungen bereits über Elemente gesprochen, die zur Diversifizierung der Formen beitragen.
Was ist der praktische Zweck all der Vielfalt möglicher Formen? Sie werden zunächst benötigt, um die vom Benutzer eingegebenen Daten an den Server zu senden und dort mit einem speziell erstellten Skript (Handler) weiterzuverarbeiten.
HTML-Formulare – wie sie mithilfe von Formularen und Eingaben erstellt werden
Wie ich eingangs sagte, muss auf jeder mehr oder weniger entwickelten Website eine Art Webformular vorhanden sein, oder sogar mehrere gleichzeitig. Um zu verstehen, wie wichtig sie im Hinblick auf die Konformität einer Webressource mit modernen Anforderungen sind, genügt es, Ihnen nebenbei drei Objekte zu nennen, die Formulare verwenden, die auf den Formular- und Eingabe-Tags basieren und die allein durch ihren Namen keinen Zweifel an ihrer Gültigkeit lassen Notwendigkeit für ein Projekt in die eine oder andere Richtung:
Wenn Sie beispielsweise einem Link zu einem Artikel über das Erstellen von Feedback folgen (damit alle Benutzer Nachrichten an die Site-Administration senden können), dann wird der HTML-Code mit einem Formular, das eine Öffnung hat (
) Teil:Hier spielt das Formular eine entscheidende Rolle, da es die Installation des Webformulars initiiert. Es stellt selbst keinen Bereich auf einer Webseite dar, sondern dient als Container, der andere Tags enthält.
In unserem Fall (siehe Screenshot oben) sind dies mehrere Eingang(Dieses HTML-Tag ist einzeln, hat also keine schließende Komponente) und auch Textbereich, mit unterschiedlichen Attributsätzen. Jeder von ihnen definiert sein eigenes Element, das im Formular enthalten ist.
16. Autofokus(keine Parameter) ist ein logisches Attribut, das beim Laden der Webseite sofort den Fokus auf das Feld setzt, sodass Sie Daten eingeben können, ohne darauf klicken zu müssen. Kann nicht nur auf den Eingabetyp „versteckt“ angewendet werden.
17. Deaktiviert(ohne Werte) – deaktiviert für den Benutzer das Formularelement, zu dem es hinzugefügt wurde. Am häufigsten wird es in Verbindung mit Skripten verwendet, in denen Bedingungen angegeben werden, unter denen ein unzugängliches Element aktiviert wird.
18. Bilden– Ordnet das Element dem Formular zu, wenn es sich außerhalb des Containers befindet
. Zum Verknüpfen wird dem Formular-Tag ein globales ID-Attribut und dem Eingabe-Tag ein Formularattribut hinzugefügt, dessen Werte gleich sind (z. B. id = „data“ und form = „data“). .19. Mehrere(keine Parameter) – setzt Multiple-Choice-Option für den Benutzer und wird nur in Verbindung mit type="file" und type="email" verwendet.
Wenn Sie das Datei-Upload-Feld verwenden, können Sie mit der Strg- oder Umschalttaste mehrere Dateien gleichzeitig von Ihrem Computer auswählen. Wenn ein Feld zur Eingabe einer E-Mail-Adresse angezeigt wird (type="email"), sollten E-Mails durch Kommas getrennt eingegeben werden.
20. Erforderlich(keine Werte) – aktiviert die Anforderung, dass der Benutzer Daten eingeben muss. Daher blockiert der Browser die Übermittlung des Webformulars, wenn ein erforderliches Feld leer bleibt, und zeigt eine entsprechende Meldung über die Notwendigkeit an, dieses auszufüllen.
Dieses Attribut wird nicht für Grafik- und Standardschaltflächen (type="button | image") sowie für ausgeblendete Eingabefelder (type="hidden") verwendet.
21. Größe— bestimmt die Breite des Textfelds in Zeichen (nur für Typelemente mit den Parametern „E-Mail | Passwort | Suche | Tel | Text | URL“ geeignet). Der Standardwert beträgt 20 Zeichen.
Die nächsten vier Attribute (22-25) für das Eingabe-Tag haben fast die gleiche Funktionalität wie für , der Vollständigkeit halber werde ich sie jedoch auch kurz erwähnen.
22. Maximale Länge– legt eine Begrenzung der maximalen Anzahl von Zeichen fest, die beim Ausfüllen eines Textfelds eingegeben werden können. Wenn Sie versuchen, diese Grenze zu überschreiten, werden weitere Eingaben blockiert. Dieses Attribut gilt nur für Textelemente mit dem Typ „E-Mail | Passwort | Suche | Tel. | Text | URL“.
23. Minimale Länge– legt eine Begrenzung der Mindestanzahl von Zeichen fest, die in den Textbereich eingegeben werden müssen. Wenn versucht wird, Daten mit weniger Zeichen zu senden, erscheint eine kurze Meldung, die auf die Notwendigkeit hinweist, den Inhalt des Formulars zu ergänzen, und es werden Informationen über die Anzahl der bereits eingegebenen Zeichen bereitgestellt. Die Nutzungsbedingungen sind genau die gleichen wie bei maxlength.
24. Platzhalter— Sie können einen Hinweis (der als Parameter dient) direkt im Textfeld platzieren, der verschwindet, sobald der Benutzer mit der Zeicheneingabe beginnt. Nur für Felder, die über Parameter gebildet werden E-Mail, Passwort, Suche, SMS, Tel., URL Typattribut des Eingabe-Tags.
25. Schreibgeschützt(keine Parameter) – zeigt an, dass der zuvor in das Feld eingegebene Text nur zum Lesen und Kopieren verfügbar ist. Es wird normalerweise in Verbindung mit Skripten verwendet, in denen Bedingungen angegeben werden, die bei Erfüllung dieses Formularelement aktivieren können.
Und zum Schluss noch ein paar Attribute, die die Funktionalität verschiedener Formularelemente ergänzen:
26. Muster— spiegelt als Wert einen regulären Ausdruck wider, auf dessen Grundlage die Regeln für die Eingabe von Informationen festgelegt werden. In diesem Fall empfiehlt es sich, zusätzlich ein globales Titelattribut hinzuzufügen, als Parameter können Sie erläuternden Text hinzufügen, der Benutzern beim Ausfüllen der Felder hilft. Das Muster wird nur auf E-Mail-, Passwort-, Such-, Text-, Tel.- und URL-Elemente angewendet. Lassen Sie es uns anhand eines Beispiels verstehen. Hier ist der Code für ein vereinfachtes Anmeldeformular (mit ):
Anmeldung Passwort |
Für das Anmeldefeld (type="text") wird als Musterwert ein regulärer Ausdruck (5,) angegeben, der die Verwendung lateinischer Zeichen impliziert, wobei mindestens fünf Zeichen eingegeben werden müssen.
Bezogen auf den Textbereich für das Passwort (type="password") wird der Wert auf (8,) gesetzt, was die Eingabe von in jedem Fall ausschließlich lateinischen Zeichen (Groß- und Kleinbuchstaben) sowie Zahlen, Dabei sollte die Gesamtzahl aller Zeichen nicht weniger als acht betragen.
Bei Verstößen gegen die angegebenen Eingabebedingungen lässt der Browser das Senden von Daten nicht zu und zeigt eine entsprechende Warnung an:
27. Src— Definiert den Pfad zum Bild (URL, das ist sein Wert) für die Anzeige der Grafikschaltfläche „Bild“ (siehe Tabelle der Eingabetypparameter oben).
28. Schritt– legt den Schritt für Elemente fest, die eine Auswahl an numerischen Werten bieten (Eingabetyp="Datum | Datum/Uhrzeit-Lokal | Monat | Zahl | Bereich | Tel. | Zeit | Woche").
Als Parameter kann jede beliebige Ganzzahl oder Bruchzahl verwendet werden. Standardschritt = „1“. Um den endgültigen Eingabebereich festzulegen, können Sie erneut die oben erwähnten Min- und Max-Attribute verwenden. Aus Gründen der Übersichtlichkeit werden wir 2 Elemente type="number" in das Testformular aufnehmen. Setzen Sie für den ersten Schritt „2“ und für den zweiten Schritt „0,1“:
Geben Sie einen Wert zwischen -10 und 10 ein: Geben Sie einen Wert zwischen 0 und 1 ein: |
29. Wert– legt den Wert des Formularelements fest, das an den Handler übergeben wird. Ein Name-Parameter-Paar wird an den Server gesendet, wo der Name durch das Namensattribut des Eingabe-Tags und der Parameter durch das Wertattribut bestimmt wird. Darüber hinaus für verschiedene Formelemente Der Wert wird unterschiedliche Rollen spielen:
- for type="button | reset | subscribe" – legt die Textbeschriftung auf den Schaltflächen fest;
- for type="checkbox | radio | image" – identifiziert jedes Kontrollkästchen, jeden Schalter oder jede grafische Schaltfläche beim Senden und Verarbeiten von Daten auf dem Server;
- für type="password | text" – sofort beim Laden des Formulars wird im Feld ein vorläufiger Text angezeigt, der vom Benutzer geändert oder vollständig gelöscht werden kann;
- für type="file" (Datei-Upload) gilt nicht, da es sich nicht auf dieses Element auswirkt.
Beispielverwendung für jede der oben genannten Optionen:
CMS auswählen: W.P. Joomla |
Hier Wertattributwert definiert die folgenden Komponenten jedes Elements: zeigt ein Textfragment für das Feld type="text" ("Ihr Name") an, identifiziert alle mit type="radio" festgelegten Optionsfelder ("1" und "2"), und aktiviert auch die Beschriftung des Buttons („Senden“).
Ein Beispiel für die Erstellung eines schönen HTML-Formulars
Als nächstes werde ich versuchen, Ihnen ein Beispiel-Webformular vorzustellen, dessen Code nicht nur Kombinationen von Eingabetypen mit unterschiedlichen Werten enthält, die Standardtextfelder und -schaltflächen bilden, sondern beispielsweise auch die Einleitung der Fokussierung ermöglichen ein Element nicht nur durch einen direkten Mausklick, sondern auch durch Klicken auf Text.
Bitte beachten Sie, dass zur Erzielung eines einzigartigen Designs einzelne Formularkomponenten eingefügt werden, jeweils mit folgenden Sätzen:
Zurück (maximale Breite: 350 Pixel; Rand: 50 Pixel, automatisch 0; Abstand: 20 Pixel; Hintergrund: #f3ebe1; Schriftfamilie: „Oswald“, serifenlos;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- unten:10px; Breite:100%).in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; Hintergrundposition: 10 Pixel 10 Pixel) .form-4-Eingabe (Anzeige: Block; Höhe: 50 Pixel; Schriftgröße: 24 Pixel; Breite: 100 %; Cursor: Zeiger)
Infolgedessen nimmt ein solches Webformular den folgenden Grundriss an:
Ausführlichere Informationen zum Erstellen dieses speziellen Formulars finden Sie unter diese Seite(Übrigens können Sie dort nicht nur die Funktionalität einzelner Textbereiche durch Eingabe von Daten testen, sondern auch mit dem Webformular experimentieren, indem Sie den HTML-Code und/oder die CSS-Eigenschaften bearbeiten und so dessen Erscheinungsbild ganz oder teilweise ändern.)
Mein Ziel war es, Ihnen den Algorithmus zur Verwendung unterschiedlicher Werte des Typattributs und des Formular-Tags zum Erstellen verschiedener HTML-Formulare auf der Website vorzustellen. Ich hoffe, dass die Aufgabe erledigt ist. Teilen Sie auf jeden Fall Ihre Gedanken zu diesem vielfältigen Thema in den Kommentaren.
Natürlich werde ich in nachfolgenden Veröffentlichungen weiterhin die wichtigsten Tags des Hypertext-Markups beschreiben. Vergessen Sie also nicht, Blog-Updates per E-Mail zu abonnieren. Um dies zu untermauern, schauen Sie sich auch eine weitere Lektion von Evgeniy Popov zum Erstellen eines Kontaktformulars an.
Beschreibung
HTML-Tag
Beim Navigieren durch Websites klickt der Nutzer meist nur darauf Links zum Navigieren auf Webseiten.
Es ist jedoch klar, dass der Benutzer manchmal seine eigenen bereitstellen muss Eingabefelder. Zu diesen Arten von Interaktionen gehören:
- Registrierung und Login auf Websites;
- Eingabe persönlicher Daten (Name, Adresse, Kreditkarteninformationen usw.);
- Inhaltsfilterung (mithilfe von Dropdown-Listen, Kontrollkästchen usw.);
- Durchführen einer Suche;
- Herunterladen von Dateien.
Um diesen Anforderungen gerecht zu werden, bietet HTML interaktive Funktionen Kontrollen Formen:
- Textfelder (für eine oder mehrere Zeilen);
- Schalter;
- Kontrollkästchen;
- Dropdown-Listen;
- Widgets zum Herunterladen;
- Senden-Schaltflächen.
Diese Kontrollen beinhalten unterschiedliche Stichworte HTML, aber die meisten verwenden das Tag . Da es sich um ein selbstschließendes Element handelt, wird der Typ des Feldes durch sein Typattribut bestimmt: