<IN­PUT>

Web Designer - - 30 best html, css & js apis -

The most com­mon of el­e­ments can be more flex­i­ble than you think

Even the sim­plest of forms need some kind of val­i­da­tion. A con­tact form, for ex­am­ple, needs to check if a name and email have been filled out. Users now ex­pect in­stant feed­back on what has been en­tered. This used to be the role of Javascript. If a web­site needed a date en­try Javascript would need to check a text value looked like a date. This re­quired the de­vel­oper know­ing all the dif­fer­ent for­mats that could be valid and im­ple­ment­ing that check cor­rectly. All of that changed with HTML5. The new spec­i­fi­ca­tion in­tro­duced a host of new in­put types that could be added as needed without the need for scripted val­i­da­tion. When given a cer­tain type, a browser ren­ders an ap­pro­pri­ate in­ter­face geared to­wards that in­put. On touch­screen de­vices, this also meant a con­tex­tual key­board that mer­ited it­self to the in­put in ques­tion. If used within a form, the val­i­da­tion oc­curs on sub­mis­sion. Browsers will show an inline er­ror mes­sage for each field that is wrong, so users know what is hap­pen­ing. An in­valid form will not sub­mit.

Colour in­puts <in­put type=”color” />

In forms where colour in­put is re­quired, the ‘color’ type pro­vides ei­ther a colour picker or a hexa­dec­i­mal text in­put to pro­vide a value. The dis­play of the colour picker can vary de­pend­ing on the browser, which may only sup­ply a lim­ited sub­set of colours by de­fault. A site us­ing this in­put should pro­vide an al­ter­na­tive method of in­put in this case. A de­fault colour can be ap­plied by sup­ply­ing a ‘value’ to the field, but this must be a valid hex colour and not a CSS colour name or func­tion like ‘lin­ear-gra­di­ent’. If an in­valid colour is added, it will de­fault to black.

Num­ber in­puts <in­put type=”num­ber” min=”0” max=”99” />

When a form re­quires a num­ber, it makes sense to use an in­put spe­cialised for that pur­pose. A num­ber field get au­to­matic val­i­da­tion to be sure the value is numer­i­cal. Most mod­ern browsers will also ren­der step­per but­tons, which al­low the user to in­cre­ment or decre­ment the value inline. On a touch­screen de­vice, the key­board will up­date to show num­bers by de­fault and may even al­low users to swipe to in­crease and de­crease the value. Ex­tra at­tributes on the in­put can limit the value be­ing en­tered. For ex­am­ple, an age field may have a ‘min’ at­tribute to stop a neg­a­tive value be­ing added.

<in­put type=”range” min=”0” max=”10” />

When a spe­cific value is not nec­es­sary, a range in­put may be more use­ful. In this case, browsers can ren­der a more ap­pro­pri­ate slider to al­low the user to se­lect a value more eas­ily. These are use­ful for sim­ple com­po­nents such as vol­ume slid­ers.

Modes on any in­put

While these type in­puts are great for their typ­i­cal use case, it can be­come a hin­drance for oth­ers. For ex­am­ple, a credit card num­ber is nu­meric but does not need the in­cre­ment and decre­ment be­hav­iour that the ‘num­ber’

type pro­vides. <in­put in­put­mode=”nu­meric” pat­tern=”[0-9]*” />

Most forms would fall back to reg­u­lar text in­put in this case and use a ‘pat­tern’ at­tribute to de­fine what is re­quired. This re­quires the de­vel­oper to know the right pat­tern for their in­put, which can cause a sim­i­lar is­sue to be­fore. An ‘in­put­mode’ at­tribute is com­ing to browsers that aims to tackle this is­sue. It hints to the browser what kind of in­ter­face would help the user add data to this field. Hav­ing a value of none will en­sure no vir­tual key­board is dis­played, al­low­ing for a cus­tom key­board within the page it­self.

Al­ways server val­i­date

As great as these in­put types are, they are not without flaws. Browsers may not sup­port a spe­cific type or can have un­ex­pected valid in­puts, such as ‘e’ for num­ber in­puts. At the very least, a user can still edit the HTML on a page and re­move val­i­da­tion al­to­gether. It is im­por­tant that any data sub­mit­ted to a server is also val­i­dated on that side to avoid any is­sues. In­clude client-side val­i­da­tion to help.

When us­ing the cor­rect in­put type, browsers will val­i­date the in­put without the need for any added checks with Javascript

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.