Best practices when building forms
Tags: forms, beginners, bestpractices, html
Published: 2023-03-25 15:00:42

Building forms can be tricky sometimes, but if you add some extra details it can improve your site performance and accessibility.


![Forms gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdvpy5331evqx6gmgnki.gif)

## Use Semantic HTML Form Elements

This will help when users need to navigate in your site using keybords. The tab key will automatically move between form fields.

Tags 

```
<form>
```

Start your form with this tag on your html file, I know is  simple but sometimes it's easy to forget.

```
<label>
```

This tag is really important, because it helps screen reader users, it announces the text within them.

_here's how you can match/connect the tag label with the input:_

```        
<label for="name">Name</label>
                            
<input type="text" id="name"/>
```

Using the label's `for="` attribute with the <input> `id="`

You can also code the input within the `<label>` tags:

```
 <label>
     Nome
    <input type="text" id="name"/>
 </label>
```

❗️ Don't use `<div>` when creating buttons!

```
❌ <div>Play video</div>
✔️ <button>Play video</button>
```

Using the correct tag not only helps with accessibility but with your site SEO.

`<fieldset>` and `<legend>`

As the example below shows, the `<fieldset>` element provides a grouping for a part of an HTML form, with a nested `<legend>` element providing a caption for the `<fieldset>`.

```
 <fieldset>
   <div class="fielset-wrapper">
      <legend>Agendar próxima mentoria</legend>
          <div class="col-3">
          <div class="input-wrapper">
         <label for="event-date">Data <span>(DD/MM/AAAA)</span></label>
        <input type="date" id="event-date"/>  
    </div>
    
    <div class="col-2">
    <div class="input-wrapper">
    <label for="event-begin">Das</label>
    <input type="time" id="event-begin"/>
    </div>
      
     <div class="input-wrapper">
     <label for="event-end">Até</label>
     <input type="time" id="event-end"/>
     </div>
   </div>
   </div>
  </div>
</fieldset>
```

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqcg9qfilgo21x1kwm3w.png)

## Validation

- add required fields

```
<div class="input-wrapper">
   <label for="event-email">Email <span>(digite um email válido)</span></label>
   <input type="text" id="event-email" required/>
</div>
```

- accept valid information, such as email and phone-number

For emails you can include rules such as:
 - Uppercase (A-Z) and lowercase (a-z) English letters.
 - Digits (0-9).
 - Characters ! # $ % & ' * + - / = ? ^ _ ` { | } ~


![Example of an required email field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duso1mkafqqia8ov94d7.png)


## Use focus styling

## Add contrasting colors 

- remember to use outline, hover, contrast colors, you can also test your page colors if you need 😉

## Flag up Errors 

Try to add message errors or call attention adding some color to the missing input.

![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4oe3lhlcem7cjywg50z.png)


## Checkbox

In case you want to custom your checkbox, you need to make sure its accessibility is not lost. Here's an example of how you can do it.

![Checkbox example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c9s4uib4at732zug5xe.png)

{% codepen https://codepen.io/martinivi/pen/KKGqQKZ %}

Wanna know more?
[W3C](https://www.w3.org/WAI/tutorials/forms/labels/)
[mdn web docs](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)

The complete code you can find on [my github](https://github.com/vivianemartini/stage03-building-forms) page 💛 I coded for my Explore Class at [Rocketseat](https://www.rocketseat.com.br/).💜

Please share in the comments if you remember something else 🤩