# HTML Form Attributes & Validation

# HTML5 Form Validation

While we're handling the form backends of your forms, you may want to validate them before you publish to make sure your users enter the correct data.

Even though it is still not being supported in some browsers (opens new window), HTML5 gives you a lot, from marking fields as required, to size limits, to ensuring emails look like emails. Here are the most common validations:

# Resources

We recommend using HTML5's built-in validation. It is very rich these days, and has good browser support.

# Required Attribute

This input type, when present, specifies that an input field must be filled out before submitting the form.

<input type="text" name="message" required>

# Email Attribute

This input type guarantees an email address is formatted correctly.

<input type="email" name="email">

# Number Attribute

This input type ensures a number with a range.

<input type="number" min="18" max="99" value="30" name="age">

# URL Attribute

This input type guarantees a URL is formatted correctly.

<input type="url" name="website">

# Length Attributes

With these attributes, you can limit the characters in a text input or textarea.

<input type="text" maxlength="10">

<textarea minlength="20"></textarea>

# Handling Checkboxes

You can easily handle the checkbox data on Getform. If you have a checkbox field on your form, simply add a hidden input field for "not selected" case and set its value to value="no". For the selected case, do the same with value="yes"

Sample form should look like this:





 
 


<form action="https://getform.io/f/{your-form-endpoint}" method="POST">
    <input type="email" name="email">
    // Checkbox handle
    <input type="hidden" name="subscribe" value="no">
    <input type="checkbox" name="subscribe" value="yes" checked>
    <button type="submit">Send</button>
</form>

# Handling Multiple Choice Fields

If you want to handle multiple choice fields in your HTML form, you can use array by adding [ ] to your name attributes.

Sample form should look like this:





 


<form action="https://getform.io/f/{your-form-endpoint}" method="POST">
    <input type="email" name="email">
    // Multiple values handle
    <input type="checkbox" name="books[]" >
    <button type="submit">Send</button>
</form>

TIP

You should give the same name to both of your checkbox fields' name attributes. Otherwise, your checkbox values won't be submitted correctly.

# Handling Drop Down List

The <select> element is used to create a drop-down list. Only the value(s) of the selected option(s) will be forwarded when your form is submitted.

# Single Option

<form action="https://getform.io/f/{your-form-endpoint}">
  <select name="static-site-generator">
    <option value="next">Next.js</option>
    <option value="hugo">Hugo</option>
    <option value="gatsby">Gatsby</option>
    <option value="jekyll">Jekyll</option>
  </select>
  <button type="submit">Submit</button>
</form>

# Multiple Option

You can also use the multiple attribute to specify whether multiple options can be selected at once when your form is submitted.

// Multiple options
<form action="https://getform.io/f/{your-form-endpoint}">
  <select name="favourite-platform" multiple>
    <option value="github">Github</option>
    <option value="gitlab">Gitlab</option>
    <option value="bitbucket">Bitbucket</option>
  </select>
  <button type="submit">Submit</button>
</form>

# Hidden Field

A hidden field lets you include data that cannot be seen or modified by users when a form is submitted.


 




<form action="https://getform.io/f/{your-form-endpoint}">
  <input type="hidden" name="hidden-field" value="hidden value" />
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</form>

# Submit in Different Tab

If you would like to redirect your submitters to another after they submit the forms, set the target attribute to _blank, then the form will be submitted in a new tab.

<form action="https://getform.io/f/{your-form-endpoint}" target="_blank">
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>

← Email Notification →