Return to the Mountain

Now that you have a good understanding of how to set up absolutely any form, let's see what we can put into it - the actual stuff that does all the hard work.

Here are the standard elements which you will often find in a form:

  • <input> (many different types avaialable here. We'll talk about it in a second)
  • <textarea>
  • <select>

That's about it. Just keep these 3 elements in mind and you'll do fine. If you ever used a web form, it might shock you that I listed only 3 elements. But that's how it goes. All those fields, buttons, checkboxes, dropdowns, etc are nothing but one of these 3 elements with different attributes applied to them.

Here is how pretty much any <input> element is set up:

 

<input type="" name="" value=""> 

(notice that that input tag does not have 
a closing tag - it's unpaired)
						

 

So we will now talk about these attributes.

The most common form element that you usually meet is the text field - a little box inside the form where you can type a word or two. That is called a textfield. To make the <input> element look and behave like a textfield all you need to do is assign the "text" property to its "type" attribute, like so:

 

<input type="text" name="" value="">		
						

 

Let's make sure this works. Type up a form just like you did in the forst form lesson, and insert the above <input> tag inside of a <fieldset> box:

 

<html>
   <head>
      <title>
         Return to the Mountain
      </title>      
   </head>
   
   
   
   <body>
      <form>
         <fieldset>
            <legend>This is the first Fieldset</legend>
            <input type="text" name="" value="">
         </fieldset>
         <fieldset>
            <legend>This is the second Fieldset</legend>

         </fieldset>

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

 

See how that works? Nothing to it. now we'll try a few other types of the input element. replace the "text" property with any of the following:

  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit

Is that cool, or what! I know you probably want to make a form with 20 radio buttons and 30 text fields right now, but I need your undivided attention for a few more minutes.

Labels and Other Attributes

You've prbably noticed that there is still no way for a user to know what he/she should be typing into the text field, or what clicking a radio button means. That's what labels are for. Technically you can get by without them. Try this:

 

First Name: <input type="text" name="" value=""><br>
Last Name: <input type="text" name="" value="">
						

 

while we're at it, I'll explain what the "name" and "value" attributes are for. The "name" attribute does just that - it gives a uniques name to this particular input element. It doesn't affect you in any way (that's why it looked great in a browser even with name=""), but the engineer's script needs to know where the data is coming from. So when you do this:

 

First Name: <input type="text" name="firstName" value="">
						

 

You are making sure that the human user knows that he/she must type his/her first name into the field, and the script (or program) collecting data from this form will know that what it got out of that field is supposed to be a "firstName". If this still doesn't make sense, don't worry about it. It's really up to your engineer to set it up since the "name" attribute really belongs to the realm of web development, no web design.

The "value" attribute specifies what should be displayed inside the field. If value="", the text field will be empty. But try this:

 

First Name: <input type="text" name="firstName" value="Sensei Mu">
						

 

Yes, as far as you are concerned, my friend, sensei Mu is my first name - yes - the whole thing. Also you can see how easy it is to trick a basic form into thinking that it is Sensei Mu who is filling it out, when in fact it could be you, any of my students, or even a spy from a rival ninja clan.

Back to our class. Seems everything is working prefectly well. We have this kind of setup going:

 

First Name: <input type="text" name="" value=""><br>
Last Name: <input type="text" name="" value="">
						

 

Doesn't seem there's anything wrong with this setup. But what about this:

 

First Name | Last Name><br>
<input type="text" name="" value=""><br>
<input type="text" name="" value="">
						

 

Copy and paste it into your form and check it out in your browser. A bit strange, but still makes sense, right?

Now imagine you are blind and you need to fill out a medical form online and there is nobody around to help you. Blind people use screen readers to navigate web pages and forms. You probably realize that the screen reader will read the following to the visitor:

"first name, "second name", input text field, input text field

How will the visitor know which text field is "first name" and which one is "last name"?

That's where labels come in. When you use labels instead of freeform text, you clearly associate a line of text with a particular input field. Here's what it looks like:

 

<label for="fName">First Name:<label>
<input type="text" name="firstName" id="fName">
						

 

As you can see, we use the for="fName" attribute and property in <label> to specify which field this label belongs to, while inside the <input> tag we use id="fName" to establish the connection between the <label> and <input> tags.

I strongly recommend using this format. It's a bit extra typing, but it keeps all the relationships clear and helps people with disabilities.

At the end of this lesson, we should probably take a look at a crucial element of any form. If you ever wondered what the "action" attribute of the form tag does, let me explain. The "action" is usually an external file (HTML or script file) or command, which gets called once the user clicks on the submit button.

Your typical submit button looks like this:

 

<input type="submit" name="submit" value="Submit">
						

 

You normally put it inside the form but outside any of your fieldset tags.

"But Sensei", you might say, "this standard button is so ugly!"

Isn't that the truth! Let's "fix" it. All we need to do is replace the standard button with our own image. Here is how you do it:

 

<input type="image" name="submit" src="images/submit_button.jpg">
						

 

I'm using images/submit_button.jpg path because I always keep my images in a separate folder. If you keep all your images in the same folder with your HTML files, then your code should probably look like this:

 

<input type="image" name="submit" src="submit_button.jpg">
						

 

I called the image for my submit button "submit_button.jpg" but you might give your image file any name you want.

Working with forms involves a lot of nuances. I simply don't have the time to go into all of them. But I explained the basics and you can do more research online to learn more about all the different tricks.

Kata Practice: go to www.w3schools.com and review all the information on the page. Follow the links at the bottom of the page to get additional information about the main form elements (input, textarea, select)

Next >>

 

Inside the Web Dojo

the HTML chamber