HTML Form Elements Tutorial

Introduction

An HTML form is used to collect user input, such as text, numbers, selections, etc. Form elements are used to create different input fields within a form. In this tutorial, we will cover some of the common HTML form elements and how to use them.

Text Input

The <input> element with type "text" is used to create a single-line text input field.

<input type="text" name="username" id="username">

Password Input

The <input> element with type "password" is used to create a password input field where the characters are masked.

<input type="password" name="password" id="password">

Checkbox

The <input> element with type "checkbox" is used to create a checkbox input field.

<input type="checkbox" name="subscribe" id="subscribe"> Subscribe to our newsletter

Radio Buttons

The <input> element with type "radio" is used to create a radio button input field. Radio buttons are used when only one option out of multiple options can be selected.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Select Dropdown

The <select> element is used to create a dropdown list of options for the user to select from.

<select name="country" id="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Text Area

The <textarea> element is used to create a multi-line text input field.

<textarea name="message" id="message" rows="4" cols="50"></textarea>

Submit Button

The <input> element with type "submit" is used to create a submit button for the form.

<input type="submit" value="Submit">

Example Form

Username:
Password:
Subscribe:	Subscribe to our newsletter
Gender:	Male Female
Country:	United States Canada United Kingdom
Message: