7. HTML Forms

(Approximate Time: ~ 1 hours)

Key Terms

  • Form
  • Input
  • Text
  • Radio Buttons
  • Checkboxes
  • Submit
  • Select Lists
  • Textarea
  • Form Action
  • Form Method
HTML Forms

HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites.

A HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from preset options.

In HTML, a form is defined using the <form> opening tag and the </form> closing tag. The actual form elements are defined between these two tags.

For example:

The <input> Tag

This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes, etc.

 

Text

text fields are used when you want the user to type short amounts of text into the form.

For example:

This repl.it shows the rendered results of the above code:

 

Radio Buttons

radio buttons are used when you want the users to select only one option from a pre-determined set of options.

Note that the users can select only one option. If they click on another option, the new option will be selected and the first option will be deselected.

If you want your users to be able to make multiple selections, use checkboxes instead (more on that later on in this lesson).

Here is the code for adding radio buttons to your form:

This repl.it shows the rendered results of the above code:

 

Checkboxes

Checkboxes are similar to radio buttons, but they enable your users to make multiple selections.

This is the code for adding checkboxes to your form:

This repl.it shows the rendered results of the above code:

 

Submit

The submit button allows the user to actually submit the form.

This is the code for adding a submit function to your form:

This repl.it shows the rendered results of the above code:

 

Select Lists

A select list is a dropdown list with options. This allows users to select one option from a list of pre-defined options.

The select list is created using the <select> tag in conjunction with the <option> tag.

This is the code for adding a select list to your form:

This repl.it shows the rendered results of the above code:

 

Textarea

You can use the <textarea> element to enable users to enter larger blocks of text than with the <input> tag.

It’s often a good idea to use the maxlength attribute to restrict the user’s input to a certain number of characters. You can also use the cols and rows attributes to adjust the width and height of a text input field.

This is the code for adding a textarea to your form:

This repl.it shows the rendered results of the above code: