Und willkommen zurück.
Wir werden auf einige fortgeschrittenere Tags eingehen und die wahrscheinlich wichtigsten Tags, die Sie außer den bisher
behandelten verwenden werden, sind Tags, die wir zum Erstellen von Formularen benötigen.
Wie Sie wissen, gibt es auf Websites normalerweise eine Art Anmelde- oder Registrierungsformular.
Also werden wir das heute aufbauen, um loszulegen.
Lassen Sie uns hier einfach eine neue Datei erstellen.
Wir speichern es und nennen es auf unserem Desktop registriertes HTML.
Perfekt, und wir wissen, dass wir auch unseren kleinen Shortcut verwenden wollen und wir werden ihn registrieren, speichern.
Und jetzt fügen wir in der Indexdatei einen weiteren Link hinzu.
Das verweist auf register dot html und ich sage nur hier, registrieren.
In Ordnung, wir speichern diese beiden Dateien und aktualisieren uns, wir haben uns registriert.
Klicken Sie auf Registrieren.
Nun, wir haben noch nichts, aber es sieht so aus, als ob es funktioniert, fügen wir dies in eine neue Zeile ein, nur
weil es so hübscher aussieht.
Um das zu tun, werden wir, wenn Sie sich erinnern, ein Bremsetikett hinzufügen.
Also lass uns auffrischen.
Da gehst du.
Wir haben eine neue Seite und registrieren uns.
OK, also bauen wir dieses Formular aus, wenn wir DOT registrieren.
Die Art und Weise, wie wir Formulare in HTML schreiben, während es praktischerweise ein Formular-Tag gibt.
OK, aber dieses Formular-Tag selbst muss das eigentliche Formular enthalten.
Was für Formelemente haben wir also?
Nun, wenn wir uns an unseren guten alten Freund W drei C erinnern, lasst uns Formulare eingeben.
Und wir können hier drüben sehen, dass wir eine kleine Farm haben.
Und Aktualisieren macht den Vollbildmodus und Sie können hier sehen, dass es eine Menge Informationen darüber gibt,
aber Sie können das vorerst selbst nachschlagen.
Ich werde Ihnen die gängigsten vorstellen, wahrscheinlich die, die Sie zu 90 Prozent verwenden
werden.
Das erste, wie wir es bei jedem Formular tun und gehen wir erst einmal zu dieser Basis, ist das, was wir unseren Namen eingeben
möchten.
Also, wie machen wir das?
Wir haben ein Input-Tag.
Das hat eine Art Text, denn unser Name wird in Textform sein und wir können das abschließen und es ist
eigentlich ein selbstschließendes Tag.
Wenn ich jetzt speichere und aktualisiere, OK, wir haben hier eine kleine Box.
Hoffentlich sieht man das.
Aber gut, wir sollten es wahrscheinlich betiteln, weil wir nicht wissen, was wir so beantworten sollen.
Also setzen wir uns hier ein.
Wir sagen den Vornamen.
Semikolon und speichern, aktualisieren wir, wir haben den Vornamen und jetzt machen wir ihn etwas größer.
Da gehst du.
Jetzt können Sie hier Ihren Namen eingeben.
Fantastisch.
Nun, lassen Sie uns einen weiteren für unseren Nachnamen hinzufügen.
Und wieder haben wir unseren Eingabetyp, also ein Attribut und ein Textwert.
Und wenn wir aktualisieren, haben wir den Nachnamen, OK, aber es sieht irgendwie hässlich aus. Denken Sie daran, dass HTML nur Zeile für Zeile
liest und nicht wirklich weiß, dass wir hier ein Leerzeichen brauchen.
Also können wir wieder a hinzufügen.
Brechen Sie hier zurück und aktualisieren Sie, und wir haben Vor- und Nachnamen.
OK, das ist ziemlich selbsterklärend.
Was haben wir noch in einer Form?
Wir haben E-Mail.
Lassen Sie uns also ein weiteres Feld hinzufügen, nämlich E-Mail, und wir werden erneut eingeben.
Geben Sie Anrufe, Text ein.
Nun, fügen Sie hier eine weitere Pause hinzu, denn wir werden diesen Abstand brauchen.
Und speichern wir die Aktualisierung, großartig.
OK, wir haben also unser allgemeines Anmeldeformular.
Und natürlich brauchen wir bei jedem Formular eine Art von Schaltflächen, richtig, zum Beispiel müssen wir dies irgendwo einreichen, damit wir uns
registrieren können.
Da ist wieder ein schöner Appetit.
Also geben wir statt eines Texttyps eine Eingabe ein.
Es gibt einen Übermittlungstyp.
Also das.
Wenn wir hier noch eine Pause machen würden.
Und ich sage das, ich erfrische es hat einen Gipfel.
Woher kommt nun dieser Gipfel?
Nun, wenn Sie einen Eingabetyp eingeben, wird automatisch eine Schaltfläche erstellt.
Und wenn Sie nicht angeben, was Sie sagen sollen, habe ich nur diesen Text.
Aber wir können das ändern, damit wir Wert legen können.
Und wir werden registrieren.
Speichern Sie diese Aktualisierung, wir haben jetzt eine Schaltfläche zum Registrieren.
OK, aber was ist, wenn wir in diesem Feld Fehler machen, wir schreiben Sachen und wofür wir das zurücksetzen wollen, wieder
gibt es dafür jetzt einen Eingang.
Und die Art dieser Eingabe wird, wie Sie sich vorstellen können, zurückgesetzt.
Wenn wir dies jetzt bei einer weiteren Unterbrechung hier schließen, können wir das tatsächlich in derselben Zeile belassen,
wir speichern die Aktualisierung.
Und wir haben zurückgesetzt, also wenn ich jetzt etwas hier eintippe und sagen wir, ich möchte nicht gut, mir gefällt das nicht,
muss ich das Formular zurücksetzen.
Ich kann einfach auf Reset klicken und es löscht alles für uns.
OK, Sie fragen sich vielleicht, was passiert, wenn wir auf Registrieren klicken, bevor wir darauf eingehen. Ich möchte nur alle
gängigen Eingabetypen durchgehen und dann auf Register klicken, um zu sehen, was mit der
E-Mail passiert.
Wir möchten, dass es idealerweise zunächst einmal erforderlich ist, damit Sie sich nicht registrieren können, wenn Sie
auf Registrieren klicken, wenn Sie keine E-Mail-Adresse angegeben haben.
Und es gibt ein Attribut, das wir dafür verwenden können und das erforderlich ist.
Und hier müssen wir eigentlich keinen Wert angeben, da automatisch davon ausgegangen wird, dass erforderlich gleich wahr ist,
was bedeutet, dass dieses Formularfeld erforderlich ist.
Wenn ich also sage, dass ich aktualisiere, es leer lasse und auf Registrieren klicke, sage ich: Bitte füllen Sie dieses Feld
aus.
Jetzt wollen wir auch sicherstellen, dass es sich um ein geeignetes E-Mail-Feld handelt. Wenn ich also so etwas eingebe,
möchten wir trotzdem sicherstellen, dass dies eine falsche E-Mail ist.
Wir wollen uns nicht registrieren.
Der Eingabetyp von Text, den ich Ihnen für E-Mail gesagt habe, ist also tatsächlich falsch, es gibt einen bestimmten, den
wir verwenden können, und das ist, wie Sie sich vorstellen können, E-Mail.
Wenn ich jetzt etwas aktualisiere und eintippe, das keine E-Mail ist, und ich auf Registrieren klicke.
Ich sage, bitte geben Sie eine und die E-Mail-Adresse an.
Sehr schön.
Es ist wie Magie, es tut dies für dich, was sehr, sehr schön ist.
Lassen Sie uns unser Wissen über Eingaben erweitern und einige weitere Felder hinzufügen, die höchstwahrscheinlich benötigen, um normalerweise
den Geburtstag von jemandem zu erfahren.
Also fügen wir hier Geburtstag hinzu.
Und für diesen Eingabetyp machen wir Typ.
Datum.
Also, wenn ich das sage und ich erfrische, haben wir eine nette kleine Datumsauswahl, damit ich hier alles auswählen kann.
Alles klar, was brauchen wir noch?
Wir brauchen auch das Geschlecht, also machen wir den Eingabetyp und das Geschlecht.
Nun, es gibt keinen besonderen Appetit auf Geschlecht, aber es gibt etwas, das Radio genannt wird.
Und Radio ist, wie der Name schon sagt, Radiobuttons.
Also jetzt.
Klicken Sie auf Aktualisieren, und ich habe ein Optionsfeld, aber wir möchten idealerweise Optionen haben, oder?
Also, wie machen wir das?
Für das Radio müssen wir also auch sagen, ob es männlich oder weiblich ist, lassen Sie uns innerhalb des Geschlechts haben.
Wir machen hier in der Schlange eine Pause und sagen.
Und geben Sie Radio ein und wir sagen männlich und wir wollen auch.
Weiblich.
Und wir wollen auch.
Sonstiges.
Und wenn wir dies aktualisieren, haben wir männlich, weiblich und andere, aber Sie sehen hier ein Problem, ich klicke einfach auf die Optionsfelder
und kann sie nicht abwählen, und idealerweise können Sie das.
Sie sollten nur einen auswählen können.
Und im Moment wissen die Radiobuttons nichts von der Existenz des anderen.
Wir möchten sicherstellen, dass sie wissen, dass sie miteinander verbunden sind, zur Familie gehören und nur einer von ihnen ausgewählt werden
kann.
Also, wie machen wir das?
Das tun wir über das name-Attribut.
Also für den Namen wird Geschlecht sagen.
Und dieses Namensattribut muss bei allen Optionsfeldern übereinstimmen, damit sie wissen, dass sie zusammen sind und Teil
des Eingabefelds Geschlecht sind.
Also wenn ich hier speichere und aktualisiere.
Jetzt sehen Sie, dass ich nur einen auswählen kann.
Alles klar, perfekt.
Was sollen wir noch haben?
Sagen wir, ich möchte wirklich wissen, ob Sie Haustiere haben.
Also mit Haustieren.
Wir werden einen Eingabetyp haben oder Sie können mehrere Haustiere haben, also keine Optionsfelder, sondern ein Kontrollkästchen.
Also checkbox, wir wollten Katzen oder Hunde haben, aber Katze und wir wollen.
Kann heute nicht tippen.
Aktivieren Sie das Kontrollkästchen, und wir möchten Hunde haben.
Also speichern wir das, aktualisieren wir und sehen uns das an, wir haben Haustiere, aber dieses Mal sind Checkboxen, was
bedeutet.
Ich kann mehrere auswählen.