How to Create a Telephone Input Field in HTML5

Though  field validation and data formatting are the biggest challenges of working with web browsers, HTML5 does some help in enforcing this for us.

Telephone input field can be created using type=”tel”:

This looks like every other input field, with the difference that it optimizes the keyboard. Certain platforms like tablets, or smartphones will pop-up only-numeric keyboard for this input field.

It is hard to enforce particular regular expression through HTML because of variety of phone number formats used along with differences in country codes, and number separators. It remains the sole responsibility of the developer to implement these checks through JavaScript or other library function.

For example, here is the pattern for common USA phone format:
[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}

you can apply this format using the pattern attribute:

This page has some more examples for phone number patterns in different regions

tel input type is currently supported in all major modern browsers. The full numeric keypad makes a great user experience.

22934

How to Use Html5 Input Type Email

Before the advent of HTML5, handling emails addresses required more work to validate the email addresses using Javascript. Well all that is now not necessary with the new HTML5 input type email.

The email input element has been specifically designed to handle and validate email addresses. Depending on the browser, it will alert the user that the entered information is not correct and the form will not submit until the user makes corrections.

Sample Code:

[click to continue…]

How to Add a Label to HTML Radio Button

Radio button allows user to choose only one of the pre-defined options. Each radio button must be accompanied by a label describing the choice it represents.

There are two ways to label radio button elements. One is to enclose the whole <input type=”radio”> tag inside <label > tags:

[click to continue…]

How to Create a “Yes/No” Radio Button

Using radio button to accept Yes/No questions is best because the field accepts only one of the options. It is better than a dropdown because there are only two choices – either of them can be selected by a single click

Here is the code to create a yes/no radio button.

[click to continue…]

How to Customize HTML5 Date Field Date Format

When date input was added by HTML5, many believed that it would offer the users a friendly, interactive and known method of entering a date on a website. However; this new addition has failed to live up to the expectations and the major reason behind it remains the fickle nature of the format of the input given by the user.

Originally, the date input attribute was designed as a form element to pick values through a datepicker. The problem however, lies in the implementation of datepicker which changes from browser to browser. What it essentially means is that as a web designer you must be intending to allow user to pick a date in the format YYYY/MM/DD via datepicker and you designed your HTML validations accordingly, but when the user accesses the webpage through the browser on his system, he might see a completely different sequence of selections depending upon the default date settings in his/her system and the browser used.

Now there is no said rule in HTML5 that would allow the web designers to change the format in which the date element picks values. Therefore, the rigidness of the date element prompted designers to look for other ways to alter the format of the date to be entered by the user.
[click to continue…]

Creating CSS3 Button Hover Effects

The CSS3 “hover” is a pseudo-class that enables you to select and style elements on a web page when the mouse moves over an element. You can use Javascript or CSS style sheets to react to this event depending on your objective. For example:

The CSS code above styles a button with class ‘checkout’. The default color of the button is blue and when the mouse is over the button, the color changes to green.
[click to continue…]

How to Use HTML5 Input Type ‘file’ – With Examples

If you’re developing a nice website like Facebook or Youtube where subscribers share images and videos, or you’re selling premium content like e-books online, you have to provide a way for users to upload content. In this tutorial, I will show you how to add file uploading capability to your web page like a pro.

The W3C HTML Standard defines several <input > types each designed to handle a specific type of data. For file uploading purposes, the HTML input element, aptly a tag named <input type=”file”>, has been provided. How does it work? Let’s dive straight into the tutorial to find out.
[click to continue…]

Form Validation Using Jquery Examples

When you include forms on your website for user input, it is always advisable to perform some validation on the data entered. This not only ensures that your application receives the type of data it can work with, but it also makes for good UX (user experience) as users will be able to be warned of the incorrect input and be given hints of the kind of data that is acceptable.

There are two kinds of validation: client-side and server-side validation. It is recommended that you perform both. Client side validation is usually done with JavaScript and it serves to give the user quick feedback on input errors before a call to the server is made with the data. Server side validation serves as a second line of defence against invalid data. Even if you have set up client side validation, you should always perform server side validation as JavaScript can be bypassed.
[click to continue…]

How to Make a Form in HTML

Forms are essential components of any good website. A form makes it possible to collect user input. In this tutorial, we will learn how to create a form in HTML and we will also see how to process the form data.

The <form> element

The <form> element lets you create a form. Forms are used on a website to capture user inputs. In other words, forms are used to collect the values entered by the user on a web page.
[click to continue…]

HTML5 Number Input Type

HTML5 has introduced many input types. The number input type is one of them. In this tutorial, we will learn how to use and customize the number input type. This post will also talk about the advantages of using this new input type.

What is the number input type?

The number input type (<input type=”number”>) is one of the many input types. It gives a numeric input field in an HTML form, which lets you enter numbers in a flexible manner. Using this input type, you can enter a value in two ways — from the keyword and by clicking the little up and down buttons provided in the input field.
[click to continue…]