HTML Forms Inputs

HTML Inputs are used to collect information from the user.

<form action="landing_page.html" method="GET">
<input type="text" />
</form>

Do It Yourself

Text Inputs

HTML text inputs are used collect information from a user in plain text.
The user's input is always on a single line.

An example of text input is the one above.

Password Inputs

HTML password inputs are used to collect information from a user in an encoded form(hidden characters). The user's input will appear in form of circles or asterisks(*).
This type of input is used to collect sensitive information from the user, e.g(user's password).

See Example

<form action="landing_page.html" method="POST">
   Password:
   <input type="password"/>
</form>

Do It Yourself

Textarea Inputs

HTML textarea inputs are used to collect information from a user in plain text.but in a more descriptive way.
A user can enter a newline in textarea inputs.

See Example

<form action="landing_page.html" method="POST">
<textarea>
</textarea> 
</form>

Example

Select Menu Inputs

HTML select menu list allows a user to select an option from a list or group of options.

See Example

<form action="landing_page.html">
<select>
<option value="">Select</option>
<option value="Menu 1">Menu 1</option>
<option value="Menu 2">Menu 2</option> 
<option value="Menu 3">Menu 3</option> 
</select>
</form>

Do It Yourself

Radio Inputs

HTML radio inputs are used to a select an option from a radio group of options

See Example

<input type="radio" id="radio-input" value="male"/><label for="radio-input">Radio Label</label>

Example

Checkbox Inputs

A Checkbox is used to confirman action or a request.
This type of input is normally used when filling an HTML form.

See Example

<form action="landing_page.html"><input type="checkbox" name="agree" /></form>

Example

Basic Registration Form

This example creates a basic registration form with the form inputs we have learned above.

Basic Registration Form

What You Should Know at the End of This Lesson

  • You what HTML Inputs are.
  • You should know why, where, and how to use a password input.
  • You should be able to tell briefly what HTML Inputs are.