Bridge to the Golden Temple

Forms seems to be the least favorite aspect of web design for most artistically-minded people. However, forms are very important as they are what keeps web designers in business. Forms provide a way for a business to communicate with a visitor, be it asking the visitor questions to collect valuable business data or get paid for the services or products offered on the website.

On the other hand forms are the bridge between the art of web design and the science of web development. If you are working on forms, you will most likely find yourself working with engineers. Solid knowledge of purpose and execution of forms will give you almost full understanding what the engineers are trying to accomplish. When I say "almost", I'm really implying that nobody truly understands what they do, but they get paid well, so they must be doing something important, right?

Let's get down to business.

Forms have several elements. Using the box metaphore, we can imagine that a form is a box. the <form> "box" usually goes straight into a <div> box (since pretty much anything can go into a <div> box) or into the <body> box. Sticking a form into any other box (<p>, <ul>, etc is usually not a good idea). If you do put a form inside of any other tag except for <body> or <div> and run a validator on your html file, you will most likely be alerted of an error for an XHTML file - we'll talk about that in the XHTML lesson. You will probably get away with it in regular HTML, since almost anything goes with HTML.(INSERT IMAGE HERE)

If you are wondering what a <div> box is - stop wondering! We have all the tools we need, as well as the knowledge and courage. Let's see the <div> tag in action:

 

<html>
   <head>
      <title>
         Bridge to the Golden Temple
      </title>		
   </head>
	
   <body>
      <div>
         <h1>Historical garb, technique, and image</h1>
			
         <p>
            There is no evidence that historical ninja limited themselves to 
            all-black suits. Some cloaks may have been reversible: dark colored 
            on the outside for concealment during the night, and white colored 
            on the inside for concealment in the snow. Some ninja may have worn 
            the same armor or clothing as samurai or Japanese peasants.
         </p>
      </div>
   </body>
</html>
					

 

Doesn't look like anything special, does it? <div> is a "structural" container - without CSS it is "invisible". Once we get into CSS, though, you will see why it is one of the most important elements of web design. So for now, just pretend that what I'm saying makes sense and follow along.

Now let's open up the <form> box and see what's inside.

Usually the first thing you will see, will be all kinds of strange smaller boxes. But if you want to follow good form, the only thing you should put into a <form> box is one or more <fieldset> boxes. (INSERT IMAGE HERE)

When rendered by your browser the <fieldset> is represented by a box around your form elements. It is used to visually separate a single form into smaller sections. The <fieldset> tag does not affect how the form works in any way

First thing inside a <fieldset>, is usually a <legend>. So it's good to think of them as an inseparable pair. When you set up a <fieldset>, next thing you always do is write a <legend> tag. here's how it looks.

1. Set up the form

 

<html>
   <head>
      <title>
         Bridge to the Golden Temple
      </title>      
   </head>
   
   
   
   <body>
   
      <form>
      
      </form>
      
   </body>
</html>
            

 

2. Set up the fieldset

 

<html>
   <head>
      <title>
         Bridge to the Golden Temple
      </title>      
   </head>
   
   
   
   <body>
   
      <form>
         <fieldset>
         
         </fieldset>
      </form>
      
   </body>
</html>
				

 

3. Now the <legend>

 

<html>
   <head>
      <title>
         Bridge to the Golden Temple
      </title>      
   </head>
   
   
   
   <body>
   
      <form>
         <fieldset>
            <legend>This is the first Fieldset</legend>
            
         </fieldset>
      </form>
      
   </body>
</html>
					

 

Later on I will show you how to hide your fieldset from the viewer using CSS. For now, if you don't want the fieldsets to be visible you will probably need to remove the <fieldset> and the <legend> blocks, since removing them is much easier than hiding without CSS.

 

Kata Practice: Copy/paste step 3 into an html file and look at it in your browser. Now change the text between the <legend> tags. Write whatever you want and see what it does. Now remove the <legend> tags completely and observe the effect. Now remove the <fieldset> tags and see what happens.

You can have as many fieldsets as you want inside a form - it's up to you. Here's what a form with 2 fieldsets looks like:

 

<html>
   <head>
      <title>
         Bridge to the Golden Temple
      </title>      
   </head>
   
   
   
   <body>
   
      <form>
         <fieldset>
            <legend>This is the first Fieldset</legend>
            
         </fieldset>
         <fieldset>
            <legend>This is the Second Fieldset</legend>
            
         </fieldset>

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

 

Let's go back to the actual <form> tag for a second.

The <form> tag usually requires several attributes to make it a valid and useful element. A form usually needs a "name" attribute, a "method" attribute and an "action" attribute. So this is what a basic functional form tag should look like:

 

<form name="someFormName" method="GET_or_POST" 
   action="usually_some_filename_goes_here">

</form>
					

 

Those with an inquisitive mind will ask, well what should I put instead of "someFormName", "GET_or_POST", "usually_some_filename_goes_here"? My advice - ask the programmer you are working with. If you are setting up a form in HTML and don't know who else will be working on it, leave these properties blank (i.e. name="" method="" action=""). There's no way to tell how the web developer will want to implement your form, so let him/her deal with it. Our job is to make sure all the elements are in place and show up in the browser according to the design.

Kata Practice: set up a form inside a <div> box. The form should contain 4 fieldsets, each with it's own legend.

Next >>

 

Inside the Web Dojo

the HTML chamber