HTML and CSS Reference
In-Depth Information
input:invalid {
border: 5px solid #FF0000;
}
Looking at the previous CSS declarations, you can update the border weight and color on focus and when the
value is invalid to present the user with a more significant border weight and a bright red color for “error.”
Another really useful feature with these inputs is the
datalist
element. Have you ever started to search for
something on Google and noticed that the topic you were searching for was already prepopulated in the list below the
input field? Well, using an HTML5
datalist
element, you can provide similar helpful hints while a user is entering
information into the
input
tag.
datalist
elements can be super helpful for a user if they're trying to filter through
an ad with a bunch of categories. Taking the earlier ShopLocal retail example, your user could be presented an ad
with various categories and products. Wouldn't it be helpful to filter them for a user? Let's take a look at the following
example to do just that:
<body>
<input type="text" name="categories" list="categories" />
<datalist id="categories">
<option value="Electronics">
<option value="Furniture">
<option value="Office Supplies">
<option value="Kitchen">
<option value="Bedding">
<option value="Bath">
</datalist>
</body>
As you can see from the code, you have a
datalist
called
categories
, which includes option values for all of the
possible categories. Now when the user starts to type into the input field, using the
list
attribute called
categories
,
you can present the users with options while they type.
Forms don't end there though, there are a lot of improvements to and even working groups are producing more
content for HTML5 and HTML. That said, a full-fledged JavaScript speech API for input is in the works and is currently
supported in newer versions of Google's Chrome browser. Obviously spearheaded by the folks at Google, you can start
to take advantage of this in the browser by including the following in your
input
tag:
<input type="text" x-webkit-speech />
Using the previous
x-webkit-speech
attribute in your
input
tag will yield Figure
11-9
on your input text area.
Figure 11-9.
How the Chrome browser supports speech input
You can also parse through the results of the input speech with the following code snippet by listening for the
event being passed in and grabbing the results object off that event. Next you'll log out to the console with the result's
utterance
and
confidence
, which are two properties in the speech API that analyze the users input.
