HTML Course

Learning about form input fields

Go back

This is most likely the kind of field you will use the most, as it can be transformed according to the value inside "type" (checkbox, radio, ...).

  • name: it's the name that will be used server-side to get the value of a field. Don't add one if you don't want the data of a field to be submitted.
  • type: that's the type of your field like
    • text
    • date
    • password
    • tel
    • range
    • checkbox
    • radio
    • number
  • placeholder: put a default value that will be removed when the user writes something
  • value: you can set a value

Examples

Description Code Preview
Text <input name="name" type="text" value="" placeholder="John Doe" />
Password
Show dots instead of the real value.
<input name="password" type="password" value="John Doe" />
Email
Check that we have at least "a@b.c".
<input name="password" type="email" value="" placeholder="john@doe.tld" />
Date <input name="date" type="date" />
Range <input name="range" type="range" />
Checkbox <input name="pp" type="checkbox" checked />
Radio Alice? <br>
<label for="yes">yes?</label>
<input name="alice" id="yes" name="yes" type="radio" />
<label for="no">no!</label>
<input name="alice" id="no" name="no" type="radio" />
Alice?