Web Programming Primer

Home

Back

Next

Sometimes you want to merely display information to the user, but a lot of times, you also need to collect information from the user, like on ebay or social network sites. To be able to do this, you must create "forms."

Username
Male Female

Select which effects you want:

Compresser Overdrive
Reverb Tremolo

Indiana South Carolina Alaska New York Texas

To utilize a form, type opening and ending "form" tags. In the opening tag, you should add at least 2 attributes:

• "type"--which should be set equal to "name"
• "name"--which should be set to whatever you want to identify that form as (such as "username").

There are a few additional attributes that can be used to customize your form:

• "size"--can be set to a number (such as "5") and will be that many + 1 characters long. This does not limit the input of more than that many characters, but limits the view to that many.
• "maxlength"--can be set to a number, and limits the amount of characters allowed to be input.
• "value"--can be set to a certain text, and will populate the box when loaded. (could say "type text here") OR it can be used for a default input

Sometimes, instead of the user inputing text, you want them to select from a list. To do this, we must utilize what is called a "radio button." So, instead of setting "type" equal to "text," set it equal to "radio."
make multiple forms for the different items on your list and give them all the same "name," so that it will group them all together, but give them all different values, such as "male" or "female."

If you want to be able to select more than one box, use "checkbox" instead of "radio." As like before, still put all the related items in the same "name."

If you have tons of options and don't want the page/form to be cluttered, you can use a drop down list. This is beneficial when it comes time for people to select which country they are from, what language they speak, etc. It allows you to have one element, with tons of options inside of it. To utilize the drop down selection, make opening and closing "select" tags. And inside those tags, list all of the different options inside of opening and closing "option" tags. Also, give the opening "select tag a "name" attribute. You should also give the opening "option" tag a "value" attribute (this is just for calling purposes).

If you want the user to enter a lot of text, such as a bio or something, use a "textarea" instead of regular "text" input. Just make opening and closing "textarea" tags and give it a name property inside the opening tag. Eneter any text you want to be in the box between the tags. To change the default height and width of the text box, give a "rows" or "cols" (which stands for columns) attribute and set it equal to a number.

This is example text.

Passwords--sometimes you might want to have a password for something. To have a form with a password function, use an "input" function, but for the type, type "password" instead of "text." This is useful because it hides the actual characters with bullets or astriks. Also, make sure to give it a "name" attribute (for javascript purposes).

to submit information to the website (such as username and password) to store in a database or make a user account or whatever, make an input tag and then give it a type "submit" a name and a "value" of whatever you want on the button.

Username: Password:

Now submit a file:

In many circumstances, you want the user to submit a file. To enable this, inside the form tags, make an input tag and make the "type" = "file". It also requires another attribute, "name," so that you can differ between multiple file types. To restrict the data amount limit aloud to upload, you must do that in JavaScript, you cannot restrict it in XHTML. Also, to be able to upload multiple files, you must give them multiple buttons.

You need an "action" property in all of you opening "form" tags. Action would equal the filename of whatever is going to be done with that data. You also need a "method" property. Method has two different options, "get" and "post". This determines how your browser sends the data to the "action". Always use "post"...it is more secure.