So erstellen Sie eine Nachricht, ohne ein Standardformular zu verwenden. Erstellen und Arbeiten mit Formularen in HTML. Senden von Daten an die Serverseite

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, Daten). Kreditkarte 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:

Element

ist ein Blockelement, das definiert interaktiv Teil einer Webseite. Dadurch sind sämtliche Kontrollen (wie z.B , oder <button>) muss sein <i>innen</i> Element <form> .</p><p>Zwei HTML-Attribute <b>notwendig</b>:</p><ul><li>Die Aktion enthält eine Adresse, die bestimmt <i>Wo</i> Formularinformationen werden gesendet;</li><li>Die Methode kann entweder GET oder POST sein und bestimmt, ob <i>Wie</i> Formularinformationen werden gesendet.</li> </ul><p>Normalerweise werden die Formularinformationen an gesendet <b>Server</b>. <i>Wie</i> Diese Daten werden dann über den Rahmen dieses Handbuchs hinaus verarbeitet.</p><p>Stellen Sie sich ein Formular als eine Sammlung von Steuerelementen vor, die zusammenarbeiten, um etwas zu erreichen <b>eins</b> Betrieb. Wenn Sie ein Site-Anmeldeformular geschrieben haben, ist dies möglicherweise der Fall <b>drei</b> Felder:</p><ul><li>Feld für <a href="https://wrldlib.ru/de/kak-vosstanovit-dostup-k-elektronnoi-pochte-vosstanovlenie-pochty/">Email</a> <input type="email"> </li><li>Passwortfeld <input type="password"> </li><li>Schaltfläche „Senden“. <input type="submit"> </li> </ul><p>Diese drei HTML-Elemente werden in einem Formular enthalten sein <span><form action="/login" method="POST"> </span>.</p><p>Auf ähnliche Weise können Sie ein Registrierungsformular auf derselben HTML-Seite in einem separaten Element hinzufügen <form> .</p><h2>Textfelder</h2><p>Fast alle Formulare erfordern <b>Text</b> Eingaben von Benutzern zur Eingabe ihres Namens, ihrer E-Mail-Adresse, ihres Passworts, ihrer Adresse usw. Formulartextfelder gibt es in verschiedenen Varianten.</p><p>Obwohl diese Felder sehr ähnlich sind und Benutzern die Eingabe jeder Art von Text (auch falscher) ermöglichen, bietet ihr Typ eine Besonderheit <b>Semantik</b> Für die Eingabe wird bestimmt, welche Informationen das Feld enthält <b>muss</b> enthalten.</p><p>Browser können die Benutzeroberfläche des Steuerelements nachträglich leicht ändern, um sie zu verbessern <i>Interaktivität</i> oder schlagen Sie vor, welche Inhalte erwartet werden.</p><p>Beispielsweise werden im Passwortfeld Punkte anstelle von Symbolen angezeigt. Und im Zahlenfeld können Sie den Wert mit den Auf- und Ab-Tasten erhöhen/verringern.</p><h2>Platzhalter</h2><p>Textfelder können angezeigt werden <b>suggestiv</b> Text, der verschwindet, sobald Text eingegeben wird.</p><p> <input type="text" placeholder="Gib deinen Namen ein"> </p><p>Wenn Sie anfangen, etwas einzugeben, wird der Text „Geben Sie Ihren Namen ein“ ausgeblendet.</p><h2><label></h2><p>Da Formularelemente selbst wenig beschreibend sind, wird ihnen in der Regel Text vorangestellt. <b>Etikett</b>.</p><p> <label>Email</label> <input type="email"> </p><p>Während Platzhalter bereits einen Hinweis auf den erwarteten Inhalt geben, haben Beschriftungen den Vorteil, dass sie jederzeit sichtbar bleiben und zusammen mit anderen Arten von Formularelementen wie Kontrollkästchen oder Optionsfeldern verwendet werden können.</p><p>Obwohl Sie kurze Absätze verwenden können, um Formularelemente zu beschreiben, verwenden Sie <label>ist semantisch korrekter, da sie nur in Formen existieren. <label>kann auch mit einem bestimmten Formularelement verknüpft werden, indem das for-Attribut verwendet wird, das dem ID-Wert des Felds entspricht.</p><p> <label for="first_name">Name</label> <input id="first_name" type="text"> </p><p>Wenn Sie auf die Beschriftung klicken, wird der Fokus auf das Textfeld verschoben und der Cursor darin platziert. Bisher scheint dieses Paket nutzlos zu sein, aber es wird sich mit Kontrollkästchen und Schaltern als nützlich erweisen.</p><h2>Kontrollkästchen</h2><p><b>Kontrollkästchen</b>- Dabei handelt es sich um Formularelemente, die nur zwei Zustände haben: ein oder aus. Sie ermöglichen es dem Benutzer grundsätzlich, zu etwas „Ja“ oder „Nein“ zu sagen.</p><p> <input type="checkbox">Erinnere dich an mich</p><p>Da es schwierig sein kann, auf ein kleines Kontrollkästchen zu klicken, empfiehlt es sich, das Kontrollkästchen und seine Beschreibung darin zu platzieren <label> .</p><p> <label> <input type="checkbox">Ich bin mit den Bedingungen einverstanden</label> </p><p>Sie können auf den Text „Ich stimme den Bedingungen zu“ klicken, um das Kontrollkästchen zu aktivieren.</p><p>Standardmäßig ist das Kontrollkästchen deaktiviert. Sie können es einfach als aktiviert markieren, indem Sie das Attribut „checked“ verwenden.</p><p> <label> <input type="checkbox" checked>Verwenden Sie meine Rechnungsadresse</label> </p><h2>Schalter</h2><p>Sie können den Benutzer angeben <b>Liste der Optionen</b> wählbar über Schalter.</p><p>Damit dieses Formularelement funktioniert, muss Ihr HTML-Code vorhanden sein <b>Gruppe</b> Liste der Optionsfelder zusammen. Dies wird erreicht, indem derselbe Wert für das Namensattribut verwendet wird:</p><p> <label>Familienstand</label> <label> <input type="radio" name="status">Einzel</label> <label> <input type="radio" name="status">Verheiratet</label> <label> <input type="radio" name="status">Geschieden</label> <label> <input type="radio" name="status">Witwer</label> </p><p>Da alle Schalter nutzen <a href="https://wrldlib.ru/de/kak-naiti-odinakovye-znacheniya-v-stolbce-excel-kak-sravnit-dva-stolbca-v-excel-na/">gleichen Wert</a> Wenn Sie das Namensattribut (in diesem Fall den Statuswert) angeben, werden durch Auswahl einer der Optionen alle anderen gelöscht. Die Schalter sind <b>sich gegenseitig ausschließen</b>.</p><h3>Unterschied zwischen Optionsfeldern und Kontrollkästchen</h3><p>Obwohl das Kontrollkästchen vorhanden ist <b>alleine</b>, Schalter können nur im Formular erscheinen <b>Liste</b>(was mindestens zwei Optionen bedeutet).</p><p>Darüber hinaus ist das Anklicken des Kontrollkästchens möglich <b>willkürlich</b>, während Sie eines der Optionsfelder auswählen <b>obligatorisch</b>. Aus diesem Grund ist es nicht möglich, den Schalter auszuschalten, wenn Sie die nächstgelegene Option auswählen. Am Ende ist immer einer der Schalter ausgewählt.</p><h2>Dropdown-Menüs</h2><p>Wenn die Anzahl der zur Auswahl stehenden Optionen zu viel Platz einnimmt, können Sie Dropdown-Menüs verwenden <select> .</p><p>Sie funktionieren ähnlich wie Schalter, nur das Layout ist anders.</p><p> <select> <option>Januar</option> <option>Februar</option> <option>Marsch</option> <option>April</option> <option>Mai</option> <option>Juni</option> <option>Juli</option> <option>August</option> <option>September</option> <option>Oktober</option> <option>November</option> <option>Dezember</option> </select> </p><h3>Mehrfachauswahl aus Dropdown-Menü</h3><p>Wenn Sie das Mehrfachattribut hinzufügen, können Sie die Möglichkeit bieten, mehrere Optionen auszuwählen.</p><p> <label>Welche Browser verwenden Sie?</label> <select multiple> <option><a href="https://wrldlib.ru/de/how-do-i-create-a-theme-for-google-chrome-live-wallpapers-for-google-chrome/">Google Chrome</a></option> <option><a href="https://wrldlib.ru/de/lichnyi-sertifikat-ne-otobrazhaetsya-v-internet-explorer-internet-explorer-ne-vidit/">Internet Explorer</a></option> <option><a href="https://wrldlib.ru/de/install-the-latest-version-of-mozilla-firefox-getting-started-with-mozilla-firefox-downloading-and-installing/">Mozilla Firefox</a></option> <option>Oper</option> <option>Safari</option> </select> </p><p>Wählen Sie mehrere Optionen aus, indem Sie die Strg-Taste (oder ⌘) gedrückt halten und klicken. Dies kann eine gute Alternative zur Verwendung mehrerer Kontrollkästchen pro Zeile sein.</p><h2>Beispiel: vollständiges Anmeldeformular</h2> <form action="/signup" method="POST"> <p> <label>Appellieren</label> <label> <input type="radio" name="title" value="Herr">Herr.</label> <label> <input type="radio" name="title" value="Frau">Frau.</label> </p> <p> <label>Name</label> <input type="text" name="first_name"> </p> <p> <label>Nachname</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Telefon</label> <input type="tel" name="phone"> </p> <p> <label>Passwort</label> <input type="password" name="password"> </p> <p> <label>Bestätigen Sie das Passwort</label> <input type="password" name="password_confirm"> </p> <p> <label>Ein Land</label> <select name="country"> <option>Kanada</option> <option>Frankreich</option> <option>Deutschland</option> <option>Italien</option> <option>Japan</option> <option>Russland</option> <option>Großbritannien</option> <option>USA</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Ich stimme den Nutzungsbedingungen zu</label> </p> <p> <button>Registrieren</button> </p> </form> <p>Es sind auch andere Formularelemente verfügbar, wir haben uns jedoch die am häufigsten verwendeten angesehen.</p> <p>Guten Tag, Fans der Webentwicklung und diejenigen, die ihre eigene Website erstellen möchten. Davor befassten sich alle meine Veröffentlichungen mit den Grundelementen der Sprache, Möglichkeiten zur Erstellung verschiedener Inhaltsobjekte, deren Formatierung, Strukturierung usw. Nachdem Sie die vorherigen Themen gemeistert haben, können Sie bereits eine ziemlich gute Website erstellen. Ohne das heutige Thema „Formulare in HTML erstellen“ wäre es jedoch unvollständig.</p> <p>Dieser Abschnitt der Sprache ist sehr wichtig. Achten Sie daher besonders auf das Studium, da die von Ihnen erstellte Webressource sonst nicht für die Produktion freigegeben wird. So erfahren Sie nach der Lektüre des Artikels, wofür Sie Formulare verwenden müssen, mit welchen Tags sie erstellt werden und können es auch ausprobieren <a href="https://wrldlib.ru/de/kak-sozdat-login-i-parol-dlya-registracii-chto-takoe-login-prostymi/">konkrete Beispiele</a> zur Praxis. Lass uns anfangen!</p> <h2>Was ist ein Formular und wie funktioniert es?</h2> <blockquote> <p><b>Bilden</b>– Dies ist eines der wichtigsten Objekte, das für den Austausch von Informationsdaten zwischen dem Server und dem Benutzer bestimmt ist.</p> </blockquote> <p>Einfach ausgedrückt: Wenn Sie einen Online-Shop mit der Möglichkeit erstellen möchten, Produkte auf der Website zu bestellen, eine Registrierung auf einer Webressource anzufordern und mit Konten zu arbeiten oder Kunden bereitzustellen <a href="https://wrldlib.ru/de/registry-sdviga-s-lineinoi-obratnoi-svyazyu-kak-generatory-psevdosluchainyh-chisel-registry-sdviga-s-o/">Rückmeldung</a> B. bei Unternehmensleitern, dann können Sie auf Formulare nicht verzichten.</p> <blockquote> <p>Das Formular wird über ein spezielles Element der HTML-Sprache spezifiziert <b><form> </b>.</p> </blockquote> <p>Beachten Sie, dass das Codedokument mehrere Tag-Deklarationen enthalten kann <b><form> </b> Es kann jedoch nur eine Anfrage an den Server gesendet werden, um die Daten zu verarbeiten. Deshalb sollten Informationen, die vom Benutzer in die dafür vorgesehenen Felder eingegeben werden und sich auf verschiedene Formulare beziehen, nicht voneinander abhängig sein. Außerdem ist es nicht erlaubt, Formulare ineinander zu verschachteln.</p> <p>Für diejenigen, die ungeduldig sind und einen kurzen Blick auf die Codedarstellung werfen möchten, habe ich ein einfaches Beispiel für die Verwendung eines Panels mit einem Textfeld für ein Passwort mit einer Schaltfläche angehängt:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Beispiel</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Beispiel</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <br> <br> </body> </html></p> <p>Es mag jetzt nicht ganz klar sein, was und wie in diesem kleinen Programm zusammenwirkt, aber ich garantiere Ihnen, dass Sie nach der Lektüre des gesamten Artikels in der Lage sein werden, Anwendungen zu erstellen, die viel komplexer sind.</p> <h2>Senden von Daten an die Serverseite</h2> <p>Um die eingegebenen (oder ausgewählten) Informationen in einem Dialogfeld zu senden, müssen Sie den Standardmechanismus verwenden: <b>Schaltfläche „Senden“.</b>.</p> <blockquote> <p>Der Code für eine solche Methode sieht folgendermaßen aus: <b><input type="submit"> </b></p> </blockquote> <p>Wenn Sie die angezeigte Zeile ausführen, erscheint eine Schaltfläche mit der Aufschrift: „Senden“.</p> <p>Eine andere Möglichkeit, Daten an den Server zu senden, besteht darin, im Dialogfeld die Eingabetaste zu drücken.</p> <p>Nach der Bestätigung des Sendens der angegebenen Informationen gelangen diese nicht sofort auf dem Server. Zunächst wird es vom Browser verarbeitet, wodurch die Form „Name=Wert“ entsteht.</p> <p>Der Attributparameter ist für den Namen verantwortlich <b>Typ</b> Etikett <b><input> </b> und für den Wert - die vom Benutzer eingegebenen Daten. Als nächstes wird die konvertierte Zeichenfolge an den Handler übergeben, der am häufigsten im Attribut angegeben wird <b>Aktion</b> Element <b><form> </b>.</p> <p>Der Aktionsparameter selbst ist nicht erforderlich, und in einigen Fällen wird er überhaupt nicht benötigt. Zum Beispiel, wenn eine Website-Seite mit geschrieben wird <a href="https://wrldlib.ru/de/ispolzovanie-php-iz-komandnoi-stroki-interaktivnoe-konsolnoe/">mit PHP</a> oder js, dann erfolgt die Verarbeitung auf der aktuellen Seite und Links werden nicht benötigt.</p><p>Zum besseren Verständnis des Gesamtbildes der Funktionsweise der Website möchte ich hinzufügen, dass auf dem Server Daten in anderen Sprachen verarbeitet werden. Als serverseitige Sprachen gelten daher: Python, PHP, C-ähnliche Sprachen (C#, C usw.), Java und andere.</p> <p>Jetzt möchte ich innehalten und mehr über das Element sprechen <b><input> </b>. Wenn du es erklärst <a href="https://wrldlib.ru/de/chto-takoe-bitkoiny-bitcoin-prostym-yazykom-chto-takoe-bitkoin-prostymi/">in einfacher Sprache</a>, Das <b><input> </b> Wird zum Erstellen von Textfeldern, Optionsfeldern, verschiedenen Schaltflächen, versteckten Feldern, Kontrollkästchen und anderen Objekten benötigt.</p> <p>Der Tag muss nicht mit gepaart werden <b><form> </b> Wenn Sie jedoch Benutzerdatensätze verarbeiten oder beispielsweise in eine Datenbank eingeben müssen, können Sie auf einen Container nicht verzichten.</p> <p>Die Hauptattribute dieses Sprachelements <a href="https://wrldlib.ru/de/referat-yazyk-gipertekstovoi-razmetki-html-yazyk-razmetki-giperteksta-html/">Hypertext Markup</a> Sind:</p> <ul><li><b>Text</b>– erstellt ein Textfeld;</li> <li><b>Einreichen</b>– erstellt eine Schaltfläche zum Senden von Daten an den Server;</li> <li><b>Bild</b>– ist verantwortlich für den Button mit dem Bild;</li> <li><b>Zurücksetzen</b>– legt eine Schaltfläche zum Löschen des Formulars fest;</li> <li><b>Passwort</b>– legt ein Textfeld speziell für Passwörter fest;</li> <li><b>Kontrollkästchen</b>– verantwortlich für Felder mit Kontrollkästchen;</li> <li><b>Radio</b>– verantwortlich für Felder mit der Auswahl eines Elements;</li> <li><b>Taste</b>– erstellt eine Schaltfläche;</li> <li><b>Versteckt</b>– wird für versteckte Felder verwendet;</li> <li><b>Datei</b>– legt das Feld fest, das für das Senden von Dateien verantwortlich ist.</li> </ul><h2>Methoden zur Übermittlung von Informationen</h2> <p>Es gibt zwei Möglichkeiten, Benutzerdaten auf die Serverseite zu übertragen: <b>Erhalten</b> Und <b>Post</b>. Diese Methoden führen die gleiche Aktion aus, unterscheiden sich jedoch erheblich voneinander. Bevor wir sie erwähnen, machen wir uns daher mit ihren Funktionen vertraut.</p> <table><tbody><tr><td width="260"> </td> <td width="260">Post</td> <td width="260">Erhalten</td> </tr><tr><td width="260">Größe der übermittelten Dokumente</td> <td width="260">Beschränkt auf die Serverseite.</td> <td width="260">Maximal – 4 KB.</td> </tr><tr><td width="260">Wie gesendete Informationen angezeigt werden</td> <td width="260">Nur verfügbar, wenn die Anzeige über Browsererweiterungen oder andere spezielle Softwareprodukte erfolgt.</td> <td width="260">Sofort für alle verfügbar.</td> </tr><tr><td width="260">Lesezeichen verwenden</td> <td width="260">Es gibt keine Möglichkeit, Lesezeichen hinzuzufügen, da Anfragen nicht wiederholt werden (alle Seiten verweisen auf eine Adresse).</td> <td width="260">Jede Seite mit einer Anfrage kann als Lesezeichen gespeichert und später darauf zurückgeführt werden.</td> </tr><tr><td width="260">Caching</td> <td width="260">Basierend auf dem vorherigen Absatz befinden sich alle Anfragen auf einer Seite.</td> <td width="260">Jede Seite kann separat zwischengespeichert werden.</td> </tr><tr><td width="260">Zweck</td> <td width="260">Wird zum Senden großer Dateien (Bücher, Bilder, Videos usw.), Nachrichten und Kommentare verwendet.</td> <td width="260">Ideal zum Suchen nach angeforderten Werten in einer Webressource oder zum Versenden kurzer Textnachrichten.</td> </tr></tbody></table><p>Um im Element anzugeben, welche der beiden Datenübertragungsmethoden der Browser verwenden soll <b><form> </b> Verwenden Sie den bereitgestellten Parameter <b>Methode</b>(Zum Beispiel, <b>method="post"</b>).</p> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/prostaia-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Schauen wir uns das zweite Beispiel an. Lassen Sie uns ein Formular erstellen, in das Sie Ihre persönlichen Daten (Vor- und Nachname, Geburtsdatum) eingeben und ein Passwort erstellen müssen. Anschließend senden wir das alles mit der Methode an den Server <b>Post</b>.</p> <p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>POST-Methode</title> </head> <body> <p>Geben Sie Ihre persönlichen Daten ein!</p> <form action="handler.php" method="post"> <p><input name="name" value = "Name"> <input name="fam" value = "Nachname"> <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> <input type="password" name="pass" value = "Passwort"> </p> <p><input type="submit"></p> </form> <br> <br> </body> </html></p> <p>Um beispielsweise ein Datum einzugeben, gibt es Schalter für die Nummer jedes Parameters (Tag, Monat und Jahr) sowie zur Vereinfachung ein Dropdown-Feld mit dem Kalender selbst.</p> <h2>Erstellen eines Registrierungspanels</h2> <p>Grundlegende Tags und Attribute wurden behandelt. Aus diesem Grund ist es an der Zeit, ein vollwertiges Registrierungsformular zu erstellen, das CSS-Markup verwendet und die eingegebenen Daten validiert. Natürlich können wir nicht sehen, wie der Server damit funktioniert, aber wir werden das Design und wichtige Details bereitstellen.</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Anmeldung</title> <style> </style> </head> <body> <form> <fieldset> <legend>Registrierung auf der Website</legend> <h4> </h4> <p>Name: <input name="name" autofocus required ></p> <p>Nachname: <input name="fam" required></p> <p>Email: <input type="email" required></p> <p>Passwort: <input type="password" name="pass" required></p> <p>Passwort wiederholen: <input type="password" name="pass" required></p> <p><input type="submit" value="Registrieren"></p> </fieldset> </form> <br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Anmeldung</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h4 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>Registrierung auf der Website</legend> <h4>Für eine spätere korrekte Arbeit in unserem Service geben Sie bitte korrekte Daten ein!</h4> <p>Name: <input name="name" autofocus required ></p> <p>Nachname: <input name="fam" required></p> <p>Email: <input type="email" required></p> <p>Passwort: <input type="password" name="pass" required></p> <p>Passwort wiederholen: <input type="password" name="pass" required></p> <p><input type="submit" value="Registrieren"></p> </fieldset> </form> <br> <br> </body> </html></p> <p>Ich rate Ihnen zu sparen <a href="https://wrldlib.ru/de/how-to-enter-the-old-purse-of-yandex-money-how-to-find-out-the-payment-password-on-yandex/">diesen Code</a> Programme in einem Dokument mit der Erweiterung .html und der Kodierung utf-8 und öffnen Sie dieses in einem Browserfenster. Sie sehen ein Registrierungsfenster in seiner ganzen Pracht mit Feldern zur Eingabe Ihres Vornamens, Nachnamens, Ihrer E-Mail-Adresse und eines wiederholten Passworts. Beachten Sie, dass der Cursor beim Starten der Seite sofort im ersten Textfeld positioniert wird. Diese Technik wird durch das Attribut erreicht <b>Autofokus</b>.</p> <p>Formulare dienen dazu, Daten vom Benutzer an den Webserver zu senden. Formulare in HTML können aus Textfeldern und bestehen <a href="https://wrldlib.ru/de/vnutrennii-server-obnovleniya-adobe-flash-player-sozdanie-prokruchivaemoi/">Textbereiche</a>, Kontrollkästchen und Optionsfelder sowie Dropdown-Listen. All dies sind Formelemente. Jedes Element dient dazu, der Website eine Bedeutung zu verleihen. <br>Im Kern ist ein HTML-Formular eine Webseite, auf der Sie Bereiche zur Eingabe Ihrer Informationen sehen. Nachdem Sie das Formular ausgefüllt und auf „Senden“ geklickt haben, werden die Informationen aus dem Formular gepackt und zur Verarbeitung durch ein serverseitiges Skript (Handlerdatei) an den Webserver gesendet. Nach der Verarbeitung wird Ihnen als Antwort eine weitere Webseite zurückgegeben. Die folgende Abbildung zeigt deutlich, wie das Formular funktioniert:</p> <p>Die Erstellung von HTML-Formularen ist kein Problem. Der einfachste Weg, sich ein Bild von Formularen zu machen, besteht darin, ein wenig HTML-Code zu analysieren und dann zu sehen, wie es funktioniert. Das folgende Beispiel zeigt die Syntax zum Erstellen eines einfachen HTML-Formulars:</p> <h3>Beispiel: Einfaches HTML-Formular</h3> <ul><li>Versuch es selber "</li> </ul><p>Mein erstes Formular: <br>Name: <input type="text" name="firstname" value=""><br>Nachname: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Einfache Form</title> </head><br><body> <form action="action_form.php" method="POST"> <p>Mein erstes Formular: <br>Name: <input type="text" name="firstname" value=""><br>Nachname: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> <br> <br> </body><br></html></p> <h2>Element <b><form> </b> </h2> <p>Mithilfe des Elements werden Formulare in Webseiten eingefügt <b><form> </b>. Es stellt einen Container für den gesamten Formularinhalt bereit, einschließlich Elementen wie Textfeldern und Schaltflächen sowie allen anderen Tags <a href="https://wrldlib.ru/de/skachat-veb-stranicu-html-besplatnye-html-shablony-na-russkom-yazyke-tesselatte--/">HTML-Sprache</a>. Es darf jedoch kein anderes Element enthalten <b><form> </b> .<br>Um das Formular an den Server zu senden, verwenden Sie die Schaltfläche „Senden“. Das gleiche Ergebnis erhalten Sie, wenn Sie innerhalb des Formulars die Taste „Enter“ drücken. Wenn die Schaltfläche „Senden“ auf dem Formular nicht vorhanden ist, kann zum Absenden die Taste „Enter“ verwendet werden. <br>Die meisten Elementattribute <b><form> </b> Auswirkungen auf die Verarbeitung des Formulars haben, nicht auf dessen Gestaltung. Die häufigsten davon sind <b>Aktion</b> Und <b>Methode</b>. Attribut <b>Aktion</b> enthält die URL, an die die Informationen im Formular zur Verarbeitung durch den Server gesendet werden. Attribut <b>Methode</b> ist die HTTP-Methode, die Browser zum Senden von Formulardaten verwenden müssen.</p> <h2>Element <b><input> </b> </h2> <p>Fast alle Formularfelder werden mit dem Element erstellt <b><input> </b>(aus der englischen Eingabe - Eingabe). <a href="https://wrldlib.ru/de/kak-udalit-programmu-v-windows-aimp-chto-eto-za-programma-i-nuzhna-li/">Aussehen</a> Element <b><input> </b> abhängig vom Wert seines Attributs ändern <b>Typ</b>:</p><p> <input type="значение"> </p><p>Hier sind einige Attributwerte <b>Typ</b>:</p> <h2>Eingabe von Text und Passwort</h2> <p>Eine der einfachsten Arten von Formularelementen ist ein Textfeld, das für die Eingabe von Text in einer einzelnen Zeile konzipiert ist. <a href="https://wrldlib.ru/de/tipy-peredachi-dannyh-tipy-peredachi-dannyh-tipy-peredachi/">Dieser Typ</a> Die Texteingabe ist standardmäßig eingestellt und daher ist es das einzeilige Feld, das angezeigt wird, wenn Sie vergessen, das Attribut anzugeben <b>Typ</b>. Um einem Formular ein einzeiliges Texteingabefeld hinzuzufügen, sollten Sie es innerhalb des Elements einfügen <b><input> </b> Registrieren Sie das Attribut <b>Typ</b> mit Textwert:</p><p> <input type="text"> </p><p>Das Passwort-Eingabefeld ist eine Art reguläres Feld <a href="https://wrldlib.ru/de/chto-takoe-saidbary-wordpress-i-chto-tuda-mozhno-pomestit-menyaem/">Textfeld</a>. Es unterstützt die gleichen Attribute wie ein einzeiliges Textfeld. Attribut <b>Name</b> Legt den Namen des Passworteingabefelds fest, das zusammen mit dem vom Benutzer eingegebenen Passwort an den Server gesendet wird. Um ein Passwortfeld zu erstellen, müssen Sie das Passwortattribut auf festlegen <b>Typ</b>(Passwort (Englisch) - Passwort):</p><p> <input type="password"> </p><p>Ein Beispiel für die Erstellung eines Formulars mit einem Passwortfeld:</p> <h3>Beispiel: Passwortfeld</h3> <ul><li>Versuch es selber "</li> </ul><p>Dein Login: <input type="text" name="login" size="15" maxlength="30" value="Ihr Name"></p> <p>Passwort: <input type="password" name="password" size="15" maxlength="30" value="Passwort"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Dein Login: <input type="text" name="login" size="15" maxlength="30" value="Ihr Name"> </p> <p>Passwort: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> <br> <br> </body><br></html></p> <p>Sie können das Attribut in Verbindung mit diesem Attribut verwenden <b>maximale Länge</b>, dessen Wert bestimmt <a href="https://wrldlib.ru/de/asus-a88xm-a-maksimalnoe-kolichestvo-operativnoi-pamyati-obzor/">Höchstbetrag</a> Zeichen, die in dieser Zeile eingegeben werden können. Sie können die Länge des Eingabefelds auch über das Attribut festlegen <b>Größe</b>. Standardmäßig beschränken die meisten Browser die Breite eines Textfelds auf 20 Zeichen. Um die Breite neuer Formularelemente anstelle eines Attributs zu steuern <b>Größe</b>, empfehlen wir die Verwendung von Cascading Style Sheets (CSS). <br>Attribut <b>Wert</b> Gibt den Wert an, der beim Laden des Formulars standardmäßig im Textfeld angezeigt wird. Durch die Eingabe eines Standardwerts in das Feld können Sie dem Benutzer genau erklären, welche Daten und in welchem Format der Benutzer hier eingeben soll. Dies ist wie ein Beispiel, da es für den Benutzer viel bequemer ist, das Formular auszufüllen, wenn er ein Beispiel vor sich sieht.</p> <h2>Schalter (Funk)</h2> <p>Element <b><input> </b> Typ <b>Radio</b> erstellt Schalter, die das logische „ODER“-Prinzip verwenden, sodass Sie nur einen von mehreren Werten auswählen können: Wenn Sie eine Position auswählen, werden alle anderen inaktiv. Die grundlegende Syntax eines Toggle-Elements lautet:</p><p> <input type="radio" name="имя _переменной" value="Bedeutung"> </p><p>Attribut <b>Name</b> für Schalter ist erforderlich und spielt eine wichtige Rolle bei der Zusammenfassung mehrerer Schalterelemente zu einer Gruppe. Um Optionsfelder zu einer Gruppe zusammenzufassen, müssen Sie denselben Attributwert festlegen <b>Name</b> und unterschiedlicher Attributwert <b>Wert</b>. Attribut <b>Wert</b> Legt den Wert des ausgewählten Optionsfelds fest, der an den Server gesendet werden soll. Der Wert jedes Optionsfeldelements muss innerhalb der Gruppe eindeutig sein, damit der Server weiß, welche Antwortoption der Benutzer ausgewählt hat. <br>Attributpräsenz <b>überprüft</b>(aus dem Englischen - installiert) am Schalterelement gibt an, welche der vorgeschlagenen Optionen beim Laden der Seite ggf. standardmäßig ausgewählt werden sollen. Dieses Attribut kann nur für ein Optionsfeldelement aus der Gruppe festgelegt werden:</p> <h3></h3> <ul><li>Versuch es selber "</li> </ul><p>Wie alt bist du, wie alt sind Sie?</p> <ol><li><input type="radio" name="age" value="18" checked>unter 18</li> <li><input type="radio" name="age" value="18-24">von 18 bis 24</li> <li><input type="radio" name="age" value="25-34">von 25 bis 35</li> <li><input type="radio" name="age" value="35-50">mehr als 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Wie alt bist du, wie alt sind Sie?</p> <ol> <li><input type="radio" name="age" value="18" checked>unter 18</li> <li><input type="radio" name="age" value="18-24">von 18 bis 24</li> <li><input type="radio" name="age" value="25-34">von 25 bis 35</li> <li><input type="radio" name="age" value="35-50">mehr als 35</li> </ol> <input type="submit"< </form> <br> <br> </body><br></html></p> <h2>Kontrollkästchen</h2> <p>Element <b><input> </b> Typ <b>Kontrollkästchen</b> erstellt Kontrollkästchen, die Optionsfeldern ähneln, da sie dem Benutzer die Möglichkeit geben, aus den von Ihnen bereitgestellten Optionen auszuwählen. Der Hauptunterschied zu Optionsfeldern besteht darin, dass der Besucher mehrere Optionen gleichzeitig auswählen kann und die Flaggen selbst durch Quadrate und nicht durch Kreise gekennzeichnet sind. Wie bei Optionsfeldern wird eine Gruppe von Kontrollkästchen erstellt, indem jedem Element derselbe Attributwert zugewiesen wird <b>Name</b> Allerdings hat jedes Kontrollkästchen seine eigene Bedeutung. Die grundlegende Syntax eines Kontrollkästchens lautet:</p><p> <input type="checkbox" name="имя _переменной" value="Bedeutung"> </p><p>Attribut <b>überprüft</b> legt wie bei Optionsfeldern fest, dass das Kontrollkästchen beim Laden der Seite standardmäßig aktiviert sein soll. Dieses Attribut kann für mehrere Gruppen-Checkboxen gleichzeitig gesetzt werden. <br>Das folgende Beispiel für die Verwendung von Kontrollkästchen bietet mehrere Standardantwortmöglichkeiten:</p> <h3>Beispiel: Verwendung von Optionsfeldern</h3> <ul><li>Versuch es selber "</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="Blues" checked>Blues</li> <li><input type="checkbox" name="musik" value="Felsen">Felsen</li> <li><input type="checkbox" name="musik" value="Shanson">Chanson</li> <li><input type="checkbox" name="musik" value="Land">Land</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Welche Musikrichtungen magst du?</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="Blues" checked>Blues</li> <li><input type="checkbox" name="musik" value="Felsen">Felsen</li> <li><input type="checkbox" name="musik" value="Shanson">Chanson</li> <li><input type="checkbox" name="musik" value="Land">Land</li> </ol> <input type="submit"< </form> <br> <br> </body><br></html></p> <h2>Schaltflächen zum Senden und Zurücksetzen</h2> <p>Element <b><input> </b> Typ <b>einreichen</b> erstellt eine Schaltfläche, die beim Klicken den Browser an ein Serverskript sendet, um die vom Benutzer in das Formular eingegebenen Daten zu verarbeiten. Wenn wir eine Schaltfläche erstellen, die das Formular löscht, weisen wir das Attribut zu <b>Typ</b> Wert „Zurücksetzen“. Element <b><input> </b> Typ <b>einreichen</b> Es kann ein optionales Attribut zugewiesen werden <b>Name</b>. Attribut <b>Wert</b> Wird in diesem Element verwendet, um Text anzugeben, der die Beschriftung der Schaltfläche angibt. Standardmäßig haben Browser auf der Schaltfläche „Senden“ geschrieben; wenn Sie mit dieser Aufschrift nicht zufrieden sind, geben Sie sie selbst ein. Da die Stile der Bestätigungsschaltflächen je nach Browser unterschiedlich sein können, ist es besser, den Stil der Schaltfläche mithilfe von CSS-Tools selbst anzupassen oder grafische Schaltflächen zu verwenden. <br>Bestätigungs- und Löschschaltflächen erstellen:</p> <h3>Beispiel: Submit und Reset verwenden</h3> <ul><li>Versuch es selber "</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Jetzt abonnieren"><input name="reset" type="reset" value="Klar"><p>Durch Klicken auf die Schaltfläche „Zurücksetzen“ werden alle vom Benutzer eingegebenen Daten zurückgesetzt.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Jetzt abonnieren"> <input name="reset" type="reset" value="Klar"> </form> <br> <br> </body><br></html></p> <h2>Das Aktionsattribut.</h2> <p>Hauptelement für Element <b><form> </b> ist ein Attribut <b>Aktion</b>, der den Datenhandler für das Formular angibt. Ein Datenhandler ist eine Datei, die beschreibt, was mit Formulardaten geschehen soll. Das Ergebnis dieser Verarbeitung ist eine neue HTML-Seite, die an den Browser zurückgegeben wird. Mit anderen Worten, im Attribut <b>Aktion</b> Gibt den URL-Pfad zu einer Handlerdatei auf dem Server (manchmal auch als Skriptseite bezeichnet) für die Verarbeitung des Formulars an. Die Syntax lautet wie folgt:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Die Verarbeitungsdatei befindet sich auf dem Server <i>mytestserver.com</i> im Ordner <i>Namensordner</i> und der Name des Serverskripts, das die Daten verarbeitet - <i>obrabotchik.php</i>. An ihn werden alle Daten übermittelt, die Sie auf der Webseite in das Formular eingegeben haben. Die Erweiterung .php gibt an, dass das angegebene Formular von einem in PHP geschriebenen Skript verarbeitet wird. Der Handler selbst kann in einer anderen Sprache geschrieben sein, beispielsweise in der Skriptsprache Python, Ruby usw. <br>Es empfiehlt sich, den Attributwert immer festzulegen <b>Aktion</b>. Wenn das Formular Werte an dieselbe Seite übergeben soll, auf der es sich befindet, geben Sie eine leere Zeichenfolge als Wert des Aktionsattributs an: action="".</p> <h2>Methodenattribut</h2> <p>Attribut <b>Methode</b> Gibt an, wie Informationen an den Server übertragen werden sollen. Die von Ihnen gewählte Formularübermittlungsmethode hängt von den Daten ab, die Sie mit dem Formular übermitteln möchten. Dabei spielt die Menge dieser Daten eine große Rolle. Am beliebtesten sind zwei Methoden zur Übertragung der Quelldaten Ihres Formulars vom Browser zum Server: <b>ERHALTEN</b> Und <b>POST</b>. Die Methode kann auf eine beliebige von Ihnen gewählte Methode festgelegt werden. Wenn Sie sie nicht angeben, wird die Standardmethode verwendet <b>ERHALTEN</b>. Betrachten wir die Verwendung jedes einzelnen davon.</p> <h2>POST-Methode</h2> <p>Methode <b>POST</b> Pakete bilden Daten und senden sie unbemerkt an den Server, da die Daten im Nachrichtentext enthalten sind. Webbrowser, wenn Sie die Methode verwenden <b>POST</b> sendet eine Anfrage an den Server, die aus speziellen Headern besteht, gefolgt von Formulardaten. Da der Inhalt dieser Anfrage nur dem Server zur Verfügung steht, ist die Methode <b>POST</b> werden zur Übermittlung vertraulicher Daten wie Passwörter, Bankkartendaten und anderer persönlicher Informationen der Nutzer verwendet. Methode <b>POST</b> auch zum Versenden großer Informationsmengen geeignet, da anders als die Methode <b>ERHALTEN</b> Es gibt keine Beschränkungen hinsichtlich der Anzahl der übertragenen Zeichen.</p> <h2>GET-Methode</h2> <p>Wie Sie bereits wissen, besteht die Hauptaufgabe eines Browsers darin, Webseiten vom Server zu empfangen. Also, wenn Sie die Methode verwenden <b>ERHALTEN</b>, Ihr Browser ruft die Webseite einfach wie immer ab. Methode <b>ERHALTEN</b> Umschließt auch Formulardaten, hängt sie jedoch an das Ende der URL an, bevor die Anfrage an den Server gesendet wird. Um zu verstehen, wie die Methode funktioniert <b>ERHALTEN</b>, lass es uns in Aktion sehen. Öffnen Sie das erste Beispiel aus dieser Lektion (Beispiel: Einfaches HTML-Formular) in Notepad (z. B. Notepad++) und nehmen Sie eine kleine Änderung am HTML-Code vor:</p><p> <form action="" method="GET"> </p><p>diese. ersetzen <b>POST</b> An <b>ERHALTEN</b>.<br>Speichern Sie die Datei unter dem Namen <i>Dateiname.html</i> und aktualisieren Sie die Browserseite (F5) und füllen Sie dann beispielsweise das Formular aus <i>Wasja Pupkin</i> und klicken Sie auf die Schaltfläche „Senden“. In der Adressleiste Ihres Browsers sehen Sie etwa Folgendes:</p><p>Dateiname.html?firstname=Vasya&lastname=Pupkin</p><p>Jetzt können Sie den Namen jedes Formularelements sowie seinen Wert direkt hier in der URL sehen. <br>Die URL wird durch ein Fragezeichen vom Rest der Formulardaten getrennt und Variablennamen und -werte werden durch ein kaufmännisches Und-Zeichen getrennt <b>(&) </b>.<br>Diese Methode sollte verwendet werden, wenn Sie keine großen Informationsmengen übertragen. <br>Diese Methode funktioniert nicht, wenn die Daten in Ihrem Formular vertraulich sind, z. B. die Speicherung einer Bankkartennummer oder eines Passworts. <br>Darüber hinaus die Methode <b>ERHALTEN</b> ist ungeeignet, wenn Sie mit dem Formular auch Dateien an den Server senden möchten.</p> <h2>Gruppieren von Formularelementen</h2> <p>Formularelemente, deren Bedeutung verwandt ist, können zwischen Tags gruppiert werden <b><fieldset> </b> Und <b></fieldset> </b>. Der Browser wird angezeigt <b><fieldset> </b> in Form eines Rahmens um eine Gruppe von Formelementen. Das Erscheinungsbild des Rahmens kann mithilfe von Cascading Style Sheets (CSS) geändert werden. <br>Um für jede Gruppe einen Titel hinzuzufügen, benötigen Sie ein Element <b><legend> </b>, der den Gruppentiteltext angibt, der in den Frame eingebettet werden soll.</p> <p>In Anbetracht des Grundlegenden <a href="https://wrldlib.ru/de/how-to-make-a-new-line-in-html-break-a-line-in-html-use-the-br-tag/">HTML-Tags</a> Wir können nicht umhin, ein so wichtiges Element wie Formen anzusprechen. Auf Webseiten ist häufig Feedback erforderlich. Zum Beispiel das Ausfüllen eines Formulars auf der Website, Registrierung, Autorisierung, Kommentare usw. In all diesen Fällen füllt der Benutzer spezielle Bereiche (Formularfelder) auf der Seite aus, woraufhin die Daten an den Server gesendet werden. Zur Erstellung von Feedback werden Formulare verwendet. Ein Formular ist ein Fragment eines HTML-Dokuments, das für Benutzereingaben vorgesehen ist.</p><p>Die Abbildung zeigt ein Anmeldeformular für Studierende auf der Website einer Bildungseinrichtung.</p><p>Ein Container wird zum Erstellen eines Formulars verwendet <form></form> mit dem Aktionsattribut, das die Seite auf dem Server angibt, die die vom Formular gesendeten Daten verarbeitet.</p><p>Struktur in ihrer einfachsten Form:</p><p><formaction="адрес страницы обработчика формы"><br>Formelemente... <br></form></p><p>Jedes Formular muss außerdem über eine Schaltfläche zum Senden verfügen, um nach dem Ausfüllen des Formulars Daten zu übermitteln.</p><p>Tastenstruktur:</p><p><input type="submit" name="имя кнопки" value="Anzeigename"></p><p>Um fast alle Formularelemente aufzuzeichnen, wird das Tag verwendet <input>mit dem Attribut type. Um eine Schaltfläche zu erstellen, die alle Daten aus Formularen zurücksetzt, wird die folgende Struktur verwendet:</p><p><input type="reset" name="имя кнопки" value="Anzeigename"></p><p>Um ein Textfeld zu erstellen, gibt es einen Textparameter. Die folgenden Parameter werden verwendet: Name – Feldname; Größe – für das Feld in Symbolen; maxlength – die maximal mögliche Anzahl von Zeichen im Feld; Wert – Informationen, die standardmäßig im Formular angezeigt werden</p><p>Beispiel für einen Formulareintrag mit zwei Textfeldern:</p><p><form action="obrabotka.php"><br>Gib deinen Namen ein: <br><br><input type="text" name="name" size=”15” maxlength=”20” value="" ><br><br>Nachnamen eingeben: <br><br><input type="text" name="surname" size=”20” maxlength=”25” value="" ><br><br><input type="submit" name="otpravit" value="Schicken"><br><input type="reset" name="ochistit" value="Klar"><br></form></p><p>Das Ergebnis des Formulars ist in der Abbildung dargestellt.</p><p><img src='https://i1.wp.com/webriz.ru/information/userfiles/1/saiti/1/forms/forma-html-primer.jpg.png' width="100%" loading=lazy loading=lazy></p><p>Wenn Sie eine große Menge an Informationen in ein Textfeld eingeben müssen, beispielsweise einen Kommentar, verwenden Sie das Textbereichsformular, das mithilfe eines Tags erstellt wird <textarea>mit den folgenden Attributen: Name – Name des Bereichs; cols – Anzahl der Bereichsspalten; Reihen – Anzahl der Reihen; Wrap – Methode zum Umbrechen von Zeilen (Ein – Zeilen umbrechen, Aus – Zeilen nicht umbrechen).</p><p>Zum obigen Code fügen wir ein Textbereichsfeld hinzu:</p><p>Ein Kommentar: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Das Ergebnis der Arbeit des Codes mit dem Textbereich ist in der Abbildung dargestellt.

Das nächste Element der Formulare sind Listen, die es Ihnen ermöglichen, aus den angezeigten Werten eine Auswahl zu treffen. Mithilfe von Tags können Sie ein Listenformular erstellen

Damit das Element beim Laden der Seite hervorgehoben wird, ist es im Tag erforderlich

Eine ähnliche Auswahlmethode sind die Formularelemente Checkbox und Radiobutton. Der Unterschied zwischen diesen Elementen besteht darin, dass Sie mit einem Kontrollkästchen mehrere Auswahlen treffen können, während mit einem Optionsfeld nur eine einzige Auswahl möglich ist.

Aufbau eines Checkbox- und Radiobutton-Eintrags:

Text

Radio knopf:

Text

In in der Struktur angegebenen Elementen wird standardmäßig das aktivierte Attribut verwendet, um das Kontrollkästchen und das Optionsfeld hervorzuheben. Ein Beispiel für die Verwendung eines Kontrollkästchens, eines Optionsfelds und eines HTML-Codes ist in der Abbildung dargestellt.

Ein weiteres Formularelement ist eine Schaltfläche, die mithilfe des Typ-Tag-Attributs angegeben wird mit der Werttaste:

Im angegebenen Code zum Erstellen einer Schaltfläche gibt es einen onclick-Parameter, der normalerweise Code in einer Programmiersprache angibt, um eine bestimmte Aktion auszuführen, wenn auf diese Schaltfläche geklickt wird:

Um eine Nachricht in einem speziellen Fenster anzuzeigen, verwenden Sie den JavaScript-Befehl –aler. Das Ergebnis des Beispiels ist in der Abbildung dargestellt.

Um ein Bild in eine Schaltfläche einzufügen, verwenden Sie den im folgenden Beispiel gezeigten Code:

Bei der Registrierung und Anmeldung auf Websites wird ein Feld mit einem versteckten Test verwendet, der als Sterne angezeigt wird. Dies ist das Passwort-Formularelement:

Die Registrierung auf der Website ist oft in mehrere Seiten unterteilt und jede weitere Seite muss Informationen der vorherigen enthalten. Um die übermittelten Informationen zu verbergen, wird das versteckte Formularelement verwendet:

Das ausgeblendete Formularelement wird im Browserfenster unsichtbar sein.

Um Dateien auf den Server hochzuladen, verfügen Formulare über ein Dateielement. Nachfolgend finden Sie einen Beispielcode zum Hochladen von Dateien auf den Server:

In diesem Thema haben wir uns also Formularelemente zum Erstellen verschiedener HTML-Seiten angesehen, die Ihnen zusammen mit Skripthandlern auf einem Computer oder Server die Entwicklung vollwertiger Webanwendungen ermöglichen.

Ein HTML-Formular ist ein Teil eines Dokuments, der es dem Benutzer ermöglicht, interessante Informationen einzugeben, die anschließend serverseitig akzeptiert und verarbeitet werden können. Mit anderen Worten: Formulare werden verwendet, um von Benutzern eingegebene Informationen zu sammeln.

Um festzustellen, zu welchem Formularelement die aktuelle Beschriftung gehört, müssen Sie das for-Attribut des Tags verwenden . Der Wert des for-Attributs muss mit dem Wert des globalen Attributs des Formularelements übereinstimmen, für das die Bezeichnung gelten soll. Das for-Attribut darf nicht verwendet werden, wenn das Element wird innerhalb des Elements sein .

Schauen wir uns ein Anwendungsbeispiel an:

</span> Beispiel für die Verwendung eines Tags <label><span> for = "yes" > Ja Nein >

In diesem Beispiel:

Innen Erste Formen:
- Gesendet zwei Radio Knöpfe ( ), um eine aus einer begrenzten Anzahl von Optionen auszuwählen. Beachten Sie noch einmal, dass es sich um Optionsfelder innerhalb desselben Formulars handelt Es muss der gleiche Name angegeben werden, wir haben unterschiedliche Werte angegeben. Für Erste geprüft , was angibt, dass das Element beim Laden der Seite vorausgewählt werden soll (in diesem Fall ein Optionsfeld mit dem Wert ja ). Darüber hinaus haben wir globale Attribute für die Optionsfelder festgelegt, die eine eindeutige Kennung für das Element definieren.
- Zwei Elemente platziert , die die Textbeschriftungen für unsere Textfelder definieren. Beachten Sie, dass wir das for-Attribut verwendet haben, um zu bestimmen, zu welchem Formularelement die aktuelle Beschriftung gehört. Der Wert des for-Attributs entspricht dem Wert des globalen Attributs des von uns benötigten Optionsfelds.
Innen zweite Formen:
- Gesendet zwei Radio Knöpfe ( ), um eine aus einer begrenzten Anzahl von Optionen auszuwählen. Für zweite Für Optionsschaltflächen haben wir ein aktiviertes Attribut angegeben, das angibt, dass das Element beim Laden der Seite vorab ausgewählt werden soll (in diesem Fall ein Optionsfeld mit dem Wert no ). Darüber hinaus haben wir für Radio-Buttons spezifiziert einzigartige Werte innerhalb der Form und die gleichen Namen.
- Zwei Elemente platziert , wir haben unsere Optionsfelder darin platziert. Im Gegensatz zur vorherigen Methode ist es nicht erforderlich, globale Attribute (Bezeichner für das Element) für Optionsfelder anzugeben und das for-Attribut für Textbeschriftungen zu verwenden, um auf sie zu verweisen (eine Bindung herzustellen).

Im Browser sehen beide Möglichkeiten (Methoden) zur Verwendung von Textbeschriftungen identisch aus:

Tooltip für Eingabefelder

Schauen wir uns ein Anwendungsbeispiel an:

Beispiel für die Verwendung des Platzhalterattributs <span>

IN in diesem Beispiel Wir haben für das Element angegeben mit Typ Text (ein einzeiliges Textfeld) und Typ Passwort (Passwortfeld), ein Texthinweis für den Benutzer (das Platzhalterattribut), der den erwarteten Wert für die Eingabe beschreibt.

Das Ergebnis unseres Beispiels:

Fragen und Aufgaben zum Thema

Bevor Sie mit dem nächsten Thema fortfahren, erledigen Sie die Übungsaufgabe:

Erstellen Sie mit den gewonnenen Erkenntnissen das folgende Bestellformular:

Eine Einschränkung: In Feldern, in denen eine Auswahl erwartet wird, sollte eine Auswahl durch Klicken auf den Text und nicht nur auf das Element selbst möglich sein.

Überprüfen Sie nach Abschluss der Übung den Seitencode, indem Sie das Beispiel in einem separaten Fenster öffnen, um sicherzustellen, dass Sie alles richtig gemacht haben.