HTML5 – Input types and attributes

The <input> element is used to create form controls such as text fields, checkboxes, and buttons. In HTML5, the <input> element has a type attribute that specifies the type of control to display.

Here is a list of some common input types in HTML5:

  • text: a single-line text field
  • password: a single-line text field with obscured characters
  • radio: a radio button
  • checkbox: a checkbox
  • submit: a submit button
  • reset: a reset button

Here is an example of how to create a form with different input types in HTML5:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  <label for="newsletter">Sign up for newsletter</label><br>
  <input type="submit" value="Submit">
</form>

In this example, the form includes a text field for the name, a password field for the password, two radio buttons for the gender, a checkbox for signing up for a newsletter, and a submit button to submit the form.

The name attribute is used to identify the form control when the form is submitted. The value attribute specifies the default value of the form control. The id attribute is used to uniquely identify the form control, and is used in conjunction with the for attribute of the <label> element to associate the label with the <input>.