Grüße, liebe Leser der Blogseite. Heute möchte ich über so etwas wie HTML-Formulare sprechen. Unabhängig von der Engine Ihrer Website (CMS) werden auf jeden Fall Formulare in der einen oder anderen Form verwendet, die mit den Tags „Form“ und „Input“ sowie den Attributen und Parametern „Button“, „Checked“, „Value“, „Checkbox“, „Radio“, „Checkbox“, „Submit“ erstellt wurden.
Nun, Sie können diesem Element auch Elemente zum Erstellen von Dropdown-Listen und Textfeldern hinzufügen – Auswählen, Option, Textbereich, Beschriftung, Feldsatz, Legende.
Warum werden Formulare benötigt und wie funktionieren sie auf modernen Websites?
Mithilfe dieser Tags wird die gleiche Site-Suchzeichenfolge () erstellt, und eine Suche in Ihrem Projekt ist erforderlich. Daher wird es Sie überhaupt nicht behindern, zu verstehen, wie sie aufgebaut sind und wie sie funktionieren, um erfolgreich an dem Design zu arbeiten, und es wird nicht überflüssig sein, wenn Sie es selbst fördern.
Nachdem wir also die Notwendigkeit begründet haben, diese Elemente zu untersuchen, sollten meines Erachtens keine weiteren Fragen mehr aufkommen. Es ist also an der Zeit, direkt mit der Untersuchung ihrer möglichen Optionen fortzufahren.
Ja, ich möchte Sie auch daran erinnern, dass wir bereits viele Materialien zum Thema Hypertext Markup Language überprüft haben, zum Beispiel drei ) und .
Im Kern bestehen Formulare aus Elementen, für deren Erstellung verschiedene Tags aus Formular-Tags in den Hauptcontainer eingefügt werden – „Checked“, „Value“, „Checkbox“, „Radio“, „Checkbox“, „Submit“ usw. Wir müssen nur den Code an einer geeigneten Stelle platzieren Platzieren Sie es in der Site-Vorlage und geben Sie mithilfe von Tags und deren Attributen an, wie es aussehen soll.
Dies kann ein Textfeld mit einer Schaltfläche zum Senden der eingegebenen Abfrage, Auswahlmöglichkeiten mit Optionsfeldern (bei denen Sie nur eine der bereitgestellten Schaltflächen gedrückt lassen können), mehrere Textfelder mit einer Schaltfläche zum Senden() und vieles mehr sein.
Beispielsweise können Sie im Fall von „Suchen“ mithilfe des Attributs „Wert“ festlegen, was genau auf die Schaltfläche neben dem Feld zur Eingabe einer Abfrage geschrieben werden soll. Die in den Formularen eingegebenen Daten müssen in irgendeiner Weise weiterverarbeitet werden.
Zum Beispiel für den Fall Rückmeldung Nachdem der Benutzer das Feld mit seinem Namen ausgefüllt, seine E-Mail-Adresse und den Text der Nachricht eingegeben und dann auf die Schaltfläche „Senden“ geklickt hat, hat er das Recht zu hoffen, dass die Daten aus dem Formular an E gesendet werden -Mail des Site-Autors. Aber leider ist es nicht möglich, dies mit nur einer Hypertext-Auszeichnungssprache () zu implementieren.
Für diese Zwecke benötigen Sie ein spezielles Prozessorprogramm, das, nachdem der Benutzer auf die Schaltfläche „Senden“ klickt, alle Daten aus den Feedbackfeldern übernimmt und diese per E-Mail an den Eigentümer der Ressource sendet. Sie müssen über das Action-Attribut angeben, welches Programm dies selbst tun soll.
Normalerweise ist das Verarbeitungsprogramm ein eingeschriebenes Skript PHP-Sprache. Daher müssen Sie im Action-Attribut des Form-Tags den Pfad zur Datei dieses Skripts angeben, die sich auf Ihrem Hosting-Server befindet. Lassen Sie mich Ihnen ein Beispiel für das Abonnieren des RSS-Feeds meines Blogs per E-Mail geben:
Es mag zunächst etwas unklar erscheinen, aber ich denke, im Laufe der Geschichte wird alles klarer.
Formular- und Eingabe-Tags zum Erstellen von Schaltflächen, Kontrollkästchen und Optionsfeldern
Jedes Formular muss in öffnende und schließende Tags eingeschlossen sein Bilden. Dies ist eine Art Behälter für ihre Entstehung. Dieses Tag verfügt über eine Reihe erforderlicher und optionaler Attribute:
- Name – ein eindeutiger Name, der angegeben werden muss, wenn die HTML-Datei, in der Sie etwas tun, mehrere Webformulare verwendet
- Aktion – ein erforderliches Attribut, das den Pfad zum Skript angibt, an das die Daten zur weiteren Verarbeitung übertragen werden
- Methode – damit können Sie die Methode der Datenübertragung von diesem Webformular zum Handler-Dateiskript ändern. Wenn Sie es nicht angeben, wird standardmäßig die Get-Methode verwendet, die streng genommen hauptsächlich für Variablen und Kurznachrichten und darüber hinaus gedacht ist offene MethodeÜbermittlung von Daten über die Adressleiste des Browsers. Um Formulardaten an das Handler-Skript zu übertragen, ist es immer noch besser, es zu verwenden POST-Methode, speziell für die private Übertragung von Textnachrichten konzipiert
Schauen wir uns die verbleibenden Tags an, mit denen Sie verschiedene Webformulare erstellen können. Am vielseitigsten ist Eingang. Darin muss das Type-Attribut geschrieben werden, das bestimmt, wie genau das mit diesem Tag erstellte HTML-Formular aussehen wird.
Mithilfe von Eingabe und Typ können Sie die folgenden Elemente erstellen:
- einzeilige Textfelder (Type="Text")
- Felder zur Eingabe eines Passwortes (Type="Password")
- Kontrollkästchen (Type="Checkbox")
- Optionsfelder (Type="Radio")
- versteckte Felder (Type="Hidden")
- normale Schaltflächen (Type="Button")
- Schaltflächen zum Senden von Daten an den Handler (Type="Submit")
- Schaltflächen zum Aufrufen des Webformulars Originalzustand(Typ="Zurücksetzen")
- Felder zum Hochladen von Dateien auf den Server (Type="File)
- Schaltflächen mit einem Bild (Type="Image")
Die Eingabe hat kein schließendes Tag. Wie genau ein damit erstelltes Webformular aussehen wird, hängt vollständig von dem im Type-Attribut angegebenen Parameter ab. Wenn Typ nicht angegeben ist, wird standardmäßig ein Textfeld erstellt.
Beispiele für Formulare, die bei der Eingabe mit unterschiedlichen Werten für Typ erstellt wurden
Andere Input-Tag-Attribute und Beispiele für ihre Verwendung
Schauen wir uns an, wofür die anderen Attribute benötigt werden:
- Name – Wenn die Daten an das Handler-Programmskript gesendet werden müssen, müssen Sie einen Parameter für das Name-Attribut angeben. Unter diesem Namen erscheinen die vom Formular gesendeten Daten im Informationsverarbeitungsprogramm.
- Größe – Hiermit wird die Größe des Felds des zu erstellenden Webformulars festgelegt. Der Wert wird in der Anzahl der Zeichen angegeben, die in dieses Feld passen. Wenn Größe nicht angegeben ist, beträgt die Breite standardmäßig 24 Zeichen
- Maxlength – Standardmäßig ist die Anzahl der Zeichen, die in ein HTML-Formular eingegeben werden können, nicht begrenzt, aber mit Maxlength können Sie diese Beschränkung festlegen. Sie können nicht mehr Zeichen eingeben, als im Feld angegeben sind.
- Wert – Sie können damit angeben, was genau standardmäßig in das Feld oder auf die Schaltfläche zum Senden von Daten geschrieben wird
- „Checked“ ist ein Flag-Attribut, das in die Eingabe für Optionsfelder oder Kontrollkästchen eingefügt werden kann. In diesem Fall ist dieses Optionsfeld oder Kontrollkästchen aktiv, wenn die Seite mit dem Webformular geladen wird (sie sind bereits mit einem Häkchen versehen).
Schauen wir uns nun alles an Beispiele für Formulare mit Eingabe. Das Erscheinungsbild des Textfelds ähnelt dem Erscheinungsbild des Passworteingabefelds. Betrachten wir daher nur die Möglichkeit, einen Text zu erstellen, um beispielsweise eine E-Mail-Adresse einzugeben:
Schauen wir uns nun die Erstellung eines Webformulars mit Optionsfeldern (Radio) an:
Beachten Sie, dass dieses Formular das Input-Tag zweimal verwendet, einmal, um jedes der beiden Optionsfelder zu erstellen. Darüber hinaus enthält jedes von ihnen das Name-Attribut mit demselben Wert (resultat) und der Wertwert ist unterschiedlich (YES und NO).
Dies bedeutet, dass bei der Verarbeitung, wenn einer der Schalter ausgewählt wird, eine Variable gesendet wird, deren Name in Name geschrieben wird, der Wert dieser Variablen jedoch davon abhängt, welcher Schalter ausgewählt wurde.
Schauen wir uns ein Beispiel für die Erstellung eines Webformulars mit Kontrollkästchen an:
Kontrollkästchen unterscheiden sich von Optionsfeldern dadurch, dass Sie mehrere Optionen gleichzeitig auswählen können. Name wird verwendet, um in der Handler-Datei zu bestimmen, in welchem Kontrollkästchen die Kontrollkästchen platziert werden, und Value gibt den Wert an, der an den Handler gesendet wird (wenn Value nicht angegeben ist, wird der Text neben diesem Kontrollkästchen an den Handler gesendet ).
Auswählen, Option, Textbereich, Beschriftung, Feldsatz, Legende – Dropdown-Listen, Textbereiche und andere Webformularelemente
Zunächst möchte ich Sie ein wenig daran erinnern, was Webformulare eigentlich sind und warum sie auf Website-Seiten benötigt werden. Sie dienen in erster Linie dazu, Elemente, die in jedem Betriebssystem zu finden sind, in einer benutzerfreundlichen Form nachzubilden: Schaltflächen, Texteingabefelder, Dropdown-Listen, Kontrollkästchen, Schalter und dergleichen.
Alle Benutzer verstehen ohne weitere Erklärung den Zweck dieser Elemente und wenn sie eine HTML-Formularschaltfläche sehen, verstehen sie, dass sie darauf klicken müssen.
Darüber hinaus sind alle seine Bestandteile (wie Select, Option, Textarea, Label, Fieldset, Legend) bereits ausgefüllte Leerzeichen (Container), zum Einfügen müssen Sie lediglich das gewünschte Tag mit den erforderlichen Attributen und Parametern verwenden.
Browser wissen selbst, wie sie dieses oder jenes Webformularelement anzeigen. Stimmt, Optionen zum Anzeigen desselben Elements in verschiedene Browser können geringfügig voneinander abweichen, in der Regel jedoch nicht wesentlich.
Das. Es stellt sich heraus, dass Webformulare in HTML ein Versuch sind, den Schlüssel zu übertragen Elemente, die in jedem Betriebssystem verwendet werden, zu den Seiten der Website. Aber warum werden sie möglicherweise auf Website-Seiten benötigt?
Im Prinzip für dasselbe, wofür ähnliche Elemente verwendet werden Betriebssysteme— Übermittlung von Daten durch den Benutzer. Bei Formularen werden Daten des Nutzers an den Server übertragen und dort verarbeitet Sonderprogramm(Hypertext-Auszeichnungssprache erlaubt leider keine Datenverarbeitung).
Allerdings können Daten nicht nur an den Server, sondern beispielsweise auch per gesendet werden Email an die im Action-Attribut des Form-Tags angegebene Adresse. Beim Senden von Daten von HTML an E-Mail beginnt der Benutzer, der die Felder ausfüllt, nachdem er auf die Schaltfläche „Daten senden“ geklickt hat Mailprogramm Standard auf seinem Computer.
Das öffnende Form-Tag sollte in diesem Fall etwa so aussehen:
Wie Sie sehen, ist es sinnlos, auf den Text zu klicken, um dieses Element zu aktivieren – Sie müssen darauf klicken. Dies ist genau der Zustand, den das Label-Tag korrigieren soll. Es ermöglicht Ihnen, den Text neben dem Webformularelement anklickbar zu machen, was zweifellos der Fall ist wird die Benutzerfreundlichkeit verbessern.
Aber wie verbindet man das HTML-Formularelement und den Text? Dazu müssen Sie dem Attribut eine ID mit einem eindeutigen Parameter hinzufügen und der Text muss von öffnenden und schließenden Label-Tags umgeben sein. Und das ist noch nicht alles. Im öffnenden Label-Tag müssen Sie das For-Attribut einschließen, dessen Parameter genau mit dem des ID-Attributs im HTML-Tag des Formularelements identisch sein muss. Es stellt sich ungefähr so heraus:
Wie Sie sehen, können Webformularelemente dank der Verwendung von Label nun nicht nur durch Klicken auf das Element selbst, sondern auch durch Klicken auf den Text daneben aktiviert werden.
Fieldset und Legend – Aufteilen des Formulars in Teile
Sie haben wahrscheinlich schon oft gesehen, dass große Formulare in HTML in Gruppen (Fieldset) unterteilt sind, die von einem Rahmen umgeben sind und jede dieser Gruppen einen eigenen Titel (Legend) hat. Dies wird mit nur zwei Tags implementiert: Fieldset und Legend. Sie sind paarweise, d.h. Sie müssen einen öffnenden und einen schließenden haben.
Um also eine Gruppe von Komponententeilen zu erstellen, müssen Sie alle diese Teile in die öffnenden und schließenden Fieldset-Tags einschließen. Und um einen Titel (Legende) für diese Gruppe festzulegen, müssen Sie unmittelbar nach dem öffnenden Feldset eine Konstruktion einer öffnenden und schließenden Legende schreiben, zwischen denen Sie den Text des Gruppentitels einfügen müssen.
Hier ist ein Beispiel für die Erstellung von Gruppen mithilfe von Fieldset und Legend:
Viel Erfolg! Vor bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
Select, Option, Textarea, Label, Fieldset, Legend – HTML-Tags für die Form von Dropdown-Listen und Textfeldern
Einträge in HTML Quelltext- UL-, OL-, LI- und DL-Tags
MailTo – was ist das und wie erstellt man einen Link in HTML, um eine E-Mail zu senden?
Wie Farben im HTML- und CSS-Code eingestellt werden, Auswahl von RGB-Farbtönen in Tabellen, Yandex-Ausgabe und andere Programme
Was ist die Hypertext-Auszeichnungssprache HTML und wie zeigt man eine Liste aller Tags im W3C-Validator an?
So fügen Sie einen Link und ein Bild (Foto) in HTML - IMG- und A-Tags ein
Tabellen in HTML – Table-, Tr- und Td-Tags sowie Colspan, Cellpadding, Cellspacing und Rowspan für deren Erstellung
Schriftart (Gesicht, Größe und Farbe), Blockquote und Pre-Tags – alte Textformatierung in reinem HTML (kein CSS verwendet)
So erstellen Sie einen Hyperlink (A, Href, Ziel leer), wie Sie ihn in einem neuen Fenster auf der Website öffnen und wie Sie ein Bild in einen Link im HTML-Code umwandeln
In den letzten zwei Jahren hat die Entwicklung von Webanwendungen (Websites) große Fortschritte gemacht und die Methoden, mit denen wir früher eine Website erstellt haben, sind bereits veraltet oder es sind neuere Methoden aufgetaucht.
Um zuvor eine Dropdown-Liste in HTML zu erstellen ( auf Englisch. - runterfallen), haben wir gerade verwendet
Speziell für diesen Artikel habe ich 16 verschiedene Beispiele gefunden, die bei der Website-Entwicklung nützlich sein können. Und so fangen wir an.
1. Benutzerdefinierte Liste
HTML-Vorlage, mit der Sie Ihre eigenen Farben für die Dropdown-Liste anpassen können.
2. Mit CSS3/JavaScript erstellt
Geschrieben in CSS3 und JavaScript. Reguläre Dropdown-Liste.
3. Stil: U-Bahn-Stationen
Transparente Dropdown-Liste im Stil von U-Bahn-Stationen.
4. Dropy. Geschrieben in SCSS und jQuery
5. Für lange Ausgabelisten
Eine hervorragende Lösung für lange Dropdown-Menüs.
Ein Dropdown-Menü, das in reinem CSS geschrieben ist, ohne dass Skripte verwendet werden.
Perfekt für Seitenmenüs auf einer Website, um Kategorien auf der Website visuell darzustellen.
8. Stilvolles Benutzereinstellungsmenü
9. CSS3-Dropdown-Liste
Im UI-Stil erstellt, passt es zum UI-Stil der Website.
12. Flaggenauswahl
Dropdown im Länderauswahlstil.
13. Einfaches HTML- und CSS-Dropdown-Menü
Ich hoffe, Ihnen hat meine Auswahl gefallen. Hinterlassen Sie Kommentare, teilen Sie Ihre Meinung und senden Sie Ihre eigenen Werke!
So erstellen Sie eine Dropdown-Liste in HTML (TOP 16-Auswahl) aus Bologuer
Horizontales Dropdown-Menü Wird zum Organisieren der Site-Navigationsstruktur verwendet. Die optimale Anzahl an Verschachtelungsebenen beträgt eins oder zwei. Je weniger Anhangsebenen vorhanden sind, desto einfacher ist es für einen Website-Besucher, sie zu finden notwendige Informationen. Wie Sie ein normales horizontales Menü erstellen, wird ausführlich in beschrieben.
So erstellen Sie ein horizontales Dropdown-Menü
1. HTML-Markup und grundlegende Stile für ein Dropdown-Menü mit einer Verschachtelungsebene
Das HTML-Markup eines horizontalen Dropdown-Menüs unterscheidet sich von einem normalen Menü dadurch, dass es auf das gewünschte Listenelement verweist
- oder<оl> .
Um das Untermenü relativ zum Hauptmenü zu positionieren, werden die folgenden Stile deklariert:
— für ein Listenelement, in dem eine Dropdown-Liste verschachtelt ist: li (position: relative;) ;
– für das Dropdown-Menü ul (position: absolute;) sowie die linken und oberen Werte.
Aus Gründen der Übersichtlichkeit und einfacheren Formatierung fügen wir das Klassenobermenü zum Hauptmenü und das Untermenü zum Dropdown-Menü hinzu.
Es gibt mehrere Möglichkeiten, ein Dropdown-Menü auszublenden:
1) Anzeige: keine;
2) Sichtbarkeit: versteckt;
3) Deckkraft: 0;
4) transformieren: scaleY(0);
5) Verwendung der jQuery-Bibliothek.
Methode 1. (Anzeige: keine;)
Das Dropdown-Menü wird mit .submenu (display: none;) ausgeblendet, beim Hover wird es mit .topmenu li:hover .submenu (display: block;) angezeigt.
Methode 2. (Sichtbarkeit: versteckt;)
Das Menü wird mit .submenu (sichtbarkeit: versteckt;) ausgeblendet und mit .topmenu li:hover .submenu (sichtbarkeit: sichtbar;) angezeigt.
Methode 3. (Deckkraft: 0;)
Das Menü wird mit .submenu (Opacity: 0;) ausgeblendet und mit .topmenu li:hover .submenu (Opacity: 1;) angezeigt. Um zu verhindern, dass das Menü angezeigt wird, wenn Sie mit der Maus über den Bereich fahren, in dem es sich befindet, fügen Sie Sichtbarkeit hinzu: versteckt; , und wenn Sie mit der Maus darüber fahren, ändern Sie es in Sichtbarkeit: sichtbar; .
Methode 4. (transformieren: scaleY(0);)
Das Menü wird mit .submenu (transform: scaleY(0);) ausgeblendet und mit .topmenu li:hover .submenu (transform: scaleY(1);) angezeigt. Da die Standardelementtransformation von der Mitte aus erfolgt, müssen Sie for .submenu (transform-origin: 0 0;) hinzufügen, d. h. von der oberen linken Ecke.
Methode 5: Verwendung von jQuery
$(".fünf li ul").hide(); // das Dropdown-Menü ausblenden $(".fünf li:has(".submenu")").hover(function())( $(".fünf li ul").stop().fadeToggle(300) ;) /* wähle ein Listenelement aus, das ein Element mit der Klasse .submenu enthält, und füge eine Hover-Funktion hinzu, die das Dropdown-Menü ein- und ausblendet */);2. 3D-Dropdown-Menü
Durch CSS3-Transformationen lassen sich interessante Effekte erzeugen, die beispielsweise ein Menü aus der Tiefe des Bildschirms erscheinen lassen.
* ( box-sizing: border-box; ) body ( margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : keine; Rand: 0;) nav a (Anzeige: Block; Textdekoration: keine; Umriss: keine; Übergang: .4s easy-in-out;) : rgba(255,255,255,.8); .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( Schriftfamilie: „Exo 2“, serifenlos; Höhe: 70px; Zeile -height: 70px; padding: 0 30px; text-transform: großbuchstaben; a:hover ( Farbe: #E6855F; ) .submenu ( Hintergrund: weiß; Rand: 2 Pixel fest #003559; Position: absolut; links: 0; Sichtbarkeit: ausgeblendet; Deckkraft: 0; Z-Index: 5; Breite: 150 Pixel; transform: perspective(600px) rotationX(-90deg); transform-origin: 0 % 0 %; Deckkraft: 1; transform: perspective(600px) rotateX(0deg); ) .submenu li a ( Farbe: #7f7f7f; Schriftgröße: 13px; Zeilenhöhe: 36px; Polsterung: 0 25px; Schriftfamilie: „Kurale“, Serife; )
3. Erweiterbares Dropdown-Menü mit Logo
In diesem Beispiel enthält der obere Abschnitt der Seite das Logo und die Site-Navigation. Das Logo kann ein Bild oder Text sein. Das Dropdown-Menü wird mithilfe der CSS3-Transformationsfunktion schrittweise von unterhalb des obersten Listenelements erweitert.
4. Erweiterbares Dropdown-Menü
Ein weiteres Beispiel für ein Dropdown-Menü. Der Vergrößerungseffekt beim Erscheinen des Menüs wird durch Verkleinern der anfänglichen Größe erreicht.submenu (transform: scale(.8);) , beim Hover erhöht sich die Größe auf.topmenu > li:hover .submenu (transform: Scale(1);) .
* ( box-sizing: border-box; ) body ( margin: 0; hintergrund: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav (hintergrund: weiß; ) nav ul ( Listenstil: keine; Rand: 0; Polsterung: 0; ) nav a ( Textdekoration: keine; Umriss: keine; Anzeige: Block; Übergang: .4s Ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px ; Höhe: 12px; Hintergrund: 4px -2px 0 #d2d2d2; .topmenu > li:none; box -shadow: none; > li > a ( Innenabstand: 12px 26px; Farbe: #767676; Texttransformation: Großbuchstaben; Schriftstärke: fett; Buchstabenabstand: 1px; Schriftfamilie: „Exo 2“, serifenlos; ) .topmenu li a:hover ( Farbe: #c0a97a; ) .submenu ( Position: absolut; links: 50 %; oben: 100 %; Breite: 210 Pixel; linker Rand: -105 Pixel; Hintergrund: #fafafa ; Rand: 1px fest #ededed; Z-Index: 5; Sichtbarkeit: verborgen; Deckkraft: 0; transform: Skala(.8); Übergang: .4s Easy-in-out; ). li:hover .submenu ( Sichtbarkeit: sichtbar; Deckkraft: 1; Transformation: Skala(1); )
5. Pull-up-Dropdown-Menü
Horizontales Menü mit Mini-Animation: Wenn Sie mit der Maus über die oberen Menülinks fahren, erscheint ein kleiner Kreis, der auch das Erscheinungsbild des Dropdown-Menüs begleitet.
@import url("https://fonts.googleapis.com/css?.jpg); Hintergrundposition: Mitte Mitte; Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: Abdeckung; Höhe: 100 Vh; Position: relativ; ) body:before ( Inhalt: ""; Position: absolut; links: 0; unten: 0; Höhe: 100 %; Breite: 100 %; Hintergrund: linear-gradient(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); nav ( text-align: center; padding: 40px 0 0; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration : none; display: block; color: #222; .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( position: relative; padding: 10px 15px; font-family: " Kaushan Script ", kursiv; Schriftgröße: 1,5em; Zeilenhöhe: 1; Buchstabenabstand: 3px; ) .topmenu > li > a:before ( Inhalt: ""; Position: absolut; Z-Index: 5; links: 50 %; Breite: 10 Pixel; Hintergrund: Randradius: 0 .topmenu li:hover a:before ( transform: Translate(-50%, 0); Deckkraft: 1; ) .submenu ( Position: absolut; Z-Index: 4; links: 50 %; oben: 100 %; Breite: 150 Pixel; Polsterung: 15 Pixel 0 15 Pixel; Rand oben: 5 Pixel; Hintergrund: weiß; Randradius: 5 Pixel; box-shadow: 0 0 30px rgba(0,0,0,.2); Deckkraft: 1; Transformation: Translate(-50%, 0); .3s linear; .submenu a:hover (Hintergrund: #e8e8e8;)
In diesem Artikel schauen wir uns Elemente an, mit denen Sie Dropdown-Listen erstellen können, erfahren, wie Sie Gruppen in diesen Listen bilden, schauen uns an, wie Sie Elemente und sogar Gruppen von Listen deaktivieren, und machen uns mit einem Element vertraut, mit dem Sie erstellen können ein mehrzeiliges Textfeld, das Sie später in HTML-Formularen verwenden können (element
Darüber hinaus haben wir innerhalb des Formulars einen Button platziert, der zum Absenden des Formulars dient (Element mit dem Button Typ „Formular absenden“: type = „submit“ ).
Das Ergebnis unseres Beispiels:
Tooltip für den Textbereich
Schauen wir uns also das letzte Beispiel an und gehen wir zur praktischen Aufgabe des Artikels in diesem Lehrbuch über.
Dank des Attributs (HTML-Tag
Der Tooltip-Text wird ausgeblendet, wenn der Benutzer einen Wert (ein beliebiges Zeichen) in das Textfeld eingibt. Wenn er entfernt wird, wird der Tooltip erneut angezeigt.
Schauen wir uns ein Anwendungsbeispiel an:
type = "submit" name = "submitInfo" value = "submit" > !}
In diesem Beispiel haben wir zwei Textbereiche erstellt (das Element
Beachten Sie, dass der Inhalt eines schreibgeschützten Textfelds nicht geändert werden kann, der Benutzer jedoch weiterhin zum Inhalt navigieren, ihn auswählen und kopieren kann.
Darüber hinaus haben wir innerhalb des Formulars einen Button platziert, der zum Absenden des Formulars dient (Element mit dem Button Typ „Formular absenden“: type = „submit“ ).
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 Stellenausschreibungsformular:
Bevor Sie mit der Aufgabe beginnen, öffnen Sie das Beispiel in einem neuen Fenster und prüfen Sie das Formular sorgfältig, um alle Punkte zu wiederholen. Um die Aufgabe zu lösen, benötigen Sie das Wissen aus dem Artikel. Wenn Sie es verpasst haben, kommen Sie noch einmal vorbei, um es zu studieren.
Ü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.
Heute möchte ich ein kleines „Rezept“ zum Erstellen einer Liste in CSS vorstellen. Kein JQuery, kein CSS3 – nur gutes altes browserübergreifendes CSS. Das Beispiel ist recht einfach, sodass erfahrene Kameraden möglicherweise kein Interesse haben. Wir werden eine Dropdown-Liste mit Social-Buttons implementieren.
Reden wir also nicht lange, sondern kommen wir direkt zur Sache
HTML
Teile diesen Beitrag
- Google Plus
- In Kontakt mit
- RSS
Allgemeine Punkte wie das Einbinden von Stilen lasse ich bewusst weg, damit der Code nicht wächst. Unten auf der Seite gebe ich einen Link zu den Quellen – alles ist da.
Was wir in HTML haben, ist eine reguläre Liste und ein ungewöhnlicher Header. Das Besondere daran ist, dass es mit einem Hyperlink versehen ist, der es Ihnen ermöglicht, das Ereignis zu verfolgen :schweben, also Führung. Die Dropdown-Liste funktioniert, wenn Sie mit der Maus über den Titel fahren.
CSS
Schauen wir uns zunächst die grundlegenden Stile einer Dropdown-Liste an. Ich habe versucht, jede Codezeile zu kommentieren, um es klarer zu machen:
/*Padding zurücksetzen*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic Wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Hover-Blockstil*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Titel im Normalzustand*/ .droplink h3 a( text-align:center ; width:100%; display:block; padding:12px 0px; text-decoration:none ) .droplink h3 a img(border:none) /*Hover style*/ .droplink:hover a ( color:#FFF; Schriftart- Gewicht:fett; Position:absolut)
Hier gibt es nichts Besonderes; wir haben die Größe und den Stil des Blocks, den Stil der Kopfzeile und für beide Elemente ihre Stile angegeben, wenn wir mit der Maus darüber fahren. Fortfahren:
/*Liste ohne Hover ausblenden*/ .droplink ul( list-style:none; display:none ) /*Liste beim Hover anzeigen*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( display:block)
Dieser Code ist interessanter und zeigt, wie er sich verhält Dropdown-Liste beim Bewegen des Cursors. Im Normalzustand kostet es Anzeige:keine, das heißt, es wird nicht angezeigt. Wenn wir den Mauszeiger darüber bewegen, zeigen wir es als Block an. Das ist das ganze Geheimnis. Jetzt dekorieren wir die Listenelemente ein wenig und fügen Icons ein:
/*Listenelementstil*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ;background-repeat:no-repeat;background-position: 10px 3px ) /*Hover element style*/ .droplink li a:hover(background-color:#999 ) /*Icons*/ .facebook a (Hintergrundbild) :url("icons/facebook.png")) .twitter a (Hintergrundbild:url("icons/twitter.png")) .vk a (Hintergrundbild:url("icons/vk.png")) .rss a (Hintergrundbild:URL("icons/rss.png")) .gplus a (Hintergrundbild:URL("icons/gplus.png"))
Das ist eigentlich alles. Die Dropdown-Liste ist fertig und sieht ganz nett aus. Sie können die Elemente nach eigenem Ermessen gestalten, abgerundete Ecken und anderen Schnickschnack hinzufügen.
Wenn Sie möchten, dass die Liste den darunter liegenden Text „überlappt“, wenn Sie mit der Maus darüber fahren, schauen Sie zur Seite Z-Index.
Wenn etwas unklar ist oder nicht funktioniert, fragen Sie in den Kommentaren nach oder nutzen Sie den Button „Nachricht senden“, es ist da —>