Nun, da wir gesehen haben, wie man Schaltflächen zu unserer Webseite hinzufügen.
In dieser Übung werden wir uns Formulare ansehen und wie wir Formulare zu
unserer Webseite hinzufügen und diese Formularelemente auch mit den Bootstrap-Klassen formatieren können.
Gehen Sie zurück zur Seite contactus.html,
scrollen Sie nach unten, bis Sie diesen Kommentar dort namens „Formular geht hier“ sehen.
Wir werden dies durch das Formular in dieser Webseite ersetzen.
Also, lassen Sie uns das löschen und dann
das Formular an dieser bestimmten Stelle innerhalb des div dort konstruieren.
Um mit dem Formular
zu beginnen, werde ich das Formular HTML-Tag verwenden und das Formular innerhalb dieses HTML-Tags erstellen.
Also, innerhalb dieses Formular-Tags,
lassen Sie uns die Radiuselemente unseres Formulars hinzufügen.
Also, in dieser Form
werde ich diese Form in mehrere Reihen aufteilen.
Um Ihr Formular in Zeilen zu unterteilen,
können Sie einfach ein div mit der class = „form-group“ verwenden und dann die Zeilenklasse darauf anwenden.
Also, damit werden wir hier in zwei Formulargruppen hinzufügen.
Ich werde das kopieren und es dann unten hier unten einfügen.
Sie können also sehen, dass ich diesem Formular hier zwei Zeilen hinzufügen werde.
Also, um ein Element in dieses Formular hinzuzufügen,
gehen wir zu diesem div und dann werde ich anfangen, indem ich hier ein Label-Tag verwende.
Und für die Label-Tags,
also werde ich zwei Zeilen haben;
eine, die dem Benutzer erlaubt, ihren Vornamen einzugeben,
und die zweite für ihren Nachnamen.
Also, hier werden wir dieses Label verwenden, um die Klasse dort anzugeben.
Nun, Darüber hinaus, Bootstrap ermöglicht es uns, das Bootstrap-Raster
zu verwenden, um anzugeben, wie diese Formulare werden angelegt werden, so dass ich die col-md-2 anwenden.
Sie können sehen, dass ich die md-2-Spaltenklassen auf dieses bestimmte Element angewendet habe.
Also, dieses Element im Formular wird zwei Spalten besetzen.
Also, innerhalb dieses Formularelements,
haben wir jede Zeile in 12 Spalten unterteilt.
Also, weil wir bereits die Zeile für das div verwendet haben,
so dass wir dort 12 Spalten innerhalb des div zur Verfügung stellen.
Darüber hinaus muss ich das Klassencol-Formularlabel darauf anwenden.
So kann ich hier ein Label angeben.
Also, für dieses Etikett
werde ich das Etikett als Vornamen ausfüllen und dann das Etiketten-Tag schließen.
Dieses Label-Tag erlaubt mir, ein Label zu geben,
das zwei linke Spalten in dieser bestimmten Zeile besetzt.
Auf der rechten Seite werde ich ein anderes div verwenden, das die Klasse als col-md-10 angewendet hat.
Beachten Sie, dass das frühere Etikett dort die col-md-2 verwendet hat.
Also, für dieses div,
werde ich die col-md-10 dort anwenden.
Und dann
werde ich in diesem div ein Eingabeelement anwenden,
das vom Typ Text ist.
Also, wenn Sie mit den Formularen aus HTML vertraut sind,
werden Sie sehen, dass wir die Formularelemente aus HTML verwenden, um
dieses Formular hier zu erstellen, so dass das Eingabefeld hier vom Typ Text ist.
Nun, hier werden wir die Bootstrap-Klassen darauf anwenden
und die entsprechende Bootstrap-Klasse dafür
ist Formularsteuerung und dann kann ich
eine ID dafür als Vorname angeben.
Beachten Sie also, dass diese ID mit diesem Label für div übereinstimmt.
Also, Vorname, und dann Name als
Vorname und auch ich werde
einen Platzhalter dafür angeben, so lassen Sie mich die nächste Zeile hier verwenden,
Platzhalter als, ich bin sicher, aus Ihrem Wissen über HTML,
Sie verstehen, wie diese Spezifikation hier gemacht wird.
Damit haben wir nun unser erstes Formularelement in unserer Form erstellt.
Werfen wir einen kurzen Blick auf die Webseite. Wenn Sie
auf unsere Webseite gehen, können Sie nun sehen, wie das Hinzufügen in den Formularelementen
dieses Eingabetextfeld und das Label auf der linken Seite erstellt hat.
Jetzt werde ich eine weitere Zeile mit dem Nachnamen hinzufügen.
Gehen Sie zurück zu meiner contactus.html,
lassen Sie mich einfach diesen Teil kopieren und fügen Sie ihn dann in das zweite div ein
und gehen Sie dann hinein und bearbeiten Sie das.
Vom Vornamen ändere ich das in Nachname.
Stellen Sie sicher, dass Sie alle Änderungen korrekt abgeschlossen haben.
Selbst eine fehlende falsche Bearbeitung,
wird dazu führen, dass Ihr Formular nicht richtig funktioniert, so stellen Sie sicher, dass
alle Vornamen Dinge hier durch meinen Nachnamen ersetzt werden.
Also, der Nachname,
md-10 Textformular-Steuerelement.
Die ID hier sollte Nachname sein und der Name
sollte auch Nachname und der Platzhalter
wieder der Nachname sein, so dass dies in einer zweiten Zeile mit dem Nachnamen hinzufügen sollte.
Gehen Sie zu Ihrer Webseite,
können Sie sehen, jetzt das Formular
langsam in Form, so dass Sie den Vornamen und Nachnamen haben.
Jetzt können wir als nächstes in einem Eingabeelement hinzufügen.
Wir werden sehen, wie das funktioniert, wenn wir den Code hinzufügen. Wenn wir
nun zum nächsten Teil der Übung wechseln,
fügen wir hier zwei weitere Felder in
unser Formular ein, um die Telefonnummer und die E-Mail-ID einzugeben.
Da die grundlegende Struktur des Codes dem
Vornamen und dem Nachnamen ähnlich ist, den Sie bereits dem Formular hinzugefügt haben,
also werde ich nur den Code aus dem Vornamen und
dem Nachnamen kopieren und ihn dann hier einfügen und dann den Code entsprechend ändern.
Also, ich habe den Code aus dem Vornamen und dem Nachnamen hier eingefügt.
Lassen Sie uns fortfahren und ändern Sie dies nun, um es in Felder zu verwandeln,
die es dem Benutzer ermöglichen, die Telefonnummer und die E-Mail-ID einzugeben.
Also, für die Telefonnummer,
also hier haben wir bereits den Vornamen und den Nachnamen oben.
Also, die dritte, werde ich das ändern, um für „Telnum“ zu beschriften.
Also, das ist von der Telefonnummer und dann den Klassen,
ich werde eine col-12-Klasse auf dieses Sprichwort anwenden, dass dieses Etikett in
seiner eigenen Zeichnung sein wird, wenn das Formular auf extra kleinen bis kleinen Bildschirmgrößen angezeigt wird.
Und dann, für mittlere bis höhere Bildschirmgröße,
würde dies in zwei Spalten
dieser bestimmten Zeile hier angezeigt werden, so dass die Änderung, die wir dort vornehmen werden.
Und dann auch, das Etikett selbst,
lassen Sie mich ändern, dass Telefonnummer kontaktieren, kontaktieren Sie Tel.
Nun, die Telefonnummer selbst,
lassen wir den Benutzer es als zwei Teile eingeben; eine,
die ist die Vorwahl und die zweite,
die die tatsächliche Telefonnummer wäre.
Also, ich werde diesen Teil des Codes nehmen, der
das Eingabefeld war, das wir für
den Vornamen hatten, und dann einen weiteren unten hier unten erstellen,
den ich für die Telefonnummer selbst verwenden werde.
Und jetzt werden wir diesen ersten in das Feld für die Eingabe der Vorwahl verwandeln.
Sie können es auch zum Beispiel
für Ländercode verwenden, wenn Sie das in das Formular einfügen möchten.
Also, für die Vorwahl selbst,
werde ich mich für das div bewerben,
die Klasse = „col-5 col-md-3 hier“.
Beachten Sie also, dass
wir für den mittleren Bildschirm zwei Spalten haben, die von der Beschriftung besetzt sind,
drei Spalten, die von der Ortskennzahl selbst besetzt sind, und
die restlichen sieben Spalten werde ich es dem Textfeld hier geben.
Also, ähnlich, für die Vorwahl sage ich Col fünf.
Also, für extra kleine bis kleine Bildschirme wird dies
fünf Spalten besetzen und dann für die restlichen sieben Spalten,
lassen wir die Telefonnummer selbst besetzen.
Also, lassen Sie mich das nächste zu col-7 und col-md-7 hier ändern.
Nun, dieses Feld werde ich dies in tel ändern,
Eingabetyp tel für Telefonnummer und die Klasse ist Formular-Steuerelement,
die ID ist Vorwahl und der Name ist Vorwahl und dann der Platzhalter,
ich werde dies in Ortskennzahl ändern.
Und der nächste Teil,
wir werden diesen auch Typ tel ändern und ID ist telnum,
der Name ist telnum und der Platzhalter,
selbst, wäre tel Nummer.
Dies wird also das Rufnummernfeld bilden,
das als zwei Teile eingegeben wird:
die Vorwahl und die Telefonnummer.
Wir verwenden also wieder
die Spaltenklassen, um zu strukturieren, wie
die beiden Teile des Eingabefeldes in der Form dort angezeigt werden.
Nun die letzte, natürlich,
dies wäre für E-Mail-ID so das Etikett,
Ich verwandle das in E-Mail-ID und dann
ist das Etikett selbst E-Mail und Eingabetyp ist E-Mail.
Nun ändern wir den Typ in E-Mail,
die in HTML erlaubt ist, so dass später, wenn wir eine Formularvalidierung durchführen müssen,
dann wissen wir, dass dieses Feld
nur einen E-Mail-Typ von Eintrag dort enthalten sollte, und die ID,
selbst, E-Mail-ID und den Namen E-Mail-ID und den Platzhalter.
E-Mail. Das war's.
Lassen Sie uns die Änderungen speichern und gehen und werfen Sie einen Blick auf das aktualisierte Formular. Wenn Sie
zum Formular im Browser gehen,
sehen Sie nun zwei zusätzliche Zeilen in unser Formular eingefügt.
Der Vorname und der Nachname werden im vorherigen Teil der Übung hinzugefügt.
Also, hier haben wir die Kontakt-Telefonnummer,
die in die Vorwahl und Telefonnummer unterteilt ist.
Beachten Sie, wie wir die Spaltenklassen verwendet haben, um diese beiden
im Formular selbst zu positionieren und dann das E-Mail-Feld hier.
Werfen wir einen Blick auf die gleiche Sache auf einer extra kleinen Bildschirmgröße.
Wenn Sie also zu einer extra kleinen Bildschirmgröße gehen,
werden Sie feststellen, wie das Formular selbst ausgelegt ist.
Sie sehen, dass sich die Beschriftung oben und dann das Feld selbst unten befindet.
Also Vorname, Nachname.
Beachten Sie, wie die
Eingabefelder der Kontakt-Telefonnummer unter Verwendung der Spaltenklassen positioniert
werden, also
die Ortsvorwahl hier, die Telefonnummer
und dann die E-Mail-ID hier.
Jetzt fahren wir mit der Übung fort.
Weiter im nächsten Schritt,
werden wir in einem Kontrollkästchen hinzufügen und dann werden wir in einem ausgewählten zwei oder vier hinzufügen.
Um ein Kontrollkästchen hinzuzufügen,
kopieren wir einfach diese Formulargruppe hier, so dass wir es als eine weitere Zeile hier hinzufügen,
und fügen Sie dann in der Formulargruppe div hier,
und schließen Sie dann das div hier.
Und dann innerhalb dieser Form Gruppe Zeile,
so gibt es uns eine weitere Zeile in der Form.
Lassen Sie mich in dieser Formulargruppenzeile zuerst das Kontrollkästchen hinzufügen.
Um dies zu tun, fügen wir ein div mit der class = „col-md-6" hinzu,
so dass Sie sehen, dass dies
sechs Spalten in der mittleren bis extragroßen Bildschirmgröße belegen
wird und dann offset-md-2, so dass dies es
nach rechts um zwei Spalten versetzt und dann das Kontrollkästchen dort angezeigt wird.
Nun, hier, um ein Kontrollkästchen hinzuzufügen,
sagen wir div mit der class = „form-check“ und
in dieser Form-check-Klasse fügen wir einen Eingabetyp = „checkbox“
und die class = „form-check-input“ hinzu und lassen Sie mich dann zur nächsten Zeile gehen und dann
name = „approve“ und die
ID = „approve“ und der Wert ist dort eine leere Zeichenfolge.
Und zu diesem Kontrollkästchen
fügen wir ein Label hinzu.
Also, um ein Label hinzuzufügen,
gehen wir und fügen in label
class = „form-check-label“ hinzu und dann
ist dieses Label für dieses Kontrollkästchen, das wir gerade hinzugefügt haben.
Also, deshalb werden wir sagen für = „genehmigen“, so beachten Sie, dass
wir für das Kontrollkästchen den Namen und die ID als genehmigen angegeben hatten, deshalb
werden wir hier für das Etikett für genehmigen gespeichert.
Und dann innerhalb dieses Labels
geben wir den Inhalt als „Dürfen wir uns mit Ihnen in Verbindung setzen?“
Und dann speichern Sie die Änderungen und lassen Sie uns gehen und werfen einen Blick auf unser Formular.
Gehen Sie auf die Webseite,
können Sie jetzt sehen, dass wir in einem Kontrollkästchen zusammen mit einem Label hier hinzugefügt haben und feststellen
, dass dieses Label wegen der Verwendung des „starken“ Tags dort fett ist,
und wir haben offset-md-2.
Deshalb drücken wir dieses Kontrollkästchen den ganzen Weg hierher.
Dies hat hier kein Label, aber stattdessen wird dies direkt hier geschoben,
also ist das der Grund für die Verwendung von offset-md-2 hier,
und dieser nimmt md-6 also sechs Spalten hier ein. Damit
sind wir noch nicht fertig.
Ich werde hier im nächsten Teil hinzufügen,
der dort ein Auswahlfeld ist.
Also werde ich hier ein weiteres div mit
der class = „col-md-3 offset-md-1" anwenden.
Und in diesem div
werde ich eine Auswahl definieren.
Also, wieder, aus Ihrem Wissen über HTML,
wissen Sie, was eine Auswahl für Sie tut.
Jetzt wird die Auswahl
das Klassenformular-Steuerelement anwenden, also ist dies Bootstrap-Klasse, die ich auf die Auswahl hier anwende,
und schließen Sie die Auswahl.
Und hier drin muss ich die Optionen für die Auswahl geben.
Also, ich benutze eine einfache Auswahl hier,
und so ist die erste eine Option
für Telefon oder E-Mail und schließen Sie die Option.
So erstellt dies ein Auswahlelement in meinem Formular,
das zwei Optionen hat:
Telefon und E-Mail,
also speichern wir die Änderungen. Wenn Sie
einen Blick auf unsere Webseite werfen,
können Sie jetzt sehen, wie die Telefon- und E-Mail-Auswahlbox jetzt hier erstellt wird, so dass
ich auswählen kann, welche zu tun ist, und dann können Sie auch das Kontrollkästchen so aktivieren.
Also, das beendet die nächste Zeile.
Lassen Sie uns eine weitere Zeile hinzufügen,
die es dem Benutzer ermöglicht, sein Feedback tatsächlich einzugeben.
Also, ich werde einen Textbereich verwenden, um das zu formatieren.
Für den nächsten werde ich einen Textbereich verwenden.
Also, was ich tun werde, ist, ich gehe einfach nach oben und kopiere diesen E-Mail-Teil davon.
Ich bin zu faul, um ständig alles einzutippen.
Also neige ich dazu, ausschneiden und einfügen, wo immer möglich, aber für diesen
sollte das Etikett Feedback und die Spaltenformularbeschriftung sein,
und dann ist der eigentliche Text „Ihr Feedback hier“.
Das ist also das Etikett.
Und dann, hier, der zweite,
werde ich diesen formatieren.
Anstelle des Eingabetyps
werde ich das in einen Textbereich ändern,
und dann brauche ich den Typ dort nicht.
Textbereich, ist die Klasse immer noch Formular-Steuerelement und die ID ist Feedback.
Name ist Feedback und der Platzhalter wird
hier nicht benötigt und stattdessen ändern, wie viele Zeilen ich
aus dem Feedback für den Textbereich geben möchte?
Also werde ich 12 Zeilen sagen und dann Text schließen.
Beachten Sie also, wie ich den Textbereich in mein Formular aufgenommen habe.
Speichern Sie die Änderungen.
Werfen Sie einen Blick. Wenn du auf meine Webseite gehst,
siehst du jetzt meine Form, die hier seine vollständige Form annimmt.
Sie haben
dort den Vornamen, Nachnamen, Telefon, E-Mail und dann das Feedback.
Der Textbereich mit 12 Zeilen.
Jetzt benötigen Sie eine Schaltfläche, auf die der Benutzer klicken sollte, um sein Feedback abzugeben.
Also, lassen Sie in eine Senden-Schaltfläche zu diesem Formular hinzufügen.
Gehen Sie wieder zum Formular zurück,
erstellen Sie hier eine weitere Zeile, indem Sie
das div hier mit der
Formulargruppenzeile hier verwenden, und hier werde ich eine Schaltfläche hinzufügen.
Also, ich würde sagen, div
class = „offset-md-2", weil ich möchte, dass meine Schaltfläche
direkt unter all den Feldern positioniert wird, die ich
hier habe, so dass die linken beiden Spalten für das Label verwendet werden.
Der Submit-Button benötigt also kein Label, also werde ich
es hier einfach nach rechts drücken und dann würde ich
„col-md-10" sagen, damit dies die restlichen 10 Spalten dort belegen würde.
Und dann in diesen div
werde ich dort eine Schaltfläche hinzufügen.
Also, wenn Sie eine Schaltfläche zu Ihrem Formular hinzufügen,
verwenden Sie die Schaltfläche Tag hier mit einem Typ senden.
Also, dies ist die Absende-Button für Ihr Formular dort und Ihre Klasse.
Denken Sie daran, Tastenklassen, Taste primäre,
so würde dies eine dunkelblaue Schaltfläche in Ihrem Formular erstellen und
dann schließen Sie die Schaltfläche dort,
und dann werde ich einfach in und innerhalb der Schaltfläche gehen,
Ich werde den Namen als „Feedback senden“ geben und dann die Änderungen speichern.
Nun, unser Formular ist vollständig.
Lassen Sie uns also einen Blick auf die endgültige Version unseres Formulars werfen.
Gehen Sie auf unsere Webseite,
können Sie jetzt sehen, das Formular ausgefüllt.
All diese Felder haben wir bereits gesehen,
die Schaltfläche am unteren Rand mit der Formulierung „
Feedback senden“ und die dunkelblaue Schaltfläche wegen der Verwendung der Schaltfläche „primär“.
Damit wird das Formular ausgefüllt, das wir auf unserer Webseite erstellen wollten.
Damit schließen wir diese Übung ab,
in der wir gesehen haben, wie wir ein Formular konstruieren und es in unsere Webseite aufnehmen können.
Sie arbeiten mit Formularen in einigen
der späteren Übungen, einschließlich Ihrer zweiten Aufgabe.
Dies ist ein guter Zeitpunkt für Sie, einen guten Kommentar mit den Nachrichtenformularen zu machen.