Table of Contents

HTML Form Elements

HTML form elements are used to capture user input. There are many different types of form elements such as the text box, check box, drop down, submit button, and much more.

Take a look at an example form with a few input elements below:

HTML Form Element Example

The form elements above are the most common used form elements. We will go into further detail on each of these form elements:

  1. Text Box Input
  2. Password Input
  3. Text Area
  4. Select Drop Down
  5. Check Box
  6. Radio Input
  7. File Input
  8. Submit Button

1. Text Box Input

The text box input is used to capture text such as a name, email, address, or any other type of text. To create an HTML text box we will use the input tag and specify that the type attribute to be text.

Take a look at how to create a text box in HTML:

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

Notice the name attribute. This is the name that will be sent to the server when the form is submitted, so our server side code would get this text box value by referencing the first_name form element.

Let's take another quick example of how a text box looks in HTML:

HTML Text Box Example

Notice we have text above the text box which says First Name, this is referred to as a label and is a way of describing what the user should input in the form element. A basic HTML label will look like the following:

<label for="first_name">First Name</label>

<label> tags are very common when using HTML forms. Notice the for attribute contains the value first_name this matches the name of your input. So since our input has a name of name="first_name" our label will have an attribute of for="first_name". Easy Peasy, right. Let's move on to the password input.

Password Input

The password input is essentially the same thing as the Text Box input; however, it does not show the text as the user types. Try it out in the example below:

HTML Password Input Example

And this is how you will create a password input:

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

Text Area

To create a Text Area where a large amount of text can be entered by the user we can use the <textarea> tag. Take a look at an example of how to create a Text Area in HTML:

<textarea name="comment"></textarea>

And a Text Area would look like the following:

HTML Text Area Example

Select Drop Down

A Drop Down is a specific list of options that a user can choose when selecting a Drop Down menu. To create a Select Dropdown in HTML you would represent this inside of <select></select> tags, then each option that you want to allow your user, you will specify with an <option></option> tag inside the select tags. Take a look at the following example:

<select name="weapon">
    <option value="throwing_stars">Throwing Stars</option>
    <option value="sword">Sword</option>
    <option value="staff">Staff</option>
</select>

And this will give you the following result:

HTML Select Drop Down Example

Check Box

A check box is exactly what it sounds like, it's a box that you can click and it can be checked or unchecked. When the check box is checked you are setting the check box to true. Otherwise if it is unchecked you are saying that it is false. Take a look at how we can create an HTML check box below:

<input type="checkbox" name="valid_ninja"> Are You a Ninja?

And the code above will give you the following result:

HTML Check Box Example

If we wanted to specify that the check box is checked we can use the checked attribute and set it to checked:

<input type="checkbox" name="valid_ninja" checked="checked"> Are You a Ninja?

And this will give us the following result:

HTML Checked Check Box Example

Radio Input

A radio select input allows a user a specific amount of options to select from. You can think of this like a multiple choice select. The user can only select one of the options. Take a look at how to create Radio Select Inputs in HTML:

<input type="radio" name="weapon" value="throwing_stars"> Throwing Stars<br>
<input type="radio" name="weapon" value="sword"> Sword<br>
<input type="radio" name="weapon" value="staff"> Staff<br>

And this will produce the following result:

HTML Radio Button Input

If you wish to have one of your radio buttons selected by default you can add a checked attribute to the element like so:

<input type="radio" name="weapon" value="sword" checked> Sword<br>

File Input

A File input is used to allow users to upload images or files. To create a File input element we will use the input element and give it a type of file like the following:

<input type="file" name="image">

This will give us the following results:

HTML File Input Example

When clicking on the Choose File button above the user will then be prompted with a window to specify which file they would like to upload.

Submit Button

Lastly we are going to need a way to submit our form with all the data. This is what the submit button is used for. In order to use the submit button we will use another input element with a type of submit:

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

And our Submit button will look like the following:

HTML Submit Button Example:

Whew! That's a lot of form element. But don't get overwhelmed they are all really easy to use and integrate. Allowing user input with forms is very common and it allows for our web site to provide more functionality for our user.

Note: there are many other form elements included in HTML5, but for now we just want to talk about the native form elements.

Next, let's move on to talking about a cool element called an iframe :)

Previous Section Next Section