What html tags are used in creating forms

21 Apr 2019

The html tags used in creating forms online are <form> </form> tags pair. These 2 html tags are the container that holds other tags that create the form fields to be filled. The tags used together with the form tags are:

<label> </label>
<input>
<textarea> </textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>

That’s all the HTML tags you will need to create a form using HTML. However, I can show you how all of them are used below.

What are HTML forms anyway and how do they look like?

Html forms are everywhere. If you have ever filled, a sign-up, log in or a subscribe form online, then you have interacted with a HTML form. A HTML form is used to collect information online and submit/ give it to a server somewhere.

So how does a simple HTML form look like?

A basic HTML form should have the following format.

<form action="subscriber.php" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  <input type="submit" value="Subscribe!">
</form>

[[Image output of this form]]

This form has a place to write the email and a button to submit the data to the server.

You should have the form tags enclosing all the elements of the form. Inside, you should have the different input types that we will discuss below.

What is inside a HTML form?

Label </span>

Used to hold the text that tells the user the work of each particular input area. Eg. label for the first name, second name, email etc.

The label is identified with [for=”name-of-the-input-associated-with-it”] to associate it with a given input.

Example

<form>
  <label for=”firstname”>First Name</label>
  <input type=”text” name=”firstname”>
</form>

The input tag

The input tag is the most useful tag inside the form. There are many forms in which you can use them.

Input tags types

Text

Useful when you want the user to type a small piece of text that can fit on one line. Any kind of character is allowed including text, numbers, symbols and spaces.

<form>
  <label for="username">Username</label><br>
  <input type="text" name="username">
</form>

Number

Useful when you want the user to enter a number as input e.g. age, number of children etc.

<form>
  <input type="number" name="age">
</form>

Email

Same as the text above, but cannot accept space and must also have @ and . in that order, that emails usually have. If these conditions are not met, it usually displays some form of warning.

<form>
  <input type="email" name="email" id="email" required>
</form>

Password

Same as text input except that it can accept numbers, input and symbols. However, when you type in this input area, the password is hidden and displayed as dots or asterisks. This prevents others from peeping and seeing passwords.

<form>
  <label for="name">Password</label>
  <input type="password" name="password">
</form>

Checkboxes

When you want a user to select more than one option from a given set of options, checkboxes are used.

<form>
  <input type="checkbox" name="activity" value="swimmer">Swimmer<br>
  <input type="checkbox" name="activity" value="actor" checked>Actor<br>
</form>

Radio-buttons

When you want a user to select only one option from a given set of options, radio buttons are used.

<form>
  <input type="radio" name="activity" value="swimmer">Swimmer<br>
  <input type="radio" name="activity" value="actor" checked>Actor<br>
</form>

Submit

This gives the form a button that when clicked, it submits the data to the server. Every form needs a submit type input that will submit the data.

<form>
  <input type="submit" value="Subscribe!">
</form>

Textarea </span>

This proved the same as input type text but on a specified number of lines that you want. The rows specify the number of lines and cols define the number of characters per line.

<textarea rows="4" cols="30">
This is a text area that holds text on multiple number of lines. It can display text on 4 rows and can allow 30 characters per row.
</textarea>

Dropdown list `<select>`

This is a dropdown list that appears when clicked. once clicked, the input goes back to the original view.

<form>
    <select>
        <option value="mangoes">Mangoes</option>
        <option value="pineapples">Pineapples</option>
        <option value="bananas">Bananas</option>
        <option value="avocados">Avocados</option>
    </select>
</form>

Form action

This says where the form data will be sent when the submit button is pressed. It is URL of a file in that server. The URL can be absolute (http://www.) or relative (/forms/hope.php).

<form action="subscriber.php" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  <input type="submit" value="Subscribe!">
</form>

<form action="subscriber.php" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  <input type="submit" formaction="newSubsciberList.php" value="Subscribe!">
</form>

The url at <input type=”submit” formaction> formaction overides the default form action at the top.

Form method

This specifies the method by which you want the data to be sent. There are two methods.

The items to be sent appears on the URL which makes it less secure.

<form action="subscriber.php" method="get">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  <input type="submit" value="Subscribe!">
</form>

Post</span>

It is considered more secure and is the default method used when not specified.

<form action="subscriber.php" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  <input type="submit" value="Subscribe!">
</form>

Where do we use form tag in HTML?

Form tags are used where you have to submit user data to a server somewhere. If you need a form for subscribing to a newsletter, filling a questionnaire, login, sign up, etc. the form tags will get you there.

Why form tag is used in HTML?

Without form tags, user’s cannot submit the information that they have entered to a server in a normal form. However, there are technology tools that allow users to submit and interact with data without relying on the form tags.

Can we use form tag inside div tag?

Form tags can be used inside a div tag. In fact, form tags can be used anywhere inside the body tags(<body> </body>) of a HTML document. However, you should not put a form tag within another form tag.