JaredRimer.info, web design done right, HTML form design page

About forms

Forms can have many different elements. They can have text boxes to enter data such as your name, address in various fields like address line 1, address line 2, etc. city, state, etc. for filling forms for contact information. They can have check boxes for checking multiple items like if you want print mailing, E-mail delivery, web delivery, etc. for a situation where you need to collect information like we do for MENVI. They can also have combo boxes where we've streamlined MENVI's check boxes in to something like check boxes, but have a print mailing as a choice, braille as a choice, print and braille as a choice, etc. and the recipient has to give you one option. You can do the same type of thing with radio buttons, where the radio button has to have the same name so that there are multiple choices. I played with that on MENVI as well. We also have text boxes which are allowing you to enter multiple lines of text called Text Area boxes. I use them here on this site to give you the code examples that we've used to date. I recently learned that it can be read only, but in most cases, it will be read and write for these boxes.

Other types of things you'll see on forms are buttons of all types. The buttons are to submit a form, reset a form and may be in an image or as a button by itself. It all depends on the web designer. I only know how to do the standard button, but image buttons are possible. Other types of buttons are radio buttons, and check boxes.

Setting up your forms

The first thing I should show you is how to set up your forms. The form tag is what is used to signify to a browser that you are about to do a form. The following code is based on the fact that I've set up a form with a script for processing called form mail. There are other methods for other development types such as Cold Fusion, but since i don't develop in that anymore, my knowledge of it isn't that great anymore, and I don't have active code I can give you.

The form tag in less than and greater than signs above show you that it is the beginning of the form. The action above tells the form where to go, which is this case is the CGI-bin directory to a file called formmail.pl and the method portion tells the browser what to do with all of this. The basic thing you need to find out from your provider is in this case if it excepts the example above, and if so, we can help you. If not, the provider can help you set up the form for the ir platform they support. The closing tag is the same as the opening, but a slash before form and thats it.

Text boxes

Text boxes for the most part are easy to do. There is an input type which you would use for all of these things such as text box, combo box, radio button, or multiline edit box. So, for a text box, you would write the following code to ge it to work.

There is a tag called the title tag which screen readers use to tell the blind individual what the sighted see on screen. Let me preface this by saying, that some sites need this, while others don't. It seems that when I code, my pages need it, and therefore I put it. So, Lets take the line from jaredrimer.net's contact form once again and show you what the print reader shows, and what the blind individual sees when tabbing in to this box on the contact page.

It is a good idea to put the line break (br) in like you see above so you can have another line for other fields. Otherwise, it is one long line of a form, which the browser may or may not format correctly, and trust me, I had these issues on my own pages. You can try to play with the title tag to see if it is necessary for your particular site, and situation.

When i contacted GW Micro in regards to why my pages weren't reading correctly when coding, they told me about the title tag, and pointed me to a reference to read up on it. Ever since, I've made all my forms this way. In the future, I plan to shorten what the blind hear in that title tag, from what the sighted see. For example: lets take this line where I ask for your phone number. While the phone number isn't required, I tell both parties to enter it in the format that is required for me to call, since I'm on the United States dialing system, and I need the country code, city code, and other information that I can use to dial the proper phone number.

Lets take the above line, and I'll possibly shorten it to show you that this could be done.

As you can see, we have a lot here that we can do. We've shortened it to be less verbose for the screen reader, but at the same time, it is clear for a sighted visitor. Blind visitors may by default put their number as 0044-246-7984 for a U.K. number for example, but when i see that, I don't know necessarily to drop the 0 when calling. Or I've seen 04403546879850 and when I dial that, I get an invalid number if I use a carrior that doesn't necessarily know how its dialed. Skype would figure it out, but other carriors where I have to dial by hand would give me an invalid number. This is why I try to make it match, but I can show you that it can be changed and I can do that if requested.

The most important thing you need to worry about while I show you examples of the different elements is that there is one element. That is the input type. The only difference this doesn't apply is the multiline edit box.

The radio buttons can be useful by having the input type being radio and the value matching each other. I don't know if I would do this with long lists of selections, but it is an option. I don't have any active radio buttons to show you how this is done, but if you search around, you can find one, or I can help you with one. The same applies for check boxes where the input type is checkbox.

The combo box is a little bit different. We have to put selections in to a list with a selection tag. Then all of the options in an option tag as shown below taken from MENVI's web site.

The first blank option tells the scripts that if it is selected to this option, and you require it, to give a message telling the user that this needs to be filled in with a selection, and you are returned to make a selection.

If you have any other questions, you can call me, write, or even find me on social networks like facebook and twitter. I think the basics of how things work is a start, and is a process that is done differently for each person.

Links

You may choose from the following links to continue.

  1. basic HTML
  2. forms
  3. Back to the home page if you're not there already
  4. Contact Jared Rimer through jaredrimer.net's contact form


Copyright 2011 - 2017
by Jared Rimer, all rights reserved. No portions of this web page may be reproduced without concent of Jared Rimer.