Field types

All of the things mentioned below are native to the browser and have nothing to do with FormBackend as such. It is just to give you an idea of what is possible with your HTML form.

<input type="text" name="first_name">

Placeholder

You can use the placeholder attribute to add a placeholder in the input field:

<input type="text" name="first_name" placeholder="John Doe">

Validations

Field types

The text input types below are supported by modern browsers and adds certain requirements to the input entered in the field. email for instance requires that the input is an email etc.

text

<input type="text" name="first_name">

email

Only accepts text that seem like emails (must include @)

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

url

Only accepts input starting with http:// or https://

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

number

Numbers only can set a min and max attribute as well

<input type="number" name="a_number">

tel

This uses the telephone number keyboard on smartphones

<input type="tel" name="phonenumber">

date

<input type="date" name="birthday">

Required fields

As with all the field types modern browsers also support required fields. This can be achieved by adding the required attribute to an input field.

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

If you want to add styling to required fields you can use css similar to this:

<style type="text/css">

  input:required:invalid, input:focus:invalid {
    /* use your own styles for invalid form input - example below has a red border*/
    border: 1px solid red;
  }

  input:required:valid {
    /* use your own styles for valid form input - example below has a green border*/
    border: 1px solid green;
  }

</style>