Everything is easier when it has a name. Name tag for Jean Georges Perrin (with typo) at Publishing Business Conference in New York (September 2013)
Everything is easier when it has a name. Name tag for
Jean Georges Perrin (with typo) at Publishing Business Conference in New York (September 2013)

Maybe, I am a little too much  on the standardization side sometimes. However I like things to be consistent, therefore, in a project, I spend a great deal of times making sure we have standards, processes, and conventions.

This article is about naming fields on the client side. Namely, the “name” attribute of the <input> element. The idea is to have a consistent naming convention throughout the application.

This will also enable consistent browser autocompletion.

Some may argue that having such a convention is exposing a security threat, but I really think that security should not harm user experience. Hackers will find your name if they want to.

Convention

  • Use all lowercase.
  • Separate words by a single dash. I like dashes better than underscore as it usually more used as separators.
  • Number fields starting at 1. Yeah, I love 0 too, but we are really on the front end here.
  • Try to be as explicit as possible.
  • Try to be as short as possible.

Lexicon

The following table lists the name of valid fields, with a small description, as well as rejected names. Feel free to discuss rejections in the comments below.

Field name Description Rejected
first-name Individual’s first name. fname, firstname
last-name Individual’s last name. lname, lastname
company A company name. organization
email Individual’s e-mail address. e-mail
street1 First line of address. address-1, address1
street2 Second line of address. address-2
city City.
state State. province
zip Zip code. zip-code, zipcode, postalcode, postal-code, zip5
zip4 Zip-4 extension as described by USPS. zip-4, zip-extension, zip9, plus4, zip+4
country Country.
phone Phone. tel, telephone
cell Cell phone. cellphone, cell-phone, mobile, portable
website Website, it is a single word. web-site
allow-sms Allow to receive SMS. sms, allowsms
work-phone Work phone, office phone. workphone, office-phone
fax Fax (some people still uses them…) telefax
password1 First line of password. pass1
password2 Second password, usually used to match password1. pass2
dob Date Of Birth. birthday, date-birthday, anniversary
dob-year Year of the date of birth.
dob-month Month of the date of birth.
dob-day Day of the date of birth.