HTML5 Forms Guide
Tags: html, webdev, webcomponents, beginners
Published: 2023-02-12 14:42:49

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](https://github.com/Neha/html-guide)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zusj6gsr7eoj49nbghgf.png)



## Types

**1 . text**

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

```HTML
<input type="name"/>
```

**2 . email**

Email input restricts users to enter a valid email address.

```HTML
<input type="email"/>
```

**3 . password**

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

```HTML
<input type="password"/>
```

**4 . url**

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

```HTML
<input type="url"/>
```

**5 . search**

The search input type allows users to search for specific content

```HTML
<input type="search"/>
```

**6 . date **

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

```HTML
<input type="date"/>
```

**7 . tel**

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

```HTML
<input type="tel"/>
```

**8 . number**

This input type restricts users to enter only numeric values.

```HTML
<input type="number"/>
```

**9 . color**

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

```HTML
<input type="color"/>
```

**10 . range**

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

```HTML
<input type="range" />
```
## 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.

```html
<input type="password" />
```

**2 . placeholder**

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

```html
<input type="password" placeholder="enter your password" />
```

**3 . disabled**

The disabled attribute makes the input field uneditable

```html
<input type="password" placeholder="enter your password" required/>
```

**4 . readonly**

The readonly attribute makes the input field readonly.

```html
<input type="password" placeholder="enter your password" required readonly />
```

**5 . hidden**

The hidden attribute hides the input field

```html
<input type="password" placeholder="enter your password" required hidden />
```

**6 . name**

 This attribute specifies the name of the input element

```html
<input type="password" placeholder="enter your password" required hidden name="password" />
```

**7 . id, and class**

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

```html
<input type="password" placeholder="enter your password" required hidden name="password" id="password" />
```

**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.