Vytváranie štýlovo reagujúceho formulára pomocou CSS3 a HTML5

Kódovanie pomocou CSS3 dramaticky zmenilo krajinu vo vývoji webových aplikácií. Existuje viac príležitostí na vybudovanie jedinečných rozhraní s prechodmi, stínmi a zaoblenými rohmi. Všetky tieto efekty sa pomaly začínajú používať v každom hlavnom webovom prehliadači.

V tomto návode chcem predstaviť veľa z týchto efektov CSS3. Vytvoril som jednoduchý webový formulár pomocou niektorého z novších typov vstupov HTML5. Rozloženie je tiež citlivý; bude sa prispôsobovať zmenšeniu veľkosti okna. Táto situácia je ideálna pre vytváranie webových formulárov na podporu používateľov smartfónov.

Pozrite sa na zdrojový kód a uvidíte, či môžete sledovať v štruktúre súboru. Môžete tiež prispôsobiť tieto prvky a skopírovať ich na svoje vlastné webové stránky.

demonštrácie
Stiahnite si zdrojový kód

Vytváranie štruktúry formulára

Ak chcete začať, vytvoril som hlavný súbor index.html spolu s dvoma samostatnými štýlmi. style.css obsahuje všetky predvolené výbery responsive.css spracováva rôzne veľkosti okien. Mám doctype HTML5 a celý obal som zabalil do kontajnera

Tento príklad dokazuje iba účinky, ktoré sa môžu prejaviť pri kódovaní v CSS3. Preto nemáme žiadny skript alebo cieľovú stránku na odosielanie používateľov. Môj kód uvedený nižšie obsahuje otváracie vstupné značky pre prvých niekoľko prvkov formulára.

Prvá oblasť bloku je zabalená v značke úseku, takže môžeme rozložiť rozloženie vedľa seba. Ľavý stĺpec obsahuje všetky tieto vstupy: text, e-mail, URL a telefónne číslo. Počas prechádzania cez telefón sa displej mobilnej klávesnice prispôsobí na základe typu vstupu. Existuje veľa dobrých dôvodov na podporu týchto funkcií pre mobilné zariadenia, pretože všetci dnes pracujú na cestách.

Prvok textarea môže mať tiež zástupný text definovaný na pageload. Toto je podobné štítku, ktorý zmizne, keď používateľ zadá nejaký text v poli. Atribút, ktorý sa neprenáša, je automatické dokončovanie pretože textareas zvyčajne neobsahujú súvisiaci obsah.

Ovládacie prvky bočného panela

Chcel som vytvoriť tento formulár tak, aby odpovedal primerane na zmenu veľkosti okien. Keď je okno dostatočne veľké, obidva vstupné stĺpce plávajú vedľa seba. Ak je šírka mierne znížená, pravá postranná lišta klesne pod hlavný obsah.

Tu je môj HTML pre oblasť bočného panela:

   príjemcu:
  
  priorita:
   nízky    stredná    vysoký

Tento kód v skutočnosti nie je nič príliš mätúce. Jednoduchá možnosť výberu ponuky a niektorých prepínačov. Navyše, po týchto objektoch som umiestnil tlačidlo reset a posunul ku koncu úseku.

Toto všetko vyzerá dobre a dobre, takže teraz prejdime do niektorých vlastností CSS. Existuje toľko prispôsobení, ktoré môžete použiť pri práci na elementoch formulára. Snažte sa, aby ste sa nemuseli baviť s príliš veľa myslenia a baviť sa!

Animované stíny boxu

Všimnite si, ako ste kartu cez každý z hlavných vstupných prvkov, ktoré som animoval farebný vonkajší tieň. Google Chrome má vlastnosť obrysov, ktorá robí niečo podobné, ale nie úplne extravagantné. Táto malá časť rozhrania je lákavá pre prvých návštevníkov.

 / ** formulárové prvky ** / # hongkiat-form veľkosť krabice: okraj-box;  # hongkiat-form .txtinput zobrazenie: blok; font-family: "Helvetica Neue", Arial, sans-serif; hraničný štýl: pevný; šírka hranice: 1px; hraničná farba: #dedede; margin-bottom: 20px; veľkosť písma: 1,55; polstrovanie: 11px 25px; padding-left: 55px; šírka: 90%; farba: # 777; box-tieň: 0 1px 3px rgba (0, 0, 0, 0.1) vložka; -moz-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; -webkit-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; prechod: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s; -webkit-transition: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s; -moz-transition: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s; -o-prechod: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s;  # hongkiat -form .txtinput: focus farba: # 333; hraničná farba: rgba (41, 92, 161, 0,4); box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (41, 92, 161, 0.6); obrys: 0 žiadny;

Ak chcete zacieliť na každý prvok textu, používam triedu .txtinput. Každá z prechodových vlastností pracuje na okraji, tieňovom poli a farbe. používam rozmery v políčku: okrajové pole; na kontajneri na formuláre, takže polstrovanie nepoškodzuje náš citlivý dizajn.

Musel som kopírovať tie isté štýly a upraviť ich mierne pre textarea. Zmenil som niekoľko výplní a okrajov a pridal som jedinečnú ikonu na pozadí.

 # hongkiat-form textarea zobrazenie: blok; font-family: "Helvetica Neue", Arial, sans-serif; hraničný štýl: pevný; šírka hranice: 1px; hraničná farba: #dedede; margin-bottom: 15px; veľkosť písma: 1,5 mm; polstrovanie: 11px 25px; padding-left: 55px; šírka: 90%; výška: 180 pixlov; farba: # 777; box-tieň: 0 1px 3px rgba (0, 0, 0, 0.1) vložka; -moz-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; -webkit-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; prechod: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s; -webkit-transition: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s; -moz-transition: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s; -o-prechod: hranica 0.15s lineárna 0s, box-tieň 0.15s lineárna 0s, farba 0.15s lineárna 0s;  # hongkiat-forma textarea: zaostrenie farba: # 333; hraničná farba: rgba (41, 92, 161, 0,4); box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-tieň: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (40, 90, 160, 0.6); obrys: 0 žiadny;  # hongkiat-formulár textarea.txtblock pozadie: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat;

Vstupy bočného panela

Prepínacie tlačidlá a výber položiek ponuky sú oveľa jednoduchšie. Môžete použiť tieto vonkajšie žiarivé efekty a podobné tieňové stíny, ale nie vždy vyzerajú dobre. Alternatívne dizajnéri vytvoria vlastné používateľské rozhrania a pripojia ich ako obrázky na pozadí. To však môže vyžadovať riešenie jQuery, aby sa možnosti zobrazovali správne.

 span.radiobadge zobrazenie: blok; margin-bottom: 8px;  značka span.radiobadge font-size: 1.2em; padding-bottom: 4px;  select.menmenu písmo-veľkosť: 17px; farba: # 676767; polstrovanie: 9px! hranica: 1px solid #aaa; šírka: 200px;

Nerobil som veľa, aby som ich odtiahol od hlavných vstupných prvkov. Veľa extra výplní je dôležité, aby sa vaše používatelia cítili dobre v interakcii s formulárom. Keď je text veľmi malý, môže to byť boj, len aby ste vyplnili každú časť. Majte svoje písmo veľké, ale nie tak veľké, aby sa stránka prehnala.

Prispôsobené tlačidlá

Tlačidlá na resetovanie a odoslanie sú navrhnuté v triede, ktorá je vlastná. Vytvoril som súbor svetelných gradientov, ktoré sa dobre zhodujú s modrými zvýrazneniami v našich poliach formulára.

Nižšie je uvedený môj CSS kód pre tlačidlo odosielania na štandardnom a vznášajúcom sa stave.

 #buttons #submitbtn display: block; plavák: vľavo; výška: 3m; polstrovanie: 0 1m; hranica: 1px pevná; obrys: 0; font-weight: tučné; veľkosť písma: 1.3m; farba: #fff; text-tieň: 0px 1px 0px # 222; white-space: teraz; obálka slov: normálna; zvislé zarovnanie: stredné; kurzor: ukazovateľ; -moz-okraj-polomer: 2px; -webkit-border-radius: 2px; okraj polomeru: 2px; hraničná farba: # 5e890a # 5e890a # 000; -moz-box-tieň: vložka 0 1px 0 rgba (256,256,256, .35); -ms-box-tieň: vložka 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: vložka 0 1px 0 rgba (256,256,256, .35); box-tieň: vložený 0 1px 0 rgba (256,256,256, .35); farba pozadia: rgb (226,238,175); obrázok pozadia: -moz-lineárny gradient (vrchol, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); (3%, rgb (226,238,175)), farebný stop (3%, rgb (188,216,77)), farebný stop (100% %, RGB (144,176,38))); pozadia-obrázok: -webkit-lineárny gradient (vrchol, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); obrázok pozadia: -o-lineárny gradient (vrchol, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); obrázok-pozadia: -ms-lineárny gradient (vrchol, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); Obrázok pozadia: lineárny gradient (vrchol, 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: hover, #buttons #submitbtn: aktívna okrajová farba: # 7c9826 # 7c9826 # 000; farba: #fff; -moz-box-tieň: vložka 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-tieň: vložka 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: vložiť 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); box-tieň: vložený 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); pozadie: rgb (228, 237, 189); pozadia: -moz-lineárny gradient (vrchol, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (2%, rgb (228,237,189)), farebný stop (3%, rgb (207.219,120) 149,175,54))); pozadie: -webkit-lineárny gradient (vrchol, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadie: -o-lineárny gradient (vrchol, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadie: -ms-lineárny gradient (vrchol, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadie: lineárny gradient (vrchol, 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);

Je takmer nemožné udržať tento typ voliča čistý! Existuje jednoducho príliš veľa vlastností, ktoré potrebujete na zoznam a podporu pre mnohé staršie staršie prehliadače. Aplikácia Internet Explorer dokonca môže tieto prechody vytvoriť správnym filtrom. Všimnite si, že na pozadí sa nachádzajú aj prechodové grafy, takisto som zaradil novú farebnú hranicu, zaoblené rohy a stĺpec na hover.

Tlačidlo Reset vyzerá podobne, ale prešiel som úplne inú trasu s farebnou schémou. Svetlošedá má tendenciu spadnúť do pozadia v porovnaní s jasnými zelenými farbami. Náš resetovací tlačidlo sa pravdepodobne nebude veľmi využívať, takže nepotrebuje celú pozornosť.

 #buttons #resetbtn display: block; plavák: vľavo; farba: # 515151; text-tieň: -1px 1px 0px #fff; margin-right: 20px; výška: 3m; polstrovanie: 0 1m; obrys: 0; font-weight: tučné; veľkosť písma: 1.3m; white-space: teraz; obálka slov: normálna; zvislé zarovnanie: stredné; kurzor: ukazovateľ; -moz-okraj-polomer: 2px; -webkit-border-radius: 2px; okraj polomeru: 2px; farba pozadia: #fff; obrázok pozadia: -moz-lineárny gradient (vrchol, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); (2%, rgb (255,255,255)), farebný stop (2%, rgb (240,240,240)), farebný stop (100% RGB (222222222))); pozadia-obrázok: -webkit-lineárny gradient (vrchol, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); obrázok pozadia: -o-lineárny gradient (vrchol, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); obrázok pozadia: -ms-lineárny gradient (vrchol, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); obrázok pozadia: lineárny gradient (vrchol, 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); hranica: 1px pevná # 969696; box-tieň: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-tieň: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-tieň: 0 1px 2px rgba (144, 144, 144, 0.4); textový tieň: 0 1px 1px rgba (255, 255, 255, 0.75);  #buttons #resetbtn: vznášať text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); farba: # 818181; farba pozadia: #fff; obrázok pozadia: -moz-lineárny gradient (vrchol, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); (2%, rgb (255,255,255)), farebný stop (2%, rgb (244,244,244)), farebný stop (100% RGB (229229229))); Obrázok pozadia: -webkit-lineárny gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100% 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); obrázok pozadia: -ms-lineárny gradient (vrchol, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); obrázok pozadia: lineárny gradient (vrchol, 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); hraničná farba: #aeaeae; box-tieň: vložený 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5);

Môžete dokonca prepustiť typ resetovania a použiť túto bielu / šedú farebnú schému ako hlavné tlačidlo odoslania. Používam mnoho rovnakých štýlov prechodu a tieňové efekty, spolu s textovým tieňom pre vnútorný štítok. Určite poskytuje skúsenosti používateľov iný pocit.

Zodpovedajúce zmeny rozloženia

Presunutím do iného súboru CSS sa môžeme pozrieť na jednoduché odpovede na mediálne dopyty, ktoré som nastavil. V každom okne prehliadača nad 800 pixelov sa zobrazí úplné rozhranie bočného panela. Keď sa dostanete pod túto prahovú hodnotu, ľavý stĺpec sa roztiahne na 100% šírku a zobrazia sa prvky pančuchy rozbaľujúce sa nižšie.

 @media obrazovka a (max-šírka: 800px) body padding: 10px 15px;  #container šírka: 100%;  # hongkiat-form #signed šírka: 100%; float: žiadne; zobrazenie: blok;  # hongkiat -form #aside šírka: 100%; zobrazenie: blok; float: žiadne;  # hongkiat-form .txtinput, # hongkiat-form textarea šírka: 85%;  #prioritycase float: left; zobrazenie: blok;  #recipientcase float: left; zobrazenie: blok; margin-right: 55px;

Keď sa dostaneme bližšie k veľkosti, pokúsim sa prispôsobiť všetky vstupné formuláre. Vlastnosť šírky môže skončiť dlhšie ako samotná webová stránka a potom máme vstupné formuláre vyčnievajúce cez okraj. To sa deje okolo 550 pixlov, čo je miesto, kde som zlomil ďalší dotaz, spolu s oboma displejmi obrazovky iPhone rozlíšenie pre portrét a krajiny.

 / * menšie zobrazenie obrazovky ******* / @media len obrazovka a (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea šírka: 80%;  / * iPhone Krajina ******** / iba @media obrazovka a (max-šírka: 480px) body padding: 10px 0px;  select.menmenu šírka: 190px;  / * Portrét iPhone ******* / @media len a (max-width: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat -form textarea šírka: 70%;  # hongkiat-form #aligned pretečenie: skryté;  select.menmenu šírka: 160px;  #recipientcase margin-right: 30px;

Horizontálny režim na šírku stále drží všetko veľmi dobre. Urobil som len výber menu rozbaľovania trochu tenšie, aby sa priestor pre prepínačov. V pohľade na výšku som zmenil všetky prvky na oveľa menšie šírky. Teraz náš kód nezlomí ani v zmenených oknách prehliadača. Ale je pekné mať aj podporu pre iOS / Android smartphony.

demonštrácie
Stiahnite si zdrojový kód

záver

Dúfam, že tento návod je informatívny pri vysvetľovaní toho, koľko sa dá urobiť vo vašich webových formách. Nové vlastnosti CSS3 sú dostatočne výkonné na vytvorenie plne funkčných animácií s niekoľkými riadkami kódu. Je to naozaj vzrušujúci čas, aby ste pracovali na vývoji webových aplikácií a sledovaní týchto trendov.

Ak máte nápady alebo návrhy na tutoriálový kód, neváhajte sa s nami zdieľať prostredníctvom poľa s poznámkami nižšie.