Ieskatieties HTML5 formās ievades tipos Datums, krāsa un diapazons

Veidlapas atrodamas visur tīmekļa vietnēs. Facebook, Twitter, Google - tikai nosaucot dažus - pieprasa mums pieteikties vai reģistrēties vietnē, izmantojot veidlapu, patiesībā mēs arī izmantojam veidlapu, lai čivināt un atjauninātu statusu sociālajās vietnēs. Īsumā, veidlapa ir ļoti svarīga, lai varētu sazināties ar tīmekļa vietni.

Tīmekļa veidlapa ir veidota ar ieejām, agrāk mums ir tikai dažas iespējas ievades tipiem; piemēram, tekstu, parole, radio, izvēles rūtiņu un Iesniegt. Tagad HTML5 nāk ar lieliem uzlabojumiem un ievieš daudzus jaunus ievades tipus.

Tātad, šajā amatā mēs raktos uz dažiem jaunajiem interesantajiem gabaliem no HTML5 veidlapas ka mēs domājam, ka jums vajadzētu tos izmēģināt; pārbaudīsim tos.

Datuma atlasītājs

Pirmā lieta, ko mēs vēlētos apskatīt, ir datuma atlasītājs. Datuma izvēle ir izplatīta lieta, ko var atrast reģistrācijas veidlapā, jo īpaši dažās vietnēs vai lietojumprogrammās, piemēram, lidojuma un viesnīcas rezervācijā.

Ir daudz JavaScript bibliotēku, lai izveidotu datumu atlasītāju. Tagad mēs varam arī izveidot to daudz vienkāršāk, izmantojot HTML5 ievadi datums, sekojoši;

The datuma atlasītājs HTML5 pamatā darbojas ļoti līdzīgi tam, kā to darīja JavaScript bibliotēkas; kad mēs koncentrējamies uz lauka, kalendārs iznāks, un pēc tam mēs varam pārvietoties pa mēnešiem un gadiem, lai izvēlētos datumu.

Tomēr katrai pārlūkprogrammai, kas pašlaik atbalsta datums ieejas veids, proti, Chrome, Opera un Safari, šo ievades tipu attēlo nedaudz atšķirīgi, kas potenciāli var novest pie nekonsekvences problēmas lietotāja pieredzē, un šeit ir redzams, kā tas izskatās;

Dažas ievērojamas atšķirības, kuras var redzēt īsumā no iepriekš redzamās ekrānuzņēmuma; Opera izmantoja angļu valodas trīsburtu saīsinājumu dienas nosaukumam - Sun, Mon, Thu un tā tālāk, kamēr Chrome izmantoja manu vietējo valodu, Safari - no otras puses - darbojas diezgan dīvaini, tā nerāda kalendāru pavisam.

Ir arī daži jauni ievadi veidi konkrētāk izvēlieties datumu vai laiku; mēnesī, nedēļu, laiks, datums Laiks un datetime-local, mēs esam pārliecināti, ka pats atslēgvārds pats par sevi ir pilnīgi neprecīzs, lai pateiktu, ko tas dara.

Jūs varat apskatīt visus tos darbībā, izmantojot zemāk redzamo saiti, bet pārliecinieties, ka to skatāt operētājsistēmā 11 un vairāk, jo rakstīšanas brīdī tas ir vienīgais pārlūks, kas atbalsta visus šos ievades tipus..

• Datepicker Demo

Krāsu atlasītājs

Krāsu atlasītājs bieži vien ir nepieciešama atsevišķa tīmekļa lietojumprogramma, piemēram, šis CSS3 gradienta ģenerators, bet visu šo laiku web izstrādātāji joprojām paļaujas uz JavaScript bibliotēku, piemēram, jsColor. Bet tagad mēs varam izveidot vietējo pārlūkprogrammas krāsu atlasītāju ar HTML5 krāsa ievades veids;

Vēlreiz pārlūkprogrammas, šajā gadījumā Chrome un Opera, padara šo ievades veidu nedaudz atšķirīgu;

Opera vispirms nolaižamajā izvēlnē noklikšķina, kā arī noklikšķinot uz noklikšķināšanas, kā arī nokrāsotajā krāsu sešpadsmit formātā, bet, noklikšķinot uz pārlūka Chrome, tas tieši parādīs krāsu paleti jaunā logā..

Turklāt mēs varam arī iestatīt noklusējuma krāsu ar vērtību atribūts;

Tādā veidā, kad tas tiek skatīts neatbalstītajās pārlūkprogrammās, ievadi teksta laukā pazeminās, un būs redzama noklusējuma vērtība, kas lietotājiem var dot norādes par to, kas jāievada laukā.

Parādīt krāsu vērtību

Tā vietā, lai atvērtu Photoshop tikai, lai kopētu hex krāsu formāts, jūs faktiski varat izveidot vienkāršu rīku, lai veiktu darbu, jo radītā krāsa jau ir heksadecimālā, tas būtu patiešām viegli;

Pirmkārt, mēs pievienojam ID colorpicker ievadi un mēs arī pievienojam tukšu div ar ID hexcolor blakus tai ir vērtība.

Mums ir vajadzīgs jQuery, kas saistīts ar galvu no mūsu dokumenta. Tad mēs saglabājam krāsu vērtību un tikko pievienoto div mainīgajā, piemēram,;

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

Iegūstiet sākotnējo vērtību no #colorpicker;

 hexcolor.html (krāsa); 

… Un, visbeidzot, mainiet vērtību, kad tiek mainīta arī izvēlētā krāsa;

 $ ('# colorpicker') ir ieslēgts ('mainīt', funkcija () hexcolor.html (this.value);); 

Tieši tā; tagad aplūkosim to darbībā.

• Colorpicker Demo

Diapazons

The diapazonā ievades veids ļauj pārlūkā pievienot slīdni, lai izvēlētos numuru diapazonā, ko mēs varam atrast arī jQuery UI.

Iepriekš minētais fragments ir pamata īstenošana diapazonā ievades veids. Mēs varam arī mainīt slīdņa orientāciju uz vertikālu, izmantojot CSS:

 ieeja [tips = diapazons] platums: 20px; augstums: 200px; -webkit-izskats: slīdni-vertikāli;  

Turklāt mēs varam iestatīt min un maks numuru diapazons;

Tālāk esošajā fragmentā mēs iestatām min līdz nullei un 225 maksimāli. Ja tie nav skaidri norādīti, pārlūks pēc noklusējuma ņems 0 par minimālo 100 maksimāli.

Rādīt numuru

Tomēr ir viens ierobežojums, skaitlis ir neredzams, mēs nevaram redzēt ģenerēto numuru / vērtību no pārlūkprogrammas slīdņa. Lai parādītu skaitli, kas nepieciešams, nepieciešams pievienot nedaudz JavaScript vai jQuery, un šeit ir tas, kā mēs to darām;

Vispirms pievienojam tukšu div blakus ievadei, stils div pietiekami, lai tas izskatītos kā kaste.

Tad ielieciet šādu kodu, kas darīs to pašu, kas iepriekš minētajam kodam stiprā krāsā, izņemot mēs tagad iegūstam vērtību no slīdņa.

 $ (funkcija () var val = $ ('# slīdni'). val (); izvade = $ ('# izvade'); output.html (val); $ ('# slīdni'). ) output.html (this.value););); 

Tagad jūs varat redzēt demo. Tikai atgādinājums, skatiet demo šajās pārlūkprogrammās - Chrome, Opera un Safari, jo Firefox un IE neatbalsta diapazonā ievadīšanas veidu.

• Diapazons Demo

Galīgie vārdi

Ir skaidrs, ka HTML5 padara mūsu dzīvi daudz vieglāku, ieviešot daudzus jaunus ievades veidus. Bet kā jebkuras citas HTML5 funkcijas, atbalsts ir ļoti ierobežots, jo īpaši vecākos pārlūkos, tāpēc mums vajadzētu izmantot šīs jaunās funkcijas ar piesardzīgiem, jo ​​īpaši jaunajiem ievades veidiem, par kuriem esam apspriedušies šajā ziņojumā; Datums, krāsa un diapazons.

Bet galu galā mēs ceram, ka tagad jums ir vairāk ieskatu HTML5 veidlapas. Paldies, ka lasījāt šo ziņu, un mēs ceram, ka jums tas patika.

• Demo
• Lejupielādēt avotu

Turpmāka lasīšana

Zemāk ir dažas noderīgas saites, lai jūs varētu tālāk izvērsties HTML formās.

• Jaunas formas funkcijas HTML5 - Opera Dev.
• Pašreizējais stāvoklis HTML5 formās - Wufoo
• HTML5 veidlapas atribūti - w3school.org
• Kad es varu izmantot HTML5 veidlapas? - CanIUse.com