New form's element in HTML5

I am pretty sure that after reading my previews post, now you have basic knowledge of HTML5, so now it's time that we talk on some new form's element in HTML5. New form's element in HTML5 have no limits, you can use any combination as per your requirement. In fact you can write one of your own and use it in your project. But for now let's begin with the basic.

What is form ?

HTML forms are used to select different kinds of user input and pass this information to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

New form's element in HTML5

HTML5 has several new input types for forms. These new features allow better input control and validation. Some of new input types for forms are : <input type="color">, <input type="datalist">, <input type="date">, <input type="email">, <input type="number">, <input type="range">, <input type="time">, <input type="url"">,

Important : Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.

1. <input type="color"> : This input type brings up a color picker. This input type allows the user to pick from a selection of colors, enter hexadecimal values directly in a text field, or to invoke the OS's native color picker.

Code Snippet

<div class="main">
	<section>
    	<form>
        	<label>Select your color : </label>
            <input type="color" name="favcolor">
        </form>
    </section>
</div>

                                        

See above code in action here

Browser Support

2. <datalist> : The HTML <datalist> tag is used for providing an "autocomplete" feature on form elements. It enables you to provide a list of predefined options to the user as they input data. For example, if a user began entering some text into a text field, a list would drop down with prefilled values that they could choose from.

Code Snippet

<input list="cars" /> 
<datalist id="cars">
	<option value="BMW">
    <option value="Ford">
    <option value="Volvo"> 
</datalist>

                                        

See above code in action here

Browser Support

3. <input type="date"> : The date type allows the user to select a date.

Code Snippet

<div class="main">
	<section>
    	<form>
        	<label>Select date : </label>
            <input type="date" name="date">
        </form>
    </section>
</div>

                                        

See above code in action here

Browser Support

4. <input type="email"> : The email type allows the user to put an email in field. Email type only except email address. If user put the other value to email, then form will not submit.

Code Snippet

<div class="main">
	<section>
		<form>
			<label>Email address : </label>
			<input type="email" name="email" class="text">
			<input type="submit" value="Submit" class="submit" >
		</form>
	</section>
</div>

                                        

See above code in action here

Browser Support

5. <input type="number"> : The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted.

Code Snippet

<div class="main">
	<section>
    	<form>
        	<label>Number (between 5 and 10) : </label>
            <input type="number" name="quantity" min="5" max="10" class="text">
        </form>
    </section>
</div>

                                        

See above code in action here

Browser Support

6. <input type="range"> : Creating a slider control to allow you to choose between a range of values used to be a complicated, semantically dubious proposition, but with HTML5 it is easy — you just use the range input type.

Code Snippet

<div class="main">
	<section>
    	<form>
        	<label>Range (between 1 and 50) : </label>
            <input type="range" name="points" min="1" max="50" class="text">
        </form>
    </section>
</div>

                                        

See above code in action here

Browser Support

7. <input type="time"> : : The time type represents a control for setting the element's value to a string representing a time (with no time-zone information)

Code Snippet

<div class="main">
	<section>
    	<form>
        	<label>Time : </label>
            <input type="time" name="time" class="text">
        </form>
    </section>
</div>
                                        

See above code in action here

Browser Support

8. <input type="url"> : The url type is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted.

Code Snippet

<div class="main">
	<section>
    	<form>
           <label>Time : </label>
           <input type="url" name="url" class="text">
           <input type="submit" value="Submit" class="submit" >
        </form>
    </section>
</div>
                                        

See above code in action here

Browser Support

New attributes ?

1. <input> autofocus Attribute : Automatically gives focus to this control when the page loads. This allows the user to start using the control without having to select it first. There must not be more than one element in the document with the autofocus attribute specified.

Code Snippet

<div class="main">
	<section>
    	<form>
        	<input type="text" name="text" class="text">
            <input type="text" name="text" autofocus="autofocus" class="text">
        </form>
	</section>
</div>
                                        

See above code in action here

Browser Support

2. <input> pattern Attribute : Specifies a regular expression against which the control's value is to be checked. Value must match the Pattern production of ECMA 262's grammar.

Code Snippet

<div class="main">
	<section>
		<form>
			<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
		</form>
	</section>
</div>
                                        

See above code in action here

Browser Support

3. <input> placeholder Attribute : Specifies a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format.

Code Snippet

<div class="main">
	<section>
    	<form>
        	<input type="text" name="text" class="text" placeholder="Username">
            <input type="text" name="text" class="text" placeholder="Password">
        </form>
    </section>
</div>
                                        

See above code in action here

Browser Support

4. <input> required Attribute : Specifies that the input field is a required field (the user must complete this field).

Code Snippet

<div class="main">
	<section>
    	<form>
        	<label>Email address : </label>
            <input type="email" name="email" required="required" class="text">
            <input type="submit" value="Submit" class="submit" >
        </form>
    </section>
</div>
                                        

See above code in action here

Browser Support

Hope it helps !

Sandeep Kundu