How to Create a Basic HTML Form

Basic HTML Form Structure

HTML forms start with the ​form​ element which supports some specific attributes to configure the way the form behaves such as the ​action​ and​ ​method​ attributes.

• The ​action​ attribute defines the location of where the data should be sent(url address).
• The ​method​ attribute defines which HTTP method (POST or GET) to send the data.

The ​form​ element is a container that holds all of the input elements. The most common input elements are:

1. Text Fields
   • Text Box – Single Line
   • Text area – Multi Line
2. Selection Options
   • Radio Buttons
   • Check Boxes
   • Drop Down Boxes
3. Submit Button

Text Fields

There are two types of text fields.

1. One line text boxes
2. Multi line text areas.

One Line Text Boxes

The ​input​ element is used to capture text e.g name, email, password, etc. Here is the code for a one line text box that asks for the user to input their first name.

Type​ and ​Name​ Attribute:
The ​type​ attribute decides which type of ​input element to display. The ​name attribute references elements in JavaScript or the form data after submission.

Example 1: Displays Email

Script

Browser

Data Returned:
date: xx/xx/20xx ← ​Returned Value

Example 2: Displays Date

Size​ and ​Placeholder​ Attribute
The ​size​ attribute specifies the length of the box on your page. The ​placeholder attribute provides a hint of the expected value.

Script

Browser

Multi Line Text Area

This box allows for multiple lines of text to be entered such as comments or address. Text areas don’t have input type= “” , instead they use the textarea tag. You can specify the size of your text area by setting the ​cols​ and ​rows​ attributes.

Script

Browser

Selection Options

There are several types of selections to give the user a choice of options. Radio buttons, drop-downs, and check boxes.

Browser

Drop downs give the user a list of options in which they can choose by selecting the dropdown menu. Use the ​select tag to give the user a specific list of options. Use the ​option​ tag inside of the ​select​ tag to give the user a specific list of options.

Script

Browser

Checkboxes

Allows for the user to check a box setting it to true or unchecking a box setting it to false. Use the ​input tag with the ​type​ attribute set to “checkbox”.

Script

Browser

Submit Button

After filling in all of the data you will need a way to submit the form. You guessed it, the submit button. To make a submit button use the ​input tag with ​type​ attribute of “submit”.

Script

Browser

Putting it all together to create a simple HTML form

Script

Browser