Pozrite sa do formátu HTML5 Formy vstupov Dátum, farba a rozsah

Formuláre sa nachádzajú všade na webových stránkach. Facebook, Twitter, Google - len aby sme vymenovali niekoľko - vyžadujú, aby sme sa prihlásili alebo sa zaregistrovali na stránku prostredníctvom formulára, v skutočnosti používame aj formulár na odosielanie a aktualizáciu stavu na sociálnych stránkach. V skratke, formulár je veľmi dôležitou súčasťou interakcie s webovou stránkou.

Webový formulár je zostavený so vstupmi, v minulosti máme len niekoľko možností pre vstupné typy; ako napr text, heslo, rádio, checkbox a Predložiť. Teraz HTML5 prichádza s veľkými vylepšeniami a prináša množstvo nových vstupných typov do špecifikácie.

Takže v tomto príspevku sa budeme zaoberať niektorými novými zaujímavými skladbami Formuláre HTML5 že si myslíte, že by ste ich mali vyskúšať; Pozrime sa na to.

Výber dátumu

Prvá vec, na ktorú by sme sa chceli pozrieť, je voľba dátumu. Výber dátumu je bežná vec, ktorú môžete nájsť v registračnom formulári, a to najmä na niektorých stránkach alebo v aplikáciách, ako sú letové a hotelové rezervácie.

Existuje veľa knižníc jazyka JavaScript na vytvorenie výberu dátumov. Teraz môžeme tiež vytvoriť jeden v oveľa jednoduchším spôsobom s vkladaním HTML5 dátum, nasledovne;

výberu dátumu v jazyku HTML5 v podstate funguje veľmi podobne, ako to robili knižnice JavaScript; keď sa zameriavame na pole, objaví sa kalendár a potom môžeme prechádzať mesiacmi a rokmi, aby sme vybrali dátum.

Avšak každý prehliadač, ktorý v súčasnosti podporuje dátum typ vstupu, a to Chrome, Opera a Safari, zobrazujú tento typ vstupu trochu inak, čo potenciálne vedie k problémom s nekonzistenciou v používateľskej skúsenosti a tu je, ako to vyzerá;

Niektoré pozoruhodné rozdiely, ktoré môžete vidieť na prvý pohľad z vyššie uvedeného screenshotu; Opera používala anglickú trojpísmenovú skratku pre názvy dní - Sun, Mon, Thu a tak ďalej, zatiaľ čo Chrome používal môj miestny jazyk, na druhej strane Safari - funguje pomerne zvláštne, nezobrazuje kalendár vôbec.

Existujú aj niektoré nové vstup typy do zvoľte konkrétne dátum alebo čas; mesiac, týždeň, čas, Dátum Čas a datetime-local, čo sme si istí, že samotné kľúčové slovo je dosť neuveriteľné, aby sme zistili, čo robí.

Všetky z nich môžete vidieť v akcii z nižšie uvedeného odkazu, ale uistite sa, že ho zobrazíte v službe Opera 11 a vyššie, pretože od zápisu je to jediný prehliadač, ktorý podporuje všetky tieto typy vstupov.

• Datepicker Demo

Výber farieb

Výber farieb je často potrebná v určitých webových aplikáciách, ako je tento generátor gradientov CSS3, ale všetci títo weboví vývojári sa stále spoliehajú na knižnicu JavaScript, ako je jsColor, na to, aby robili prácu. Teraz však môžeme vytvoriť vlastný prehliadač farieb s HTML5 farba typ vstupu;

Opäť platí, že prehliadače, v tomto prípade Chrome a Opera, spôsobujú, že tento vstupný typ je trochu iný;

Opera najprv zobrazuje základné rozlíšenie farby v rozbaľovacej ponuke na kliknutí a hexadecimálnej farbe aktuálne vyberanej farby, zatiaľ čo prehliadač Chrome priamo vyvolá paletu farieb v novom okne po kliknutí.

Okrem toho môžeme tiež nastaviť predvolenú farbu pomocou tlačidla hodnota atribút takto:

Týmto spôsobom, keď sa zobrazuje v nepodporovaných prehliadačoch, vstup bude degradovať v textovom poli a predvolená hodnota bude viditeľná, čo môže poskytnúť určitý náznak pre používateľov, čo by malo byť zadané v poli.

Zobrazte hodnotu farieb

Skôr než otvoríte Photoshop len skopírovať hex farebný formát, môžete skutočne vytvoriť jednoduchý nástroj na tento vstupný typ na vykonanie úlohy, pretože generovaná farba je už v šestnástkovej sústave to by bolo naozaj jednoduché;

Najprv pridáme id ColorPicker na vstup a tiež pridáme prázdne div s ID hexcolor vedľa neho, aby obsahovala hodnotu.

Potrebujeme jQuery prepojené v hlava nášho dokumentu. Potom uložíme farbu a novo pridanú hodnotu div v premennej, ako je tomu tak;

 varová farba = $ ('#colorpicker') val (); hexcolor = $ ('# hexcolor'); 

Získajte počiatočnú hodnotu z #colorpicker;

 hexcolor.html (farba); 

... a nakoniec zmeniť hodnotu aj pri zmene vyberanej farby;

 $ ('# colorpicker') na ('zmeniť', funkcia () hexcolor.html (this.value);); 

To je ono; teraz si ju prezeráme v akcii.

• Colorpicker Demo

rozsah

rozsah typ vstupu nám umožňuje pridať posúvač do prehliadača pre výber čísla v rozsahu, ktorý môžeme nájsť aj v jQuery UI.

Tento úryvok je základom implementácie rozsah typ vstupu. Taktiež môžeme zmeniť orientáciu posúvača na vertikálnu pomocou funkcie CSS.

 vstup [typ = rozsah] šírka: 20px; výška: 200px; -webkit-vzhľad: posuvník-vertikálne;  

Okrem toho môžeme nastaviť min a max rozsah čísel, napríklad;

V útržku nižšie nastavíme min na nulu a 225 pre maximum. Keď nie sú výslovne špecifikované, predvolene bude prehliadač trvať 0 za minimálnu hodnotu 100 pre maximum.

Zobraziť číslo

Existuje však jedno obmedzenie, číslo je neviditeľné, nemôžeme vidieť generované číslo / hodnotu z posúvača v prehliadači. Ak chcete zobraziť číslo, je potrebné pridať trochu JavaScript alebo jQuery a tu je, ako to robíme;

Najprv pridáme prázdne div vedľa vstupu, štýl div dostatočne, takže to vyzerá ako krabica.

Potom vložte nasledujúci kód, ktorý bude robiť to isté ako vyššie uvedený kód v silnej farbe, okrem teraz získame hodnotu z posuvníka.

 $ ('# slider') zmena (funkcia () var val = $ (' ) output.html (toto.value););); 

Teraz môžete vidieť demo. Len pripomenutie si pozrite demo v týchto prehliadačoch - Chrome, Opera a Safari, pretože Firefox a IE nepodporujú rozsah typ vstupu v súčasnosti.

• Rozsah demo

Konečné slová

Je zrejmé, že HTML5 uľahčuje náš život tým, že prináša množstvo nových typov vstupov. Ale ako všetky ostatné funkcie HTML5, podpora je veľmi obmedzená, a to najmä v starších prehliadačoch, a preto by sme mali tieto nové funkcie používať opatrne, najmä nové typy vstupov, o ktorých sme diskutovali v tomto príspevku. Dátum, farba a rozsah.

Ale v konečnom dôsledku dúfame, že teraz máte viac informácií Formuláre HTML5. Ďakujem, že ste si prečítali tento príspevok a dúfame, že sa vám to páči.

• demonštrácie
• Stiahnuť zdroj

Ďalšie čítanie

Nižšie uvádzame niekoľko užitočných odkazov na ďalšie spracovanie do formulárov HTML.

• Nové funkcie vo formáte HTML5 - Opera Dev.
• Súčasný stav formulárov HTML5 - Wufoo
• Atribúty formátu HTML5 - w3school.org
• Kedy môžem použiť formuláre HTML5? - CanIUse.com