In this lesson, you’ll learn:

How to create text, radio, and checkbox inputs
How to add labels and sample text to your inputs
How to add submit and reset buttons

With just a few HTML tags, you can create an interactive form to get input from visitors to your website. This may be something like a contact form or sign up form.

Form Basics

All forms in HTML are surrounded by the <form> tag. This defines the beginning and end of the form.

Forms take two attributes: action and method. The action attribute links to a PHP file that tells the server what to do with the form (not covered in this tutorial). The method is either GET or POST and tells the browser how to send the form data to the server (again, not covered in this tutorial). For practice with HTML, you can leave these blank.

<form action="" method="">
    <!-- Form elements go here -->
</form>

Adding Text Fields

The most common type of form input is the plain text field. This is an <input> element with a type attribute that has a value of text. An input element is self-closing, so it doesn’t need a closing tag.

<input type="text">

Code:

type=codeblock|id=html_css_snippet_11_1|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <input type="text">
  </form>
</body>
</html>

Result:

Another type of text field is a <textarea> element. This is a resizable text box that gives the user more space to type. The textarea element takes two attributes, rows and cols, that determine the height and width of the text box.

<textarea rows="4" cols="50">
    This is a basic textarea with text already inside the text box.
</textarea>

Code:

type=codeblock|id=html_css_snippet_11_2|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <textarea rows="4" cols="50">
      This is a basic textarea with text already inside the text box.
    </textarea>
  </form>
</body>
</html>

Multiple-Choice Inputs

You can create radio buttons, checkboxes, or drop-downs that allow a user to select one or more choices from an existing list of options.

To add a set of radio buttons, you use the <input> element with a type of radio. You must also define the name and value properties.

To make a group of radio buttons, give them all the same name. You can write anything in the value property, but it will be sent to the server as the answer that was chosen.

<input type="radio" name="options" value="1">
<input type="radio" name="options" value="2">

Code:

type=codeblock|id=html_css_snippet_11_3|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <input type="radio" name="options" value="1">
    <input type="radio" name="options" value="2">
  </form>
</body>
</html>

Result:

The user can choose either option 1 or 2. (We haven’t added a text label to the buttons, but you will learn how to do that later in this tutorial.)

If you want to make one of the options selected by default, add the attribute checked (this attribute needs no value).

<input type="radio" name="options" value="1" checked>
<input type="radio" name="options" value="2">

Code:

type=codeblock|id=html_css_snippet_11_4|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <input type="radio" name="options" value="1" checked>
    <input type="radio" name="options" value="2">
  </form>
</body>
</html>

Result:

The checkbox input is similar to the radio input, except that it has a type of checkbox instead of radio. Use checkboxes when multiple options can be selected. Use radio buttons when only one option in the list should be selected.

<input type="checkbox" name="options" value="1" checked>
<input type="checkbox" name="options" value="2">

Code:

type=codeblock|id=html_css_snippet_11_5|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <input type="checkbox" name="options" value="1" checked>
    <input type="checkbox" name="options" value="2">
  </form>
</body>
</html>

To create a drop-down menu, you will use the <select> element. To add an item to the drop-down menu, add an <option> element directly inside the <select>. Each <option> should have a value property, too.

<select> 
  <option value="1">First option</option>
  <option value="2">Second option</option>
  <option value="3">Third option</option>
</select>

Code:

type=codeblock|id=html_css_snippet_11_6|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <select> 
      <option value="1">First option</option>
      <option value="2">Second option</option>
      <option value="3">Third option</option>
    </select>
  </form>
</body>
</html>

Result:

By default, the first <option> element will be automatically selected when the page loads.

If you’d like to change the default option, add the selected attribute (with no value) to the <option> element.

<select>   
  <option value="1">First option</option>
  <option value="2">Second option</option>
  <option value="3" selected>Third option</option>
</select>

Code:

type=codeblock|id=html_css_snippet_11_7|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <select> 
      <option value="1">First option</option>
      <option value="2">Second option</option>
      <option value="3" selected>Third option</option>
    </select>
  </form>
</body>
</html>

Result:

If you want to make it possible for the user to select more than one option in a dropdown, simply add the multiple attribute (with no value) to the <select> element.

<select multiple> 
  <option value="1">First option</option>
  <option value="2">Second option</option>
  <option value="3">Third option</option>
</select>

Code:

type=codeblock|id=html_css_snippet_11_8|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <select multiple> 
      <option value="1">First option</option>
      <option value="2">Second option</option>
      <option value="3">Third option</option>
    </select>
  </form>
</body>
</html>

Adding Buttons

Adding buttons to forms is also quite easy. There are two ways to add buttons.

The first is by adding an input field with a type of submit, reset, or button. Each of these takes a value attribute that specifies the text that will display on the button.

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

A submit button submits the form when you press it.

<input type="reset" value="Reset">

A reset button clears out a form and deletes all of the input when you press it.

<input type="button" value="Click me">

A plain button has no specific functionality, but can be customized using Javascript. You can play with these here:

type=codeblock|id=html_css_snippet_11_9|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    <input type="button" value="Click me">
  </form>
</body>
</html>

These buttons are useful, but you can’t add any icons or images inside of them. They can only text text from the value attribute.

This is where the <button> element, a more popular option for form buttons, comes in handy.

Buttons have the same types as inputs, but they can have html, text, images, and icons inside of them.

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click me!</button>

Code:

type=codeblock|id=html_css_snippet_11_10|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button">Click me!</button>
  </form>
</body>
</html>

Result:

Adding File Inputs

Another popular type of input is a file upload button. This button opens a dialog window where the user can choose a file to upload. When he or she clicks the submit button, the file will be sent to your server.

<input type="file">

Code:

type=codeblock|id=html_css_snippet_11_11|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <input type="file">
  </form>
</body>
</html>

Result:

You can also add the multiple attribute to allow users to upload more than one file at a time.

<input type="file" multiple>

Adding Hidden Inputs

Hidden inputs are slightly confusing, because they’re invisible to the user. These are fairly advanced inputs and are used to pass secret information to the server that you don’t want the user to see. The secret information is stored in the name and value attributes. You will probably not use these as a beginner, but it’s important to know that they exist.

<input type="hidden" name="whatilike" value="cats">

Adding Form Labels

Of course, simply adding form inputs to your page won’t help anyone! You’ll need to include an easy-to-read label on each input that tells the user what to input.

A label element is fairly simple, and can take a for attribute whose value is the ID of an input field.

<label for="name">Name</label>
<input type="text" id="name">

Code:

type=codeblock|id=html_css_snippet_11_12|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <label for="name">Name</label>
    <input type="text" id="name">
  </form>
</body>
</html>

Result:

Or, to make the label clickable, simply place the entire <input> element inside of the <label> element.

<label>
  <input type="radio" name="favorite_pet" value="cats" checked> Cats
</label>
<label>
  <input type="radio" name="favorite_pet" value="dogs"> Dogs
</label>

Code:

type=codeblock|id=html_css_snippet_11_13|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <label>
      <input type="radio" name="favorite_pet" value="cats" checked> Cats
    </label>
    <label>
      <input type="radio" name="favorite_pet" value="dogs"> Dogs
    </label>
  </form>
</body>
</html>

Result:

In this case, clicking the label name will also select the radio button.

You can add labels for any kind of form input.

Grouping Form Inputs

You can group inputs together with the <fieldset> element. This element helps to break up a long form into more manageable chunks. To add a title to your fieldset, add the <legend> element.

<fieldset>
  <legend>Your Info</legend>
  <label>
       First Name 
       <input type="text">
   </label>
  <label>
       Last Name 
       <input type="text">
   </label>
</fieldset>

Code:

type=codeblock|id=html_css_snippet_11_14|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <fieldset>
      <legend>Your Info</legend>
      <label>
           First Name 
           <input type="text">
       </label>
      <label>
           Last Name 
           <input type="text">
      </label>
    </fieldset>
  </form>
</body>
</html>

Result:

Adding Placeholder Text

For any text-based input, you can add placeholder text to give the user hints about what they should write. You can add this by using the placeholder attribute.

<label>
    Your Name 
    <input type="text" placeholder="John Smith">
</label>

Code:

type=codeblock|id=html_css_snippet_11_15|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <label>
      Your Name 
      <input type="text" placeholder="John Smith">
    </label>
  </form>
</body>
</html>

Result:

This text disappears once the user has entered text.

Making an Input Required

You can force the user to fill out parts of your form by making some of the inputs required.

<label>
  Phone Number
  <input type="text" placeholder="+1 999 555 5555" required>
</label>

Code:

type=codeblock|id=html_css_snippet_11_16|autocreate=htmlcss
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="">
    <!-- Form elements go here -->
    <label>
      Phone Number
      <input type="text" placeholder="+1 999 555 5555" required>
    </label>
  </form>
</body>
</html>

Result:

More Input Types

Recently, more input types have become available, such as the calendar input type, color input type, and more. You can read about the other available inputs at W3Schools: HTML input type Attribute.

Now you can create snazzy forms that help you get input from your users. Go to the next lesson to learn the final piece of basic HTML: how to create tables!