HTML 5 New Form Elements and HTML 5 New Form Attributes

0 123

New Form Elements Attributes Autocomplete Placeholder Progress

in this tutorial, we will learn about New Form Elements Attributes Autocomplete Placeholder Progress and related others new form elements and attributes

HTML 5 New Form Elements

HTML 5 has introduced some new form elements that can be use in web pages. These elements are designed to be used with the JavaScript and these elements will be more functional with JavaScript.
New form elements are follows:

  • Datalist
  • Progress
  • Meter
  • Output

HTML 5 Datalist element

Datalist is a form-specific element.it will display a drop-down list of pre-defined options as they input data in input field. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 new datalist element</title>

</head>
<body>


<label> Select Your mobile brand: </label> 

<input type="text" name="Cell" list="Cell_list"/>

<datalist id="Cell_list"> 

<option value="Sumsung"> 
<option value="Nokia"> 
<option value="Blackberry"> 
<option value="Huawei"> 
<option value="Vodafone"> 

</datalist> 

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

</body>
</html>

HTML 5 Progress element

The progress element represents the current status of a task, which gradually changes as the task heads for completion. This is not a form-specific element. For example, when the user downloads any file from a particular Web page, the download task is represented as a progress bar.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Progress element</title>
</head>
<body>

Progress bar:
<progress value="62" max="100">
</progress>

</body>
</html>

HTML 5 Meter element

meter element will represent a measurement scale for a known range. The known range have the definite minimum and maximum values to measure the data on the scale.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 meter element</title>
</head>
<body>

<meter value="8" min="0" max="10">8 out of 10</meter>
<meter value="0.7">70%</meter>

</body>
</html>

HTML 5 Output

Output element will show result of calculation data on form.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 output element</title>
</head>
<body>

<form oninput="x.value = parseInt(type.value)* parseInt(duration.value)"> <label>Membership Type:</label> 
<select name="type"> 
<option value="400">Gold - $400</option> 
<option value="500">Silver - $500</option> 
<option value="600">Platinum - $600</option> 
</select>

<label>Duration [years]:</label> 
<input type="number" value="0" name="duration" min="1"max="5" step="1" /> 

<label> Annual Payment Fees: $.</label> 
<output name="x" for="type duration">
</output> 

</body>
</html>

The <textarea> Element

Text area element will define a multi lines (text area like a box):

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Textarea element</title>
</head>
<body>

<textarea rows="15" cols="60">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</textarea>

</body>
</html>

The <button> Element

The <button> Element will define a button.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 button element</title>
</head>
<body>

<button type="button">Click Me</button>

</body>
</html>

The <select> Element (Drop-Down List)

<select> element will define a drop down list in input field:

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 select element</title>
</head>
<body>

<select>
<option value="samsung">Sumsung</option>
<option value="nokia">Nokia</option>
<option value="blackberry">Blackberry</option>
<option value="huawei">Huawei</option>
<option value="vodafone">Vodafone</option>
</select>

</body>
</html>

HTML 5 New Form Attributes

Earlier web developer need to write JavaScript code to check browser based validations on the data entered by user in a web form fields.
HTML 5 introduced new attributes to perform browser-based validation without writing a JavaScript codes.

  • Required
  • Placeholder
  • Pattern
  • Multiple
  • Autofocus
  • Autocomplete Attribute

Required

Required attribute is Boolean attribute that informs to browser submit that form only when no field left blank by user. The input type elements, such as button, range, and color cannot be set for required attribute as they have a default value.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Required attribute</title>

</head>
<body>

<form>
<label>First Name: </label> 

<input type="text" value="" name="first" size="10" tabindex="1" required ="true"/> 

<label>Sec Name: </label> 

<input type="text" value="" name="last" size="16" tabindex="2" required="true"/> 

<input type="submit" value="submit"/> 
<form>

</body>
</html>

Placeholder

Placeholder shows a small hint to a user that what data to enter in field. Placeholder works like a toggle like its appears in the field and disappear when user clicks inside input field.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Placeholder attribute</title>

</head>
<body>

<form>

<input type="text" value="" name="first" size="10" tabindex="1" required ="true" placeholder="First Name"/> 


<input type="text" value="" name="last" size="16" tabindex="2" required="true" placeholder="Last Name" /> 

<input type="submit" value="submit"/> 
<form>

</body>
</html>

Pattern

This attribute uses regular expressions for validating the fields. The data entered by the user must match with the pattern specified in the regular expression. This helps to limit the input accepted from the user.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Pattern attribute</title>

</head>
<body>

<form>
<label>Phone number:</label> 

<input type="tel" value="" size="4" maxlength="5" tabindex="11" required="true" placeholder="Code"pattern="[+0-9]{1,4}" title="Format:(+)99(99)"/> 

<label>-</label> 

<input type="tel" value="" size="10" maxlength="12" tabindex="13" required="true" placeholder="Number" pattern="[0-9]{8,}" title="Minimum 8 numbers"/> 

</form>
<input type="submit">

</body>
</html>

Multiple

Multiple is a Boolean attribute that allows a user to enter multiple values for some input types.in earlier versions it was available only select input type but HTML5 allows multiple attributes with input types such as email and files.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Multiple attribute</title>

</head>
<body>

<form>
<label>Enter e-mail Address:</label> 

<input type="email" value="" name="emailid" maxlength="255" tabindex="5" required="true" placeholder="Email Address" multiple/> 

<input type="submit">
</form>

</body>
</html>

Autofocus

Earlier, Web developers were using JavaScript code to set the focus to the input field on page load. The purpose was to force the focus over the input field, even if the user selected some other element while page is still loading. As a result of the JavaScript code, control moves to the input field upon completion of page load. This way, regardless of what the user selected, the focus would always be on the input field.
But HTML5 introduced new autofocus attribute. Autofocus attribute will focus on the input field on page load.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Autofocus attribute</title>

</head>
<body>

<form>
<label>Enter e-mail Address:</label> 

<input type="email" value="" name="emailid" maxlength="255" tabindex="5" required="true" placeholder="Email Address" autofocus/> 

<input type="submit">
</form>

</body>
</html>

Autocomplete Attribute

Many browsers help user in filling forms by providing data in the input fields, such as email and tel, based on their earlier input. In many situations, the autocomplete behavior may not be secure, especially with certain fields accepting password or credit card number data.
HTML5 offers an autocomplete attribute which provides control on prefilled values displayed in the fields. It must be specified on the form element which applies for all input fields or on particular input fields. The input element that can support autocomplete are text, url, tel, password, datepickers, range, and color.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML 5 Autocomplete attribute</title>

</head>
<body>

<form> 
Enter E-mail address:<input type="email" name="email" autocomplete="on" /> 
<input type="submit" value="submit"/> 

</form>

</body>
</html>

Comments

comments

Leave A Reply

Your email address will not be published.