DEV Community

Neha Sharma
Neha Sharma

Posted on

HTML5 Forms Guide

HTML5 has native form inputs. HTML5 has range of different type of inputs for almost every
task in the web. With the type and attributes we can do a lot.

HTML5 forms come with many input types and attributes, which can be customized to meet specific needs. We will explore the different types and attributes of HTML5 forms.

Check the code here

Image description

Types

1 . text

This type of input allows users to enter any type of text.

<input type="name"/>
Enter fullscreen mode Exit fullscreen mode

2 . email

Email input restricts users to enter a valid email address.

<input type="email"/>
Enter fullscreen mode Exit fullscreen mode

3 . password

The password input type masks the user's password to protect it from being visible

<input type="password"/>
Enter fullscreen mode Exit fullscreen mode

4 . url

This input type is used to get a valid URL from the user

<input type="url"/>
Enter fullscreen mode Exit fullscreen mode

5 . search

The search input type allows users to search for specific content

<input type="search"/>
Enter fullscreen mode Exit fullscreen mode

*6 . date *

The date input type provides a calendar interface to select a specific date

<input type="date"/>
Enter fullscreen mode Exit fullscreen mode

7 . tel

The Tel input type restricts users to enter a valid phone number

<input type="tel"/>
Enter fullscreen mode Exit fullscreen mode

8 . number

This input type restricts users to enter only numeric values.

<input type="number"/>
Enter fullscreen mode Exit fullscreen mode

9 . color

The color input type provides a color picker interface to select a specific color

<input type="color"/>
Enter fullscreen mode Exit fullscreen mode

10 . range

The range input type allows users to select a range of values.

<input type="range" />
Enter fullscreen mode Exit fullscreen mode

Attributes

HTML5 form attributes provide enhanced functionality and enable developers to create forms that are more effective and user-friendly. Here are some of the most commonly used attributes:

Common attrinutes

1 . type

This attribute defines the type of input element.

<input type="password" />
Enter fullscreen mode Exit fullscreen mode

2 . placeholder

The placeholder attribute specifies a short hint that describes the expected input value

<input type="password" placeholder="enter your password" />
Enter fullscreen mode Exit fullscreen mode

3 . disabled

The disabled attribute makes the input field uneditable

<input type="password" placeholder="enter your password" required/>
Enter fullscreen mode Exit fullscreen mode

4 . readonly

The readonly attribute makes the input field readonly.

<input type="password" placeholder="enter your password" required readonly />
Enter fullscreen mode Exit fullscreen mode

5 . hidden

The hidden attribute hides the input field

<input type="password" placeholder="enter your password" required hidden />
Enter fullscreen mode Exit fullscreen mode

6 . name

This attribute specifies the name of the input element

<input type="password" placeholder="enter your password" required hidden name="password" />
Enter fullscreen mode Exit fullscreen mode

7 . id, and class

These attributes are used to identify and style the input element.

<input type="password" placeholder="enter your password" required hidden name="password" id="password" />
Enter fullscreen mode Exit fullscreen mode

8 . aria-*

This attribute is used for accessibility, and it describes the purpose or the state of the input element to assistive technologies.

Conclusion

HTML5 forms provide various input types and attributes, which can be customized to meet specific needs. Understanding the different types and attributes of HTML5 forms is essential for developers who want to create effective and user-friendly forms. By following the guidelines outlined in this blog, you can create forms that are accessible, user-friendly, and optimized for the web.

Top comments (0)