Menu Close

Articles

Introduction to Web Forms

Web Forms are also called HTML Forms. They allow users to enter data using a web site. Most of the time that data is sent to the web server, but the web page can also intercept data on its own. 

Note: Whatever method you use, server-side or client-side the form layout has the same design patterns. Learning this common pattern will enable you to understand better how to handle form data when you will learn your next computer language that may be JavaScript, Python, PHP or Ruby.

Form element

You know by now that HTML do not have anything else but elements also known as “tags”. Form elements are contained in <form> tags similar to a paragraph a <table>. The form can have a name attribute and is usually included in a division <div> element.

Example:

This form has a button that you can click. If you do, a dialog will display “Hello World”

Notes: 

  • a document can contain multiple forms,
  • a form element can have attributes,
  • each form can be identified by name or id attributes,
  • form handler is specified using action attribute,
  • a form can contain one or multiple “form widgets”.

Data handling:

Form element needs additional two attributes to establish the form behavior:

  • method can be “get” or “post”,
  • action can be a relative URL or function name.

Pattern:

Note: You will learn how to create the form handler in PHP programming tutorial.

Form widgets

A form can contain one or more “form widgets”. These are different form elements that have a specific representation and behavior. Some widgets accept input text from keyboard, other items are design for mouse click and can be selected with the keyboard (tab, space and enter key).

  • <input> : is the most common element,
  • <label>  : it is a read only widget that display a short text,
  • <textarea> : display/accept a large text on multiple lines,
  • <select>   : drop-down selector widget for multiple options,
  • <button> : display a button same as <input type=”button”>,
  • <progress> : display progress bar represents a value that changes over time,
  • <meter> : similar to a progress bar except that color is changing depending on current value.

The input can be of a particular “type” that will change display representation and actions that are possible. I will walk you through each type with form examples. The most common types are:

  • type=”text” : normal text, 
  • type=”number”: accept a number,
  • type=”password”: hidden text by bullets or stars,
  • type=”email”: accept e-mail address,
  • type=”url”: accept url string,
  • type=”checkbox”: a list of alternative options represented as little squares,
  • type=”radio”: a list of alternative options represented as round circles,
  • type=”range”: display horizontal bar and a slider button you can drag with the mouse,
  • type=”submit” : submit button,
  • type=”reset”: reset button

Styling a form

This example display a simple form that is styled with CSS. 

CSS:

Test: You can test this form using “codepen.io” that I have created for this purpose. If you have a user, you can fork this pen and make modifications on it than save it on your own account: open pen form

Organize a form

Sometimes a website is all about smart input forms. Making HTML forms is not a drag and drop job. It require serious programming effort. Having the basic knowledge helps for a simple registration forms but is far from a professional design.

Notes:

Following principles will help you stay on the good side:

  • a form is always starting with <form> tag,
  • you can not create a form inside another form,
  • you can not use form widgets outside of a form.

Common tags:

Inside form you can use common HTML tags to organize the form elements:

  • <section> : a section is a group of HTML elements,
  • <h1><h2>: usually a section has a header,
  • <p> : after header a section can have a paragraph,
  • <div>: sometimes the content is divided into parts.

Special tags:

To organize form elements, you can use some special tags:

  • <fieldset> : a group of related widgets,
  • <legend> : a text that explain the fieldset,
  • <label> : a text that explain every widget.

Example:

Note: I have modified the form from previous example to use two <section> elements and headers. You can also open this code using: code pen

 

Next: Data Validation.