Friday, June 17, 2022

Hack 4. Bring Back the Tag

✔ Urdu Point on June 17, 2022 0 Comment


HTML5 has breathed new life into the <input> tag. It’s time to get excited once again about this “age-old” tag.

I have to admit that I was getting a little bored with the <input> tag. Before HTML5, any real interaction had to be done outside the tag: whether the interaction involved validation, formatting, or graphical presentation, JavaScript was a necessary polyfill. Well, HTML5 has given us a reason to be excited about the <input> tag again.

The <input> tag is not truly an HTML5 tag, per se. It’s the same <input> tag we have had in every previous version of HTML, but HTML5 has added a slew of new features. The good thing about updating an existing tag is that it’s naturally backward-compatible. You may code your tag like this:

<input type="date"  />

and non-HTML5 browsers will simply see this:

<input />

In this hack we’ll look at a few new, common features of this wonder of a tag.

Some of the Basics

There are a few basic (but powerful) new features in the HTML5 <input> tag that are accessible on almost any input type. We’ll start by looking at some of the simple attributes and then move on to some of the more complex ones.

First on the list is the placeholder text, which is a string assigned to the placeholder attribute that provides a hint for the input box. Placeholder text is quite useful and quickly becoming commonplace. The text appears when the input value is empty and disappears once the input receives focus. Then it reappears when it loses focus (providing the input box is still empty).

Another common attribute is autofocus, which, as you can guess by the name, brings focus to an element once the document is loaded. Simply set autofocus="autofocus" (or just add autofocus as an attribute) and this will be the default focus element once the page is loaded (as opposed to focusing on the first element of the page).

The required attribute is another one of those patterns that has been accomplished through JavaScript for years, but has finally made it into DOM functionality. Simply add the attribute required="required" (or simply required) to your input and the DOM will not submit the form while the requirements of that field are not satisfied. Let’s look at a quick example:

<!DOCTYPE html>
<html>
<body>

<form>
  Add your telephone: <input type="tel" name="phone" required /><br />
  <input type="submit" />
</form>

</body>
</html>

If you try hitting the Submit button without putting a value in the field, your browser will throw up a default message along the lines of “Please fill out this field.” It’s not perfect, but it’s a start.

The form attribute is a feature that has been a long time coming. Have you ever wanted to have a form on your page, but without constraining the form elements to one section of your DOM? Maybe you are on a mobile device and you would like your Submit button to pop up from the bottom of the screen instead of residing in your form area. The form attribute lets you create a form element for a form, even when it is not a child node of the form. Simply set the form attribute to the id of the form (it can’t be the form name or another attribute, something the W3C needs to address). With this attribute, the preceding example would look something like this:

<!DOCTYPE html>
<html>
<body>

<form id="myForm">
  Add your telephone: <input type="tel" name="phone" required /><br />

</form>


  <input type="submit"  form="myForm" />
</body>
</html>

Now that we’ve covered the basics of the <input> tag, let’s move on to some of the tag’s more interesting features.

The autocomplete Attribute

The Web definitely has a fascination with autocomplete. Since we all hate to type, we love it when the form element knows what we want to type and just does it for us. So HTML5 comes along and introduces autocomplete as a simple attribute. You set autocomplete to on or off (it’s on by default) and your work is done! The code would look something like this:

<!DOCTYPE html>
<html>
<body>

<form id="myForm">
  Add your telephone: <input type="tel" name="phone" autocomplete="on" 
/><br />

</form>


  <input type="submit"  form="myForm" />
</body>
</html>

Now, what sucks about autocomplete is where it gets its data. To explain this I’ll cite the boring old spec from the W3C:

The user agent may store the value entered by the user so that if the user returns to the page, the UA can prefill the form.[2]

So, the autocomplete value comes from the user agent. But who is the user agent? It’s not the page developer, or JavaScript, or HTML: it’s the browser. If I fill out a few forms and always enter the string  into the input field designated for an email address, the browser remembers that and prefills it for me. So it’s great for form elements such as email address and telephone number, but it’s not incredibly useful for a developer. The key thing to take away from this discussion is that you can turn off the autocomplete feature when you need to.

Fortunately, all is not lost. HTML5 didn’t forget about the other use case. It’s actually there in the spec as well, it’s just poorly named and even more poorly supported. It’s the list attribute; at the time of this writing, the only browsers that support this attribute are Firefox 10 and Opera 10.

The list Attribute

Think of the list attribute as being a version of autocomplete for developers. The list attribute is tied to an id of a datalist (yes, once again this is not a name or any other type of identifier, it has to be an id). It will look something like this:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" autocomplete="on">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="email" name="email"  /><br />
  Favorite Animal:  <input type="text" name="animal" list="animals" /><br />
  <datalist id="animals">
   <option value="Dog">
   <option value="Dolphin">
   <option value="Duck">
   <option value="Cat">
   <option value="Bird">
   <option value="mouse">
  </datalist>

  <input type="submit" />


</form>


</body>
</html>

The level of interaction is what you would expect from an autocomplete feature: press the “D” key on your keyboard and it should offer you the options from the list of animals that start with D (see Figure 1-3). Once again, don’t be surprised if your favorite HTML5 browser doesn’t support this; it will in time. Keep in mind that the datalist is not visible to the user; it’s purely a reference.


Figure 1-3. Datalist displaying predefined options

One of the bad things about both list and autocomplete is that you can’t style them. I’ll rant about that some more as we get into a few of the more functional input types, such as date, but I would expect to be able to style the results with CSS, just as I do any form element.

The pattern Attribute

How many times have you run a regex (or regular expression) against the value of input to see if it meets certain criteria? If you’re like me, you’ve done this more times than you can count. This was the inspiration for the pattern attribute in HTML5. According to the W3C spec, the pattern should “control” the input value. As you would expect, you utilize this value with the pattern attribute set to a JavaScript format regular expression. Let’s take a look:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" autocomplete="on">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="email" name="email"  /><br />
  ID Number:
  <input placeholder="enter your 5 digit id number" type="text"
    name="idNumber" pattern="[0-9]{5}" />
  <br />

  <input type="submit" />

</form>

</body>
</html>

If you don’t meet the pattern criteria the form cannot be submitted, and instead you get a user agent message that says something like “Please match the requested format.” One of the big problems with this implementation is its lack of adherence to modern web patterns.

Back in the day (2005 or so) we used to wait until a form was submitted to validate each input field, and if one or more of the fields didn’t pass we would return an error message to the user. The W3C’s implementation is so HTML 4.01. In HTML5 I would have expected the validation to be on a specified keystroke or on a blur of the field.

Luckily HTML5 has a backup plan for some of these validation shortcomings. The next hack discusses form validation to see how to make it all work for you!






 


SHARE THIS
Urdu Point

Author:

urdufundastory.blogspot.com is the first of its kind of trendsetting venture existent in Pakistan. It is for the first time in the history of this nation that a large scale project of such nature, evolved from an extraordinarily revolutionizing concept to a practical fulfillment.

0 Comments: