Online -Registrierungsformular
Dieses Projekt ist das dritte Projekt für den Frontend Development -Kurs von Team Treehouse.
In diesem Projekt erstellen Sie ein reaktionsschnelles, mobilfreundliches Registrierungsformular mit einer Vielzahl von Eingangstypen und -attributen von HTML-Formular. Mithilfe der mitgelieferten Mockup-Dateien erstellen Sie mithilfe von Medienabfragen eine mobile und Desktop-Version des Formulars und einen "mobilen" Ansatz.
Live -Link für dieses Projekt finden Sie hier
Screenshot
Anweisungen
- Erstellen Sie das Layout mit dem ersten Design von Mobile :
- Stellen Sie sicher, dass die HTML -Datei das Ansichtsfenster -Meta -Tag im Kopf des Dokuments enthält. Konfigurieren Sie das Ansichtsfenster, um zu verstehen, warum und wie dieses Tag hinzugefügt wird.
- Schauen Sie sich das bereitgestellte Modell (Mobile-Form.png) an und fügen Sie Ihren Inhalt in Ihrer Index.html-Datei hinzu.
- Erstellen Sie die Formularstruktur: Verwenden Sie nur ein
<form> Tag. Das <form> -Tag sollte alle Formularelemente enthalten. Fügen Sie für jeden der folgenden Abschnitte einen fieldset und legend hinzu:
- Abschnitt "Kontaktinformationen" der Seite und
- Der Abschnitt "Newsletter" der Seite
- Stellen Sie sicher, dass Sie die folgenden Feldtypen bei der Formulierung einfügen:
- Texteingabe
- E -Mail -Eingabe
- Telefoneingabe
- Wählen Sie Menü
- Kontrollkästchen
- Optionsknöpfe
- Textbereich
- Schaltfläche senden
- Formfelder sollten die folgenden Attribute enthalten:
-
input : Sollte id , type und name enthalten. -
select UND textarea : Sollte id und name enthalten.
- Fügen Sie jedes Formularelement mithilfe des HTML
<label> -Tags zu Beschriftungen hinzu. Der Text in den Etiketten sollte den Namen der Formfelder in den Modellen übereinstimmen.
- Stellen Sie sicher, dass Sie jedes
<label> -Element ordnungsgemäß mit seiner entsprechenden Formregelung über das for Attribut entsprechende Formular ordnungsgemäß kombinieren. Ein Beispiel finden Sie im obigen Link. Und vergessen Sie nicht das Textbereichselement. Das braucht auch ein funktionierendes Etikett.
- Verwenden Sie das
placeholder des Eingabefeldes, um den Text "erforderlich" hinzuzufügen zu:
- Das Feld vollständiger Name
- Das Feld E -Mail -Adresse
- Sobald Sie alles für das mobile Layout an Ort und Stelle haben, fügen Sie mit einer Medienabfrage einen Haltepunkt hinzu, um das Layout für breitere Tablet- und Desktop -Bildschirme anzupassen.
- Passen Sie das Design an, da es auf einem Tablet oder einem Desktop mit 768px mit der Desktop-Form.png-Modellierung aussehen sollte.
- Verwenden Sie einen mobilen Ansatz, indem Sie Ihre Medienfragen mithilfe der
min-width -Eigenschaft in Ihrem CSS schreiben.
- Sobald alle Ihre Haltepunkte vorhanden sind, prüfen Sie, ob Ihr Layout bei beiden Modellen entspricht.
- Überprüfen Sie, ob die Labeltextposition beide Modelle entspricht:
- Mobile : Text sollte über dem Feld Formular liegen.
- Desktop : Der Text sollte sich auf der linken Seite des Formulars befinden.
Verwenden Sie eine Google -Schriftart für den Text
Hinzufügen :focus Fokuszustände in das Formular für, wenn ein Benutzer in ein Textfeld klickt oder Registerkarten klickt.
Überprüfen Sie, ob Ihr Code gültig ist, indem Sie ihn über einen HTML- und CSS -Validator ausführen.
- Links zu den Validatoren finden Sie in den Projektressourcen. Dies hilft Ihnen, alle Fehler zu erkennen, die möglicherweise in Ihrem Code enthalten sind.
- Es gibt einige Ausnahmen, die Sie nicht beheben müssen:
- Machen Sie sich keine Sorgen um Warnungen, sondern müssen nur alle Fehler überprüfen, die möglicherweise vorhanden sind.
- Wenn CSS-Validator-Flaggen verwendet werden, sollten diese Fehler ignoriert werden.
- Wenn HTML -Validator -Flags die Verwendung von Pipe ('|') in Google -Schriftverbindungen/URLs verwenden, kann dieser Fehler auch ignoriert werden.
