comment Add Comment
Posted on Last updated

HTML Forms

Hello, and welcome to this unit of our HTML course series called HTML Forms. HTML Forms are used to collect data from our websites to our server or to a specified email address. In this unit, we are looking at three sections.

  1. HTML Forms and Elements
  2. Text Fields
  3. Password Field
  4. Radio Button
  5. Check Boxes
  6. Submit Button

References:

Forms in HTML documents – W3C

HTML Forms and Elements

HTML Forms use the <form></form> tags. It also uses the <input/> tag (A single tag) as elements within the form tag. This is used to specify the type of element you want to be displayed in your form. The elements include the text fields, password field, radio button, check boxes and the submit button.

Text Fields

The text field as the name implies is used to allow the users on your site to type in texts such as their names, or usernames with a default width of 20 characters.

An example is given below:

<form>
Username: <input type="text" name="username"/>
</form>

Please note that the <input/> doesn’t have a separate opening and closing tags. The words type and name are the attributes used to define the type and name of the form elements respectively. The code above when wrapped in html tags would display the one below:

Username:

Password Field

The Password Field, similar to the text field follows the same syntax just that the input type is labelled password and the input name is labelled pwd, so here you go:

<form>
Password: <input type="password" name="pwd"/>
</form>

This form would look like this:

Password:

Radio Button

The radio button is an element that allows for choosing one option between more than one options. An example is done below:

<h4>Sex</h4>
<form>
<input type="radio" name="sex" value="male"/> Male
<input type="radio" name="sex" value="female"/> Female
</form>

The form above would look like this:

Sex

Male
Female

Please note that we added another attribute called value to define the category of input (sex in this case).

Check Boxes

Check Boxes just like Radio Buttons allow for choosing options between more than one options. The only difference is that, check boxes allow users to select more than one option unlike radio buttons. An example is given below:

<h4>My Favorite Football Teams</h4>
<form>
<input type="checkbox" name="team" value="man-u"/> Manchester United
<input type="checkbox" name="team" value="barca"/> Barcelona
<input type="checkbox" name="team" value="lipool"/> Liverpool
<input type="checkbox" name="team" value="real"/> Real Madrid
</form>

The form above would look like this:

My Favorite Football Teams

Manchester United
Barcelona
Liverpool
Real Madrid

Text Area

The text area is a text field like the Username and Password Fields. The only difference is that, you can enlarge the space for entering the text to any size you want; and this uses the <textarea></textarea> tags(separate opening and closing tags). An example is given below:

<h4>Your Message Here</h4>
<form>
<textarea name="Message" row="3"><textarea/>
</form>

You will notice that we used the row attribute in our form. This specifies the number of rows in our form. The form above would look like this:

Your Message Here

Submit Button

Our final element in the html forms is the button element. To be able to submit your contents (name, email, password, and text) to the server or site owner, you need the submit button to click to initiate that action. An example is given below:

<form action="action_page.php">
First name:
<input type="text" name="firstname" value="First Name">
Last name:
<input type="text" name="lastname" value="Last Name">
<input type="submit" value="Submit">
</form>

The form above will look like this:

First name:

Last name:
And now this brings us to our HTML Forms lesson. For more on HTML Forms, Read from W3Schools HTML Forms.

Leave a Reply

Your email address will not be published. Required fields are marked *