HTML Forms

index<--

HTML 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. This of course require a back-end layer done with 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"

<html>
<body>
  <form name="test">
     <input type="button" onclick="alert('Hello World');" value="click me"/>
  </form>
</body>
</html>

Homework: You can open this example in codepen.io website: click here

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.

Design pattern:

<form action="/form_handler.php" method="post">
 ...
</form>

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).

1. <input> : is the most common element,
2. <label> : it is a read only widget that display a short text,
3. <textarea> : display/accept a large text on multiple lines,
4. <select> : drop-down selector widget for multiple options,
5. <button> : display a button same as <input type="button">,
6. <progress> : display progress bar represents a value that changes over time,
7. <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:

Widget Types

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.

<form id="form">
 <div>
 <label for="name">Name:</label>
 <input type="text" id="name" name="user_name">
 </div>
 <div>
 <label for="mail">E-mail:</label>
 <input type="email" id="mail" name="user_mail">
 </div>
 <div>
 <label for="msg">Message:</label>
 <textarea id="msg" name="user_message"></textarea>
 </div>
 <div class="button">
 <button type="submit"> send your message</button>
</div>
</form>

CSS Style:

The form above as well as all the forms in a website can be all styled once using one single CSS file. You have not yet learned CSS but in the next article you will. Here is the CSS file required to style the form above:

form {
/* Just to center the form on the page */
   margin: 0 auto;
   width: 400px;
/* To see the outline of the form */
   padding: 1em;
   border: 1px solid #CCC;
   border-radius: 1em;
}
form div + div {
   margin-top: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
   display: inline-block;
   width: 90px;
   text-align: right;
}
input, textarea {
/* To make sure that all text fields have the same font settings
   By default, textarea have a monospace font */
   font: 1em sans-serif;
/* To give the same size to all text fields */
   width: 300px;
   box-sizing: border-box;
/* To harmonize the look & feel of text field border */
   border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
   border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
   vertical-align: top;
/* To give enough room to type some text */
   height: 5em;
}
.button {
/* To position the buttons to the same position of the text fields */
   padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
   between the labels and their text fields */
   margin-left: .5em;
}

Test: You can test this form using codepen.io website 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:

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

Special tags

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

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

Example:

I have modified the form from previous example to use two elements and headers.

<form id="form">
   <section>
   <h2>personal info</h2>
   <div>
     <label>First name:</label>
     <input type="text" id="first_name" name="first_name"><br>
   </div>
   <div>
     <label>Last name:</label>
     <input type="text" id="last_name" name="last_name">
   </div>
 </section>
 <section>
   <h2>contact info</h2>
   <div>
     <label for="mail">E-mail:</label>
     <input type="email" id="mail" name="user_mail">
   </div>
   <div class="button">
      <button type="submit">submit</button>
   </div>
 <section>
</form>

Homework: Open this code using: Code Pen Form

Read next: Semantic HTML