Web Programming Primer

Sometimes you want to merely display information to the user, but other times, you also need to collect information from the user. To be able to do this, you must create "forms." To create a form, make "form" tags embedded in the body. Inside the form tags is where you can create all of your input fields. Look at the example below of the different types of input fields.

Username:
Male Female

Select which effects you want: Compresser Overdrive Reverb Tremolo

Choose your State: Indiana South Carolina Alaska New York Texas

To create a textbox, make an "input" tag and give it an attribute "type" with a value of "text." You can also give it a value property and set it equal to whatever you want the textbox to load saying. In the example above, the value of the textbox is "type here." Before the input tag, you can type whatever you want, such as "Username," and it will appear as regular text. Make sure to insert a forward slash at the end of your input tag, as shown below.

This looks like:

To create a choice between items (like male or female), you may want to use radio buttons. Create it in the same way, except, give the type attribute a value of "radio" and give all the radio buttons you want selected between an attribute "name" with equal values.

Like this:

Radio buttons will only allow you to select one of their group at a time, however, if you want a way to select multiple, you need to use checkboxes. To make a checkbox, create an input tag, but give it a type equal to "checkbox."

Like this:


If you have many many options, but desire only one answer (such as what state you live in), a drop down list works best. To create a drop down list, make opening and closing "select" tags. Embedded in the select tags, create sets of opening and closing "option" tags for each option you want to include. In between the option tags, type out the actual option that you wish to be in the menu.

It should look like this:




The "name" and "value" attributes in the above example are optional, they will be helpful later on. Lastly, we will cover buttons. To create a regular button, make an input tag and give it a type "button" and a value of whatever you want the button to say. To create a submit button, give it a type "submit."

The buttons look like this:

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.

A textarea is coded as so:


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