Det första blockområdet är inslaget i en sektionstag så vi kan flyta layouten sida vid sida. Den vänstra kolumnen innehåller alla dessa ingångar: text, e-post, webbadress och telefonnummer. När du klickar på din telefon bör den mobila tangentbordskärmen anpassas utifrån ingångstypen. Det finns gott om bra skäl att stödja dessa funktioner för mobil eftersom alla jobbar pågår idag.
Textarea-elementet kan också ha en platshållartekst definierad på sidladdningen. Detta liknar en etikett som försvinner när användaren skriver in en del text i fältet. Attributet som inte överförs är autoslutförande eftersom textareas vanligtvis inte fyller i relaterat innehåll.
Sidopanelkontroller Jag ville bygga den här formen så att den skulle svara på lämpligt sätt för att ändra storlek på fönsterskärmar. När fönstret är tillräckligt fullt flyter båda inmatningskolonnerna bredvid varandra. Men om bredden är skuren något faller höger sidobalk ner under huvudinnehållet.
Här är min HTML för sidofältet:
Mottagare: Webbplatspersonal Editor-in-Chief Tech Department Public relations Allmän support Denna kod är faktiskt inte något för förvirrande. Bara ett enkelt alternativ välj menyn och vissa radioknappar. Dessutom placerade jag efter dessa objekt en återställning och skickar in knappen mot slutet av avsnittet.
Allt ser bra ut, så nu ska vi flytta in i några CSS-egenskaper. Det finns så många anpassningar som du kan ansöka när du arbetar med formulärelement. Försök att inte muta dig själv med för mycket tänkande och ha kul!
Animerade Box Shadows Du kommer att märka när du flikar igenom var och en av de viktigaste inmatningselementen som jag har animerat en färgstark ytterskugga. Google Chrome har en konturegenskap som gör något liknande, men inte riktigt så extravagant. Denna lilla del av gränssnittet lockar första gången besökare.
/ ** formelementen ** / # hongkiat-form box-size: border-box; # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serif; gränsstil: fast; kantbredd: 1px; border-color: #dedede; marginal-botten: 20px; typsnittstorlek: 1,55em; vaddering: 11px 25px; padding-left: 55px; bredd: 90%; färg: # 777; boxskugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -webkit-box-skugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset; övergång: gräns 0.15s linjär 0s, box-skugga 0.15s linjär 0s, färg 0.15s linjär 0s; -webkit-övergång: gränsen 0.15s linjär 0s, boxskugg 0.15s linjär 0s, färg 0.15s linjär 0s; -moz-övergång: gränsen 0.15s linjär 0s, box-skugga 0.15s linjär 0s, färg 0.15s linjär 0s; -o-övergång: gränsen 0.15s linjär 0s, boxskugg 0.15s linjär 0s, färg 0.15s linjär 0s; # hongkiat-form .txtinput: fokus color: # 333; kantfärg: rgba (41, 92, 161, 0.4); boxskugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-skugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-skugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (41, 92, 161, 0,6); kontur: 0 ingen; För att rikta mig mot varje textelement har jag använt klassen .txtinput. Var och en av övergångsegenskaperna arbetar på gränsen, boxskugg och färg. Jag använder box-dimensionering: gränsvärde; På formulärbehållaren förstör inte vaddering på vår responsiva design.
Jag var tvungen att kopiera över samma stilar och redigera dem lite för textområdet. Jag ändrade några av vadderingarna och marginalerna och tillfogade en unik bakgrundsikon.
# hongkiat-form textarea display: block; font-family: "Helvetica Neue", Arial, sans-serif; gränsstil: fast; kantbredd: 1px; border-color: #dedede; marginalbotten: 15px; typsnittstorlek: 1.5em; vaddering: 11px 25px; padding-left: 55px; bredd: 90%; höjd: 180px; färg: # 777; boxskugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -webkit-box-skugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset; övergång: gräns 0.15s linjär 0s, box-skugga 0.15s linjär 0s, färg 0.15s linjär 0s; -webkit-övergång: gränsen 0.15s linjär 0s, boxskugg 0.15s linjär 0s, färg 0.15s linjär 0s; -moz-övergång: gränsen 0.15s linjär 0s, box-skugga 0.15s linjär 0s, färg 0.15s linjär 0s; -o-övergång: gränsen 0.15s linjär 0s, boxskugg 0.15s linjär 0s, färg 0.15s linjär 0s; # hongkiat-form textarea: fokus färg: # 333; kantfärg: rgba (41, 92, 161, 0.4); boxskugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-skugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-skugga: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (40, 90, 160, 0,6); kontur: 0 ingen; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; Sidofältinmatningar Radion knapparna och välj menyalternativ är stylade mycket enklare. Du kan tillämpa yttre glödseffekter och liknande fallskuggor på dessa element, men det ser inte alltid bra ut. Alternativt skapar designers anpassade användargränssnitt och bifogas dessa som bakgrundsbilder. Men det kan kräva en jQuery-lösning för att hålla alternativen som visas korrekt.
span.radiobadge display: block; marginalbotten: 8px; span.radiobadge-etikett font-size: 1.2em; vadderande-botten: 4px; select.selmenu font-size: 17px; färg: # 676767; vaddering: 9px! viktigt; gränsen: 1px solid #aaa; bredd: 200px; Jag har inte gjort mycket för att driva dessa bort från de viktigaste ingående elementen. Massor av extra vaddering är viktigt så att dina användare trivs med att interagera med formuläret. När texten är super liten kan det vara en kamp bara för att fylla i varje del. Håll ditt teckensnitt stort, men inte så stort att det överväldigar sidan.
Anpassade knappar Återställnings- och inlämningsknapparna är utformade i en egen klass. Jag har byggt en uppsättning ljusgradienter som passar bra med de blå höjdpunkterna i våra formulärfält.
Nedan är min CSS-kod för inmatningsknappen på standard och svävarläge.
#buttons #submitbtn display: block; flyta till vänster; höjd: 3em; vaddering: 0 1em; gräns: 1px solid; kontur: 0; font-weight: bold; fontstorlek: 1.3em; färg: #fff; textskugga: 0px 1px 0px # 222; white-space: nowrap; word-wrap: normal; vertikaljustering: mitt; markör: pekare; -moz-gränsen-radien: 2px; -webkit-gränsen-radien: 2px; gränsstråle: 2px; kantfärg: # 5e890a # 5e890a # 000; -moz-box-skugga: inset 0 1px 0 rgba (256,256,256,35); -ms-box-skugga: inset 0 1px 0 rgba (256,256,256,35); -webkit-box-skugga: inset 0 1px 0 rgba (256,256,256, .35); boxskugga: inset 0 1px 0 rgba (256,256,256,35); bakgrundsfärg: rgb (226 238 175); bakgrundsbild: -moz-linjär gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (3%, rgb (226,238,175)), färgstopp (3%, rgb (188,216,77)), färgstopp %, rgb (144,176,38))); bakgrundsbild: -webkit-linjär gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); bakgrundsbild: -o-linjär gradient (topp, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); bakgrundsbild: -ms-linjär gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); bakgrundsbild: linjär gradient (topp, 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); #buttons #submitbtn: svävar, #buttons #submitbtn: aktiv border-color: # 7c9826 # 7c9826 # 000; färg: #fff; -moz-box-skugga: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-skugga: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-skugga: inmatning 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); boxskugga: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); bakgrund: rgb (228, 237, 189); bakgrund: -moz-linjär gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (2%, rgb (228,237,189)), färgstopp (3%, rgb (207,219,120)), färgstopp (100%, rgb 149,175,54))); bakgrund: -webkit-linjär gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); bakgrund: -ö-linjär gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); bakgrund: -ms-linjär gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); bakgrund: linjär gradient (topp, 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); Det är nästan omöjligt att hålla den här typen av väljare ren! Det finns helt enkelt för många egenskaper du behöver lista ut och stödja för många äldre äldre webbläsare. Internet Explorer kan även göra dessa gradienter med rätt filter. Notera bortsett från bakgrundsgradienterna har jag också inkluderat en ny kantfärg, rundade hörn och en boxskugga på svävaren.
Återställningsknappen liknar men jag har gått en helt annan väg med färgschemat. Ljusgrå tenderar att falla i bakgrunden i jämförelse med de ljusgröna färgerna. Vår återställningsknapp kommer sannolikt inte att användas mycket, så det behöver inte all uppmärksamhet.
#buttons #resetbtn display: block; flyta till vänster; färg: # 515151; textskugga: -1px 1px 0px #fff; marginal-höger: 20px; höjd: 3em; vaddering: 0 1em; kontur: 0; font-weight: bold; fontstorlek: 1.3em; white-space: nowrap; word-wrap: normal; vertikaljustering: mitt; markör: pekare; -moz-gränsen-radien: 2px; -webkit-gränsen-radien: 2px; gränsstråle: 2px; bakgrundsfärg: #fff; bakgrundsbild: -moz-linjär gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (2%, rgb (255,255,255)), färgstopp (2%, rgb (240,240,240)), färgstopp (100% rgb (222.222.222))); bakgrundsbild: -webkit-linjär gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrundsbild: -o-linjär gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrundsbild: -ms-linjär gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrundsbild: linjär gradient (topp, 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); gräns: 1px fast # 969696; boxskugga: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-skugga: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-skugga: 0 1px 2px rgba (144, 144, 144, 0.4); textskugga: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: sväva text-skugga: 0 1px 1px rgba (255, 255, 255, 0.75); färg: # 818181; bakgrundsfärg: #fff; bakgrundsbild: -moz-linjär gradient (topp, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (2%, rgb (255,255,255)), färgstopp (2%, rgb (244.244.244)), färgstopp (100% rgb (229.229.229))); bakgrundsbild: -webkit-linjär gradient (topp, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); bakgrundsbild: -o-linjär gradient (topp, rgb 255 255 255) 2%, rgb (244 244 244) 2%, rgb (229 229 229) 100%); bakgrundsbild: -ms-linjär gradient (topp, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); bakgrundsbild: linjär gradient (topp, 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); border-color: #aeaeae; boxskugga: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Du kan till och med släppa återställningstypen och använda detta vita / grå färgschema som din huvudsakliga inlämningsknapp. Jag har använt många av samma gradientstilar och drop shadow effects, tillsammans med en textskugga för den inre etiketten. Det ger definitivt en annan känsla till användarupplevelsen.
Responsive Layout Changes Att flytta in i min andra CSS-fil kan vi ta en titt på de enkla, snabba mediefrågorna jag har installerat. Alla webbläsarfönstren över 800 px kommer att uppleva hela sidofältet. När du kommer under denna tröskel expanderar den vänstra kolumnen till 100% bredd och du ser elementets sidofält nedåt nedan.
@media skärm och (maxbredd: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; float: none; display: block; # hongkiat-form #aside width: 100%; display: block; float: none; # hongkiat-form .txtinput, # hongkiat-form textarea bredd: 85%; #prioritycase float: left; display: block; #recipientcase float: left; display: block; marginal-höger: 55px; När vi kommer närmare i storlek försöker jag anpassa varje inmatningsform. Bredden egendom kan hamna längre än webbsidan själv och då har vi inmatningsformulär som sticker ut över kanten. Detta händer runt 550px vilket är där jag bryter nästa fråga, tillsammans med båda iPhone skärmdisplay resolutioner för stående och landskap.
/ * mindre skärmavfall ******* / @media bara skärm och (maxbredd: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea bredd: 80%; / * iPhone Landskap ******** / @media bara skärm och (max bredd: 480px) body padding: 10px 0px; select.selmenu bredd: 190px; / * iPhone porträtt ******* / @media bara skärm och (max bredd: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea bredd: 70%; # hongkiat-form #aligned overflow: hidden; select.selmenu bredd: 160px; #recipientcase margin-right: 30px; Horisontellt landskapsläge rymmer fortfarande allting mycket bra. Jag har bara gjort rullgardinsmenyn lite tunnare för att göra plats för radioknapparna. I stående vyn har jag ändrat alla element till mycket mindre bredder. Nu kommer vår kod inte att bryta till och med i ändrade webbläsarfönster. Men det är trevligt att ha stöd för iOS / Android-smartphones också.
Slutsats Jag hoppas att denna handledning har varit informativ för att förklara hur mycket du kan göra på dina webbformulär. De nya CSS3-egenskaperna är kraftfulla för att bygga fullt fungerande animeringar med bara några rader av kod. Det är verkligen en spännande tid att arbeta med webbutveckling och följa dessa trender.
Om du har ideer eller förslag på handledningskoden kan du dela dem med oss via kommentarfältet nedan.
