fastread homefastrread library fastread menu

HTML5 : New form attributes

Tutorial by:Franklin Dessi      Date: 2016-08-25 23:41:33

❰ Previous Next ❱

placeholder

A placeholder attribute tells the user what data needs to be entered in the form of text in a lighter shade. After the user enters characters in the text field, the text in the lighter shade disappears.

Let's look at the following code to understand it better:

<!DOCTYPE html>

<html>

<head>

<title>

The Placeholder Attribute

</title>

<h1> The Placeholder Attribute </h1>

</head>

<div>

Enter the name of the animal in the search box below and click on Go

<br><br>

<label for="animal">Animal Name : </label>

<input id="animal" placeholder="Enter the animal name">

<input type="submit" value="Go">

</div>

</html>

 

In the following screenshot, the text box containing the lighter shade text demonstrates the placeholder effect:

NEW ATTRIBUTES HTML5 FORM PLACEHOLDER

We can see the text Enter the animal name in a lighter shade. After we click on the textbox, the text disappears. Hence, it is just a way to let the user know what input is expected.

autofocus

With this attribute, the browser sets the focus on the field where autofocus is

defined when the page is being loaded.

EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title> Autofocus attribute </title>

<h1>The Autofocus Attribute</h1>

</head>

<p> Login page for Packt Publishing</p>

<div>

<br>

<label for="name">Login Name :</label>

<input id ="name" type="text">

<input type="submit" value="Go">

<br>

or

<br>

<label for="loginid">Login Id :</label>

<input id ="loginid" type="text" autofocus>

<input type="submit" value="Go">

</div>

</html>

 

HTML5 AUTOFOCUS

Hence, the user doesn't have to click on a field when the page loads up as it is set

to autofocus.

 

required

The required attribute makes it mandatory for the user to enter a value in the field. If the user doesn't enter any data in the ield with the required attribute, then it will prompt the user accordingly.

The output is different in Opera and Firefox, hence we will display screenshots for both the cases.

EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title> Required attribute </title>

<h1> The Required Attribute </h1>

<br>

</head>

<hr>

<br>

<form>

<label for="loginid"><em>Login name<em> : </label>

<input name="loginid" type="text" required>

<input type="submit" value="Submit">

</form>

</html>

OUTPUT


HTML5 REQUIRED

We have seen how the output looks in a Firefox browser.

datalist

The datalist attribute is used to create a list of pre-defined items as a drop-down menu. On using this tag, the pre-defined menu items get displayed when we click on the textbox.

EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title>Datalist attribute</title>

<h1> The Datalist Attribute </h1>

</head>

<p> <em> Genres of Music </em> </p>

<div>

<label for="fstrd"> Music : </label>

<input id="fstrd" name="fstrd" type="text" list="music">

<input type="submit" value ="Go">

<datalist id="music">

<option value="Pop">

<option value="Rock">

<option value="Jazz">

<option value="Blues">

<option value="Classical">

</datalist>

</div>

</html>

 

OUTPUT

HTML5 DATALIST ATTRIBUTE

For example, the drop-down menu displays all the genres of music when we click in the textbox. However, we are not just limited to the menu items declared in the code. We can enter any data that is not a part of the list declared in the code.

❰ Previous Next ❱


HTML5

Submit Your Thought, Tutorial, Articls etc.

Submit Your Information India's Number one online promotion website