HTML: basic geekyness – Part 4


This is the last post about HTML I will make. It’s about forms. One of the more complex things in HTML.

If there is some interest I’m willing to write something about css and javascript as well. Just let me know.

Before continuing this post, be sure that you read Part 1, 2 and 3 or this all might get a little confusing.

Right! Forms! These types of objects are mostly used in combination with PHP or ASP or some other type of scripting, The basic functionality within HTML is rather.. well.. basic :P…
Let me first explain something before continuing. Yes, It is possible to fill up an e-mail with a form. You can create a form that allows the end user to fill in the subject, mail body, etc…

However, YOU CAN NOT send an e-mail via the HTML page. If you create a form which fills in an e-mail what will happen is that the e-mail won’t be sent but it will actually open the standard mail client available on the PC where the button of the form is clicked!
In other words, if you create an e-mail form and the end user you are trying to reach doesn’t have an e-mail client (like outlook, outlook express, firebird, etc) configured, they won’t be able to send the e-mail.

Just so you know… I wouldn’t want to dissappoint you.. Specially when you cared to struggle trough this post ;-).

For the code. It will look a little complex at first, but you’ll get the hang of it soon enough.

Following tags are used to define a form.
First of all the containertag FORM… (where do they keep getting it). The tags that belong with it are the complex part.
Within the form tag you have tags which will define your input fields. Named: Label… These tags define which type of input field it will be but also the NAME of the tag. Which is very important.

Let me explain with a small example. Take a look at following code example:
The form tag has an option action. This defines where the form should deliver it’s data. The second option is Method, this describes what the form should actually do. So in this case, my form will send an e-mail to my e-mail address.
Next I defined a container called SELECT (nested within FORM), this will create a drop down list. The can define the different options of the drop down list bij added OPTION container tags nested within SELECT.
So I added:
<OPTION>I love you some</OPTION>
<OPTION>I love you a lot</OPTION>
<OPTION>I cannot bare to live another moment without you Sharp!</OPTION>

There is one more thing I defined which is nested within the form tags.
<INPUT TYPE=”submit” value=”Send loveletter”>

This defines the button of your form. TYPE says what the button should do (submit in this case). And value is the text shown on the button.

Result:
Let me show you the code of a form with input fields.
You can see code which is very similar. Up until <FORM> everything is normal (just ignore the ENCTYPE for now).
What I did, is I added text and pasted a input box behind it. You can define an input box with the containertag INPUT nested within the form tags. The option type defined what type of input it should be. Name just defines a name and SIZE defined how many characters can be entered.
The tag TEXTAREA defines a large inputbox so to speak. It does the same thing, it can just hold more information.

I added 2 buttons to this form. 1 that submits and the other that resets (take a look at the TYPE).

Result:
Not too hard if you ask me. If you have an e-mail client open and you click the send button the mail will just be send. Else the mail client will open. If you don’t have an e-mail client. It won’t do anything, well perhaps give you a warning.
There are a lot of other possibilities with forms. Like adding radio buttons, check boxes, etc…

Let me know if you want more information!

Advertisements

3 thoughts on “HTML: basic geekyness – Part 4

  1. Pingback: CSS: The basics part 1 « Tech-o-rama

  2. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

  3. Pingback: Advanced webcoding: PHP – Part 1 « Tech-o-rama

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: