in

Learn About HTML Forms and How To Design Them

In this tutorial we will be looking at how to structure HTML forms in our web document. In our previous tutorials, we looked at structuring HTML tables and we will be using similar ideas in creating beautiful forms on our web page.

Read previous tutorial on: Tutorial #20 Learn About HTML Fonts, How Create and to Use Them

What are HTML Forms?

These are forms designed using HTML on our web page and they are used to collect useful information from site visitors. For example a user registration form can be used to collect important information’s such as name, address, age, email, password, date of birth, credit card information, bank name etc.

The form collects information from the users and sends it to a backend application such as cgi or a script such as PHP for processing and storage. In creating a web form, we make use of the HTML form tag <form>. All other tags and attributes are placed inside and in between the opening and closing form tag. The basic syntax for a web form is shown below and we will be explaining the inbuilt attribute of this form element.

<form action = "url of Script " method = "GET or POST">
   section for other form elements and attributes
</form>

Basic Form Attributes

Here is the list of form attributes placed inside the form element

Attributes Description
method This refers to the method in which the received data will be uploaded e.g The get and post method types
Action This is the backend script for processing the data
Target This specifies where the result will be displayed
enctype This is used to specify to the browser how to encode the received data. Example include the application/x-www-form-urlencoded and the mutlipart/form-data

HTML Form Controls

There are different form controls that are used when collecting forms input data and they include:

  • Text input controls
  • Check Box controls
  • File selecting control
  • Submit and reset button controls
  • Hidden controls
  • Clickable controls
  • Radio box controls

Text input controls For HTML Forms

There are three types of text input controls depending on the type of text to be collected and they include

  • Single line text input control: This is used when the user is expected to input a short text that won’t take a second line
  • Multiline text input control: this is used when the user is expected to input a long text that can take a second line
  • Password input control: this is used when the user is expected to input a password therefore the characters are secured and won’t be visible.

Single line text input control For HTML Forms

This control is created using the <input> tag and it is used for areas that require names or for search box. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form input tag</title>
</head>
<body>

   <form>
      First name : <input  type="text" name="firstname" placeholder="first name" > <br>

      last name : <input  type="text"  name="lastname" placeholder="last name"  >





   </form>
   
</body>
</html>

Result on web browser

html forms

input attributes

The following are the attributes that can be placed inside the input tag.

Attribute Description
type This shows the type of input expected e.g text
name This gives the input a name
placeholder This gives an example or hint of the kind of input expected in the form box
size This is used to determine the size of the text input section
value This is used to provide an initial value in the form box
maxlenght This specifies the max amount of input characters that can be held in each form box

Password input control for HTML Forms

This control is created using the <input> tag and it is used for areas that require password. The type attribute is set to password. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form input tag</title>
</head>
<body>

   <form>
      log in name <input  type="text" name="loginname" placeholder="login name" > <br>

      Password <input  type="password"  name="password"  >





   </form>
   
</body>
</html>

Result on web browser

Illustration of form input tag
log in name :
Password :

Password input attribute

These are some of the attributes that can be used in the <input> tag for constructing the password control.

Attribute Description
name This gives the password a name and should be “password” and sends the data to the server for processing and result.
type This shows the type of input expected e.g password
placeholder Use to provide hint of what is expected in the password section
size This defines the size of the width of the password control
value Use to provide and initial value to the password control
maxlenght This defines the maximum amount of password characters allowed

Multi Line Text Input control

This control uses the <textarea> tag to inform the web browser on the kind of text expected. Example shown below

Example

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form multiline control </title>
</head>
<body>

   <form>
     Description <textarea   rows="4" cols="50" name="Text Description"           >


      </textarea>
      

   </form>
   
</body>
</html>

Result

Illustration of form multiline control

Description

Attributes for multline text input control

This is the list of attributes used inside the <textarea> tag for multiline text input control

Attributes Description
name This is used to name the text area and send result to the server for processing and result
placeholder This is used to give hint on the kind of information expected in the text area
rows This is used to give the number of row spaces expected
cols This is used to give the number of col spaces expected

Check Box controls

This is used when we have options to select from and they also make use of the <input> form tag with the type set to checkbox. example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form check box </title>
</head>
<body>

   <form>
      one <input type="checkbox"  name="one"         > <br>
      two <input type="checkbox"  name="two" > 


   </form>
   
</body>
</html>

RESULT

Illustration of form check box
one
two

Attributes for checkbox input control

This is the list of attributes used for the checkbox input control

Attributes Description
type This is used to assign the type of input e.g checkbox
name Use to assign a name to a check box and sends the result to the server for processing and result
value Used to assign a value to a check box
checked Can be used to check a box by default

Radio box control

This control is similar to the checkbox control but it requires only one option to be selected out of a list of options. it uses the input tag with the attribute type set to radio. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form radio box control </title>
</head>
<body>

   <form>
      one <input type="radio"  name="subject" value="number" > 
      two <input type="radio"  name="subject" value="number"> 


   </form>
   
</body>
</html>

Result

Illustration of form radio box control
one two

Radio input control attribute

These are the list of attributes that can be used for the radio input

Attributes Description
type This is used to assign the type of input e.g radio
name Use to assign a name to the control which is sent to the server for recognition
value Used to assign a value to the control
checked Can be used to select a box by default

File selecting control

This control is used to select an option from a drop down list of options. For this control we add a <select> and <option> tag in between the form tags as shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form file select control </title>
</head>
<body>

   <form>
      <select>
         <option value="maths" selected >one</option>
         <option value="maths" >two</option>
            

      </select>
       


   </form>
   
</body>
</html>

RESULT

Illustration of form file select control

File select control attributes

For the select tag

This is the list of attributes that work inside the select tag

Attributes Description
name This is used to assign a name to the control which is sent to the server
size This is used to present a scrolling list
multiple This can be used to select multiple items

For the option tag

This is the list of attributes that works inside the option tag

Attributes Description
value This is value that will be used when an option is selected and its sent to the backend
selected This is used to select an option by default
label This is an alternative way of labelling options

File Upload Box

The file upload box shows up an upload section that allows users upload files. it uses the input tag with the attribute type set to file. example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form file upload control </title>
</head>
<body>

   <form>
      
         <input   type="file" name="fileupload" accept="image/*"     >
            

      


   </form>
   
</body>
</html>

Illustration of form file upload control

Attributes used in the file upload control

This is the list of attributes used in the file upload control

Attributes Description
name This is used to name the control for recognition by the server and to get the right result
accept This tells the control the kind of file to accept

Submit and reset button controls

This is used to install submit and reset buttons to the Web page. There are different kinds of buttons we can have e.g submit buttons, reset buttons, image buttons, normal button. Here are the list of button attributes and their functions. Mind you this control also makes use of the input tag.

Attributes Description
submit this creates a button that submits a form
reset This creates a button that resets the form inputs
image This creates an image button
button This creates a button that triggers a function

Example

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form button control </title>
</head>
<body>

   <form>
         <input type = "submit" name = "submit" value = "Submit button" />
         <input type = "button" name = "ok" value = "confirmation" />
         <input type = "image" name = "imagebutton" src = "image source" />
         <input type = "reset" name = "reset"  value = "Reset button" />


   </form>
   
</body>
</html>

Result

Illustration of form button control

Hidden controls

This is used to hide a particular item on the web page which will not be visible on the web page but when a button is clicked, the information will be sent to the server for processing and result. For example a developer can decide to hide the page numbers of a web page but when the “next button” is clicked the “current page number” will be sent to the server and it will receive the information, process it and return the “next page number” as result. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Illustration of form   Hidden button control </title>
</head>
<body>

   <form>
         <p>This is page 44</p>
         <input type = "hidden" name = "pagenum" value = "44" />
         <input type = "submit" name = "submit" value = "Submit button" />
         <input type = "button" name = "ok" value = "confirmation" />
         


   </form>
   
</body>
</html>

Result

Illustration of form Hidden button control

This is page number 44

Conclusion

Now you understand the basics of HTML FORMS and you are really doing great. Lets move on to the next tutorial on EMBEDDING MULTIMEDIA IN HTML

What do you think?

html fonts

Learn About HTML Fonts, How Create and to Use Them

html multimedia

Learn How To Embed HTML Multimedia In Web Documents