Der erste Blockbereich ist in ein Abschnitts-Tag eingebettet, sodass wir das Layout nebeneinander verschieben können. Die linke Spalte enthält alle diese Eingaben: Text, E-Mail, URL und Telefonnummer. Während Sie durch Ihr Telefon navigieren, sollte sich das Display der mobilen Tastatur an den Eingabetyp anpassen. Es gibt viele gute Gründe, diese Funktionen für Mobilgeräte zu unterstützen, da heutzutage alle unterwegs sind.
Das textarea-Element kann auch einen Platzhaltertext haben, der auf Seite definiert ist. Dies ähnelt einem Etikett, das verschwindet, sobald der Benutzer Text in das Feld eingibt. Das Attribut, das nicht übernommen wird, ist Autovervollständigung weil Textbereiche normalerweise keinen zugehörigen Inhalt enthalten.
Sidebar-Steuerelemente Ich wollte dieses Formular so erstellen, dass es angemessen auf die Größenänderung von Fensteranzeigen reagiert. Wenn das Fenster voll genug ist, schweben beide Eingabespalten nebeneinander. Wenn die Breite jedoch etwas reduziert wird, wird die rechte Seitenleiste unter den Hauptinhalt gesenkt.
Hier ist mein HTML für den Seitenleistenbereich:
Empfänger: Mitarbeiter vor Ort Chefredakteur Tech-Abteilung Öffentlichkeitsarbeit Allgemeine Unterstützung Dieser Code ist eigentlich nichts zu verwirrend. Nur ein einfaches Auswahlmenü und einige Optionsfelder. Außerdem habe ich nach diesen Objekten eine Reset- und Submit-Schaltfläche am Ende des Abschnitts platziert.
Das alles sieht gut und gut aus, also wollen wir uns jetzt mit einigen CSS-Eigenschaften befassen. Es gibt so viele Anpassungen, die Sie beim Bearbeiten von Formularelementen anwenden können. Versuchen Sie, sich nicht mit zu viel Nachdenken aufzuhalten und Spaß zu haben!
Animierte Boxschatten Sie werden beim Durchblättern der wichtigsten Eingabeelemente feststellen, dass ich einen farbigen äußeren Schatten animiert habe. Google Chrome verfügt über eine Gliederungseigenschaft, die etwas ähnliches tut, jedoch nicht ganz so extravagant ist. Dieser kleine Teil der Benutzeroberfläche verführt zum ersten Mal.
/ ** die Formularelemente ** / # hongkiat-form Boxgrößenanpassung: border-box; # hongkiat-form .txtinput display: block; Schriftfamilie: "Helvetica Neue", Arial, serifenlos; Bordüre: solide; Randbreite: 1px; Rahmenfarbe: #dedede; Rand unten: 20px; Schriftgröße: 1.55em; Polsterung: 11px 25px; Polsterung links: 55px; Breite: 90%; Farbe: # 777; Box-Schatten: 0 1px 3px rgba (0, 0, 0, 0,1) Einfügung; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) Einfügung; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) Einfügung; Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; -webkit-Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; -Moz-Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; -o-Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; # hongkiat-form .txtinput: focus color: # 333; Randfarbe: rgba (41, 92, 161, 0,4); Box-Schatten: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); -Webkit-Box-Schatten: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); Gliederung: 0 keine; Um jedes Textelement als Ziel festzulegen, habe ich die Klasse verwendet .txtinput. Alle Übergangseigenschaften funktionieren für Rahmen, Rahmenschatten und Farbe. Ich benutze Box-Dimensionierung: Border-Box; Auf dem Formularcontainer wird das reaktionsfähige Design nicht durch Auffüllen beeinträchtigt.
Ich musste die gleichen Stile überarbeiten und sie für den Textbereich leicht bearbeiten. Ich habe einige Füllungen und Ränder geändert und ein eindeutiges Hintergrundsymbol angehängt.
# hongkiat-form textarea display: block; Schriftfamilie: "Helvetica Neue", Arial, serifenlos; Bordüre: solide; Randbreite: 1px; Rahmenfarbe: #dedede; Rand unten: 15px; Schriftgröße: 1.5em; Polsterung: 11px 25px; Polsterung links: 55px; Breite: 90%; Höhe: 180px; Farbe: # 777; Box-Schatten: 0 1px 3px rgba (0, 0, 0, 0,1) Einfügung; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) Einfügung; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) Einfügung; Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; -webkit-Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; -Moz-Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; -o-Übergang: Grenze 0,15s linear 0s, Box-Schatten 0,15s linear 0s, Farbe 0,15s linear 0s; # hongkiat-form textarea: focus color: # 333; Randfarbe: rgba (41, 92, 161, 0,4); Box-Schatten: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); Gliederung: 0 keine; # hongkiat-form textarea.txtblock background: #fff-url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; Sidebar-Eingaben Die Optionsfelder und Auswahlmenüs sind wesentlich einfacher gestaltet. Sie können Außeneffekte und ähnliche Schlagschatten auf diese Elemente anwenden, aber es sieht nicht immer gut aus. Alternativ erstellen Designer benutzerdefinierte Benutzeroberflächen und hängen diese als Hintergrundbilder an. Dies erfordert jedoch möglicherweise eine jQuery-Problemumgehung, damit die Optionen ordnungsgemäß angezeigt werden.
span.radiobadge display: block; Rand unten: 8px; span.radiobadge label font-size: 1.2em; Polsterung unten: 4px; select.selmenu font-size: 17px; Farbe: # 676767; Polsterung: 9px! wichtig; Grenze: 1px fest #aaa; Breite: 200px; Ich habe nicht viel getan, um diese Elemente von den Haupteingabeelementen zu entfernen. Eine Menge zusätzlicher Polsterung ist wichtig, damit sich die Benutzer bei der Interaktion mit dem Formular wohl fühlen. Wenn der Text sehr klein ist, kann es schwierig sein, jeden Teil auszufüllen. Halten Sie Ihre Schrift groß, aber nicht so groß, dass sie die Seite überfordert.
Angepasste Schaltflächen Die Schaltflächen zum Zurücksetzen und Senden sind in einer eigenen Klasse gestaltet. Ich habe eine Reihe von Lichtverläufen erstellt, die gut zu den blauen Highlights in unseren Formularfeldern passen.
Nachfolgend finden Sie meinen CSS-Code für den Senden-Button zum Standard- und Hover-Status.
#buttons #submitbtn display: block; Schwimmer: links; Höhe: 3em; Polsterung: 0 1em; Rand: 1px fest; Umriss: 0; Schriftdicke: fett; Schriftgröße: 1.3em; Farbe: #fff; Text-Schatten: 0px 1px 0px # 222; Leerraum: Nowrap; Zeilenumbruch: normal; vertikal ausrichten: Mitte; Cursor: Zeiger; -moz-border-radius: 2px; -webkit-border-radius: 2px; Grenzradius: 2px; Rahmenfarbe: # 5e890a # 5e890a # 000; -moz-box-shadow: Einfügung 0 1px 0 rgba (256,256,256, 0,35); -ms-box-shadow: Einfügung 0 1px 0 rgba (256,256,256, 0,35); -webkit-box-shadow: Einfügung 0 1px 0 rgba (256,256,256, 0,35); Box-Schatten: Einfügung 0 1px 0 rgba (256,256,256, 0,35); Hintergrundfarbe: rgb (226,238,175); Hintergrundbild: -moz-linearer Gradient (oben, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); Hintergrundbild: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (3%, RGB (226,238,175)), Farbstopp (3%, RGB (188,216,77)), Farbstopp (100 %, rgb (144,176,38))); Hintergrundbild: -webkit-linearer Gradient (oben, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); Hintergrundbild: -o-linearer Gradient (oben, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); Hintergrundbild: -ms-linearer Gradient (oben, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); Hintergrundbild: linearer Gradient (oben, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #tasten #submitbtn: hover, #tasten #submitbtn: aktiv border-color: # 7c9826 # 7c9826 # 000; Farbe: #fff; -moz-box-shadow: Einfügung 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: Einfügung 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: Einschub 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Box-Schatten: Einfügung 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Hintergrund: rgb (228,237,189); Hintergrund: -moz-linearer Gradient (oben, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (2%, RGB (228,237,189)), Farbstopp (3%, RGB (207,219,120)), Farbstopp (100%, RGB ( 149,175,54))); Hintergrund: -webkit-linearer Gradient (oben, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); Hintergrund: -o-linearer Gradient (oben, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149,175,54) 100%); Hintergrund: -ms-linearer Gradient (oben, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); Hintergrund: linearer Gradient (oben, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Es ist fast unmöglich, diese Auswahl sauber zu halten! Es gibt einfach zu viele Eigenschaften, die Sie für viele ältere ältere Browser auflisten und unterstützen müssen. Internet Explorer kann diese Farbverläufe sogar mit dem richtigen Filter rendern. Abgesehen von den Hintergrundverläufen habe ich auch eine neue Rahmenfarbe, abgerundete Ecken und einen Kästchenschatten beim Schweben eingefügt.
Der Reset-Button sieht ähnlich aus, aber ich habe mit dem Farbschema einen völlig anderen Weg eingeschlagen. Hellgrau fällt im Vergleich zu den hellgrünen Farben tendenziell in den Hintergrund. Unsere Reset-Taste wird wahrscheinlich nicht sehr oft benutzt, so dass sie nicht die ganze Aufmerksamkeit braucht.
#buttons #resetbtn display: block; Schwimmer: links; Farbe: # 515151; Text-Schatten: -1px 1px 0px #fff; Rand rechts: 20px; Höhe: 3em; Polsterung: 0 1em; Umriss: 0; Schriftdicke: fett; Schriftgröße: 1.3em; Leerraum: Nowrap; Zeilenumbruch: normal; vertikal ausrichten: Mitte; Cursor: Zeiger; -moz-border-radius: 2px; -webkit-border-radius: 2px; Grenzradius: 2px; Hintergrundfarbe: #fff; Hintergrundbild: -moz-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (2%, RGB (255,255,255)), Farbstopp (2%, RGB (240,240,240)), Farbstopp (100%, rgb (222,222,222))); Hintergrundbild: -webkit-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); Hintergrundbild: -o-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); Hintergrundbild: -ms-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); Hintergrundbild: linearer Gradient (oben, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); Grenze: 1px fest # 969696; Box-Schatten: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); Text-Schatten: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); Farbe: # 818181; Hintergrundfarbe: #fff; Hintergrundbild: -moz-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (2%, RGB (255,255,255)), Farbstopp (2%, RGB (244,244,244)), Farbstopp (100%, rgb (229,229,229))); Hintergrundbild: -webkit-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); Hintergrundbild: -o-linearer Gradient (oben, rgb ( 255,255,255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); Hintergrundbild: -ms-linearer Gradient (oben, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); Hintergrundbild: linearer Gradient (oben, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); Randfarbe: #Aeaeae; Box-Schatten: Einfügung 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Sie können den Reset-Typ sogar fallen lassen und dieses weiße / graue Farbschema als Hauptschaltfläche zum Senden verwenden. Ich habe viele der gleichen Verlaufsstile und Schatteneffekte verwendet, zusammen mit einem Textschatten für die innere Beschriftung. Es vermittelt auf jeden Fall ein anderes Gefühl als die Benutzererfahrung.
Responsive Layout-Änderungen In meiner anderen CSS-Datei können wir einen Blick auf die einfachen responsive Media-Abfragen werfen, die ich eingerichtet habe. In jedem Browser-Fenster über 800px wird die vollständige Seitenleistenoberfläche angezeigt. Wenn Sie diesen Schwellenwert unterschreiten, wird die linke Spalte auf 100% Breite erweitert, und Sie sehen die Seitenleistenelemente darunter.
@media screen und (max-width: 800px) körper padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; Float: keine; Bildschirmsperre; # hongkiat-form #aside width: 100%; Bildschirmsperre; Float: keine; # hongkiat-form .txtinput, # hongkiat-form Textbereich width: 85%; #prioritycase float: left; Bildschirmsperre; #recipientcase float: left; Bildschirmsperre; Rand rechts: 55px; Wenn wir in der Größe näher kommen, versuche ich, jedes der Eingabeformulare anzupassen. Die width -Eigenschaft kann länger als die Webseite selbst sein, und dann haben wir Eingabeformulare, die über den Rand hinausragen. Dies geschieht um 550px, wo die nächste Abfrage abgebrochen wird, zusammen mit den Bildschirmauflösungen des iPhone für Hoch- und Querformat.
/ * kleiner Bildschirmabfall ******* / @media only Bildschirm und (max. Breite: 550px) # hongkiat-form .txtinput, # hongkiat-form Textbereich width: 80%; / * iPhone Landscape ******** / @media only screen und (max-width: 480px) Körper padding: 10px 0px; select.selmenu width: 190px; / * iPhone Portrait ******* / @media only Bildschirm und (max. Breite: 320px) Körper Auffüllen: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form Textbereich width: 70%; # hongkiat-form #aligned overflow: hidden; select.selmenu width: 160px; #recipientcase margin-right: 30px; Der horizontale Querformatmodus hält alles noch gut zusammen. Ich habe das Dropdown-Auswahlmenü nur etwas dünner gemacht, um Platz für die Optionsfelder zu schaffen. In der Hochformatansicht habe ich alle Elemente auf viel kleinere Breiten angepasst. Jetzt wird unser Code auch in geänderten Browserfenstern nicht beschädigt. Aber es ist schön, auch Unterstützung für iOS / Android-Smartphones zu haben.
Demo Quellcode herunterladen Fazit Ich hoffe, dass dieses Tutorial informativ war, um zu erklären, wie viel Sie mit Ihren Webformularen tun können. Die neuen CSS3-Eigenschaften sind stark genug, um mit nur wenigen Codezeilen voll funktionsfähige Animationen zu erstellen. Es ist wirklich eine aufregende Zeit, in der Webentwicklung zu arbeiten und diesen Trends zu folgen.
Wenn Sie Ideen oder Vorschläge zum Tutorial-Code haben, teilen Sie uns diese bitte im Kommentarfeld mit.
