HTML5-lomakkeiden etsiminen tulotyyppeihin Päivämäärä, väri ja alue

Lomakkeet löytyvät kaikkialla verkkosivuilta. Facebook, Twitter, Google - vain muutaman nimeäminen - vaativat meitä kirjautumaan tai rekisteröimään sivustoon lomakkeen avulla, itse asiassa käytämme myös lomaketta ja päivittämään tilannetta sosiaalisissa sivustoissa. Lyhyesti, lomake on erittäin tärkeä osa, jotta voisimme olla vuorovaikutuksessa verkkosivuston kanssa.

Web-lomake on rakennettu panoksilla, aikaisemmin meillä on vain muutama vaihtoehto syöttötyypeille; kuten teksti, Salasana, radio, valintaruutu ja Lähetä. Nyt HTML5: ssä on erinomaiset parannukset ja siinä tuodaan esiin uusia ominaisuuksia.

Joten tässä virassa kaivamme joitakin uusia mielenkiintoisia kappaleita HTML5-lomakkeet että meidän pitäisi mielestäsi yrittää niitä; Tarkistetaan ne.

Päivämäärävalitsin

Ensimmäinen asia, jonka haluaisimme katsoa, ​​on päivämääränvalitsin. Päivämäärän valitseminen on yleinen asia, joka löytyy rekisteröintilomakkeesta, erityisesti joissakin sivustoissa tai sovelluksissa, kuten lennon ja hotellin varaus.

On olemassa monia JavaScript-kirjastoja, jotka luovat päivämääränvalitsinta. Nyt voimme myös luoda sen paljon helpommin HTML5-syötteen avulla Treffi, seuraavasti;

päivämäärävalitsin HTML5: ssä toimii periaatteessa hyvin samankaltainen kuin JavaScript-kirjastot tekivät; kun keskitymme kenttään, kalenteri ilmestyy ulos, ja sitten voimme selata kuukausia ja vuosia valitaksesi päivämäärän.

Kuitenkin jokainen selain, joka tukee tällä hetkellä Treffi tulotyyppi, nimittäin Chrome, Opera ja Safari näyttävät tämän tulotyypin hieman eri tavalla, mikä voi johtaa epäjohdonmukaisuuteen ongelmaan käyttäjäkokemuksessa, ja tässä on, miten se näyttää;

Joitakin merkittäviä eroja näet yhdellä silmäyksellä yllä olevasta kuvakaappauksesta; Opera käytti englanninkielistä kolmen kirjaimen lyhennettä päivän nimellä - Sun, Mon, Thu ja niin edelleen, kun Chrome käytti paikallista kieltä, Safari - toisaalta - toimii melko outoa, se ei näytä kalenteria ollenkaan.

Myös uusia on panos tyypit valitse päivämäärä tai aika tarkemmin; kuukausi, viikko, aika, treffiaika ja datetime-local, olemme varmoja siitä, että avainsana itsessään on täysin kelpoinen kertomaan, mitä se tekee.

Voit tarkastella kaikkia niitä toiminnassa alla olevasta linkistä, mutta varmista, että tarkastelet sitä Opera 11: ssä ja sitä uudemmissa versioissa, sillä kirjoituksen aikana se on ainoa selain, joka tukee kaikkia näitä syöttötyyppejä.

• Datapicker Demo

Värinvalitsija

Värinvalitsija tarvitaan usein tietyissä web-pohjaisissa sovelluksissa, kuten tässä CSS3-gradienttigeneraattorissa, mutta tämän ajan web-kehittäjät luottavat edelleen JavaScript-kirjastoon, kuten jsColoriin, tekemään työn. Mutta nyt voimme luoda alkuperäisen selaimen värivalitsimen HTML5: n kanssa väri- syötteen tyyppi;

Jälleen kerran selaimet, tässä tapauksessa Chrome ja Opera, tekevät tästä syötetyypistä hieman erilaisen;

Opera näyttää ensin perusasetuksen napsautuksen ja nykyisen poimitun värin hex-muodon pudotusvalikosta, kun taas Chrome palaa suoraan väripaletin uuteen ikkunaan napsautettaessa.

Lisäksi voimme myös asettaa oletusvärin arvo määrite, seuraavasti;

Näin, kun sitä tarkastellaan tuetuissa selaimissa, panos huonontuu tekstikentässä ja oletusarvo tulee näkyviin, joka voi antaa jonkinlaisen vihjeen käyttäjille, mitä kenttään pitäisi syöttää.

Näytä väriarvo

Sen sijaan, että avaisit Photoshopin vain kopioidaksesi hex värimuodossa, voit itse luoda yksinkertaisen työkalun tähän syöttötyyppiin tehtävän suorittamiseksi, koska luotu väri on jo heksadesimaalissa, mikä olisi todella helppoa;

Ensin lisätään tunnus värinvalitsija syötteeseen ja lisäämme myös tyhjän div tunnuksella hexcolor sen vieressä oleva arvo.

Tarvitsemme jQueryn, joka on linkitetty pää asiakirjaamme. Sitten tallennamme väriarvon ja äskettäin lisätyn div muuttujassa, kuten näin;

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); 

Hanki alkuarvo #värinvalitsija;

 hexcolor.html (väri); 

… Ja muuttaa lopuksi arvoa, kun poimittua väriä muutetaan;

 $ ('# colorpicker'). päällä ('muuta', toiminto () hexcolor.html (this.value);); 

Se siitä; katsotaanpa nyt sitä toiminnassa.

• Colorpicker Demo

alue

alue syöttötyypin avulla voimme lisätä selaimeen liukusäädintä valitaksesi numeron alueella, jonka löydämme myös jQuery-käyttöliittymässä.

Yllä oleva katkaisu on perustason toteutus alue syötteen tyyppi. Voimme myös muuttaa liukusäädintä pystysuoraan käyttämällä CSS: ää seuraavasti;

 tulo [tyyppi = alue] leveys: 20px; korkeus: 200px; -webkit-ulkonäkö: liukusäädin;  

Lisäksi voimme asettaa min ja max esimerkiksi luku;

Alla olevasta katkelmasta asetetaan min nollaan ja 225 maksimi. Kun niitä ei ole erikseen määritelty, selain ottaa oletusarvoisesti käyttöön 0 vähintään 100 maksimi.

Näytä numero

On kuitenkin yksi rajoitus, numero on näkymätön, emme voi nähdä selaimen liukusäätimestä syntynyttä numeroa / arvoa. Jos haluat näyttää numeron, sinun täytyy lisätä hieman JavaScript tai jQuery, ja tässä on, miten me teemme sen;

Ensin lisätään tyhjä div syötteen vieressä tyyli div riittävästi, joten se näyttää laatikon.

Sitten aseta seuraava koodi, joka tekee saman kuin yllä oleva koodi vahvakuvassa, paitsi saamme nyt arvon liukusäätimestä.

 $ (toiminto () var val = $ ('# liukusäädin') .val (), lähtö = $ ('# output'); output.html (val); $ ('# slider'). ) output.html (this.value););); 

Nyt voit nähdä demon. Vain muistutus, katso demo näissä selaimissa - Chrome, Opera ja Safari, koska Firefox ja IE eivät tue alue syöttötyyppi.

• Range Demo

Lopulliset sanat

On selvää, että HTML5 helpottaa elämäämme ottamalla käyttöön monia uusia syöttötyyppejä. Mutta kuten kaikki muutkin HTML5-ominaisuudet, tuki on hyvin rajallista etenkin vanhemmissa selaimissa, joten meidän pitäisi käyttää näitä uusia ominaisuuksia varovaisesti, erityisesti uudet syötetyypit, joista olemme keskustelleet tässä viestissä; Päivämäärä, väri ja alue.

Mutta lopulta toivomme, että nyt sinulla on enemmän tietoa HTML5-lomakkeet. Kiitos, että luet tämän viestin, ja toivomme, että nautit siitä.

• esittely
• Lataa lähde

Lue lisää

Alla on muutamia hyödyllisiä linkkejä, joilla voit kaivaa edelleen HTML-lomakkeisiin.

• Uudet muodon ominaisuudet HTML5: ssä - Opera Dev.
• HTML5-lomakkeiden nykytila ​​- Wufoo
• HTML5-lomakkeen määritteet - w3school.org
• Milloin voin käyttää HTML5-lomakkeita? - CanIUse.com