DEV Community

loading...
Cover image for On attributes for HTML form elements

On attributes for HTML form elements

Chen Hui Jing
๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘พ๐Ÿ€๐Ÿšฒ๐Ÿ–Œ๐Ÿ‘Ÿ๐Ÿ’ป๐Ÿ–Š๐ŸŽ™๐ŸฆŠ๐Ÿง—โ€โ™€๏ธ๐ŸŽน๐Ÿณ๏ธโ€๐ŸŒˆ
Originally published at chenhuijing.com on ใƒป3 min read

I often come across tutorials about building forms on the web. In spite of all the newfangled techniques and frameworks we now have to perform actions on web pages, the trusty old HTML form still has its place.

There is an article published by Hugo Giraudel on Apollo GraphQL without JavaScript where they describe how the GraphQL-powered N26 web platform can still work when Javascript is not available.

Hint, it involves HTML forms.

Which led me to wonder how many people really know about the different attributes that come baked in with HTML form elements. For example, the type attribute.

A thinking cat

Hang on, I can almost hear some of you saying, of course you know about them, you just typed <input type="text"> for the millionth time yesterday.

And being the annoying person that I am, Iโ€™m very tempted to reply, well actuallyโ€ฆ the default type attribute for <input> is text and it would still work and validate even if you didnโ€™t include it.

Yes, my friends, some HTML attributes have default values (as does all CSS, FYI).

There is no harm in including type="text", and some people might even prefer to have it there, for reasons, and thatโ€™s fine.

This is just a gentle reminder in a world where people seem to be searching for all manner of ways and means to shave bytes, that default values donโ€™t really have to be there.

Same goes for the <button> element. The default type is submit, which means if you had a vanilla HTML form like so:

<form action="/login">
  <label for="username">Username</label>
  <input name="username" id="username">

  <label for="password">Password</label>
  <input name="password" type="password">

  <button>Login</button>
</form>
Enter fullscreen mode Exit fullscreen mode

And you clicked the button, or pressed the Enter key, your form would submit to /login. Guess what? The method attribute on <form> elements also has a default value, which is GET.

Please donโ€™t submit any sensitive information, like a password via the formโ€™s GET method because it becomes visible in the URL. Go ahead, throw the above form into a blank HTML file and try it. Using POST will send the form data in the body of the HTTP request.

So if you wanted a button to do things other than submit a form, you can always use <button type="button">, which gives you a clickable button that doesโ€ฆ nothing. So you can attach whatever event listeners you like to it and make it trigger whatever you want.

Iโ€™ve come across tutorials for frameworks that were great at explaining the framework bit of things, but had shockingly nested <div> soups for markup. Or utilised Javascript to write functionalities that could have been achieved with attributes instead.

My shocked faceโ€ฆ or close enough
A shocked cat

Say you want to have a character limit on your comments, which are input via a <textarea>. You can use the maxlength attribute. The browser will prevent any further input past the specified character length.

<textarea maxlength="140"></textarea>
Enter fullscreen mode Exit fullscreen mode

Or if youโ€™d like your users to input comments that are longer than just a smiley face. You can use the minlength attribute. Depending on the browser youโ€™re using, it is a slightly different user experience but try submitting the form with less than 10 characters.

This is not a rant at the state of the web today (okay, maybe just a little bit). Rather, I want this to be an invitation to explore and discover which of these many wonderful attributes are most useful to you.

Then use them.

They are fully compatible with the framework of your choice.

Especially to all who are either hearing of these attributes for the first time, or never got around to using them.

So, at the risk of sounding like some grumpy old person yelling โ€œget off my lawnโ€ at the cool kids, I just want to end off with a quote from one of my esteemed seniors from a previous company.

The best code is the code not written.

Cheers, my friends. ๐Ÿฅƒ

Discussion (4)

Collapse
victorioberra profile image
Victorio Berra

Read the article just for the cat pics.

Collapse
bernardbaker profile image
Bernard Baker

Another interesting aspect of form on[event] is onBlur and onInvalid when developing solutions for custom validation.

Collapse
huijing profile image
Chen Hui Jing Author

Indeed. And that's when additional functionality needs to be written. But if the use-case calls for something straightforward that the browser already provides, my opinion is to go for those first every time.

Collapse
bernardbaker profile image
Forem Open with the Forem app