Creating HTML Forms

Unknown Data · 1 Creating HTML Forms Wed Jul 21, 2010 4:39 pm

Unknown Data

Registered Member

Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser : Safari

Creating HTML Forms
Working with HTML forms and its elements

This tutorial will learn you how to make forms, that can be used to collect and send information from your website.

As many other things in HTML, is it quiet easy to make a form. All we have to use is a couple of tags and attributes. This code would make a text area and a send button.

Code:: <form method="post" action="mailto:name@site.com"> <input type="text" name="body"> <input type="submit" value="Send"> </form>

This form will send a mail to name@site.com by reading further, we can learn how.

Let's take a look
You should always start you form with <form> and close it with </form>. In the tag we'll input some attributes (method and action), that will show us, what there is going to happen.

Code:: <form method="post" action="mailto:name@site.com">

The attribute method can have two values, "post" and "get". The difference is by using the "get", will the information be send in the URL, while the "post" will be send hidden for the user. The "get"-method will only could send limited information (depended on the browser), where the "post"-method can send unlimited information.

A form is actually nothing but some columns that can contain different information. The attribute action, is pointing on the program/script that should handle the information.

Fields
<input>, <select> and <textarea> is used to make fields in the form. I'll show you some descriptions of the types of fields.

Textbox:

Code:: <input type="text" value="content" name="a name" size="30">

The attribute type, indicates which type of field we use. Here is we using "text", which will give a one lined text area.
• With the value, can we chose a predetermined value - the text standing in the field before a user write something.
• The attribute name, is used to associate a name to some information there will be written in the field.
• The attribute size, indicates the length of the field.
• Notice that the tag <input>, will not be closed.

Textarea:

Code:: <textarea name="a name" rows="6" cols="20"> </textarea>

• The two attributes rows and cols indicate the height and width.
• <textarea> will be closed, unlike <input>.

Checkbox:

Code:: <input type="checkbox" name="check1" value="chosed"> <input type="checkbox" name="check2" value="chosed" checked="checked">

• The check boxes is fx smart to use, if we made a questionnaire etc. By inserting checked="checked" in one of the tags, would the check box be checked in advance.

Radio buttons:

Code:: <input type="radio" name="radio field" value="no1"> <input type="radio" name="radio field" value="no2" checked="checked">

• Besides being round can the radio buttons be used as check boxes, but it's only possible to chose on thing at the time (notice that radio buttons in same group should have the same name).

Drop-down menu:

Code:: <select size="1" name="menu"> <option>no. 1</option> <option selected="selected">no. 2</option> <option>no. 3</option> </select>

• Drop-down menus are smart if we wish many options in small space. It's unlimited how many options we can use.
• There should be using to tags to make a drop-down menu and both should be closed (<select> and <option>).
• If you wish a no. as the first chosen possibility, can we use this tag: selected="selected".

Password:

Code:: <input type="password" name="code" value="my password" size="10">

• It's the same as a text box, but the things written in the field would be hidden.

Hidden fields:

Code:: <input type="hidden" name="hidden" value="something secret stands here">

• These hidden fields can't users not see (unless they read your codes). The user don't got a way to change the information written in the hidden fields.

Buttons
Send/Submit:

Code:: <input type="submit" value="Send">

• By pressing this button, will the program/script be activated, that should handle this form (with the attribute action in <form>).

Reset:

Code:: <input type="reset" value="Reset">

• This Would delete all the typed information.

File:

Code:: <input type="file">

• By pressing the button, will a listing of your hard drive, show up. The field is used by browser-based upload of files, which requires a special component installed on your server.

WebArtz Online HTML Editor

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Last edited by Unknown Data on Thu Sep 23, 2010 12:07 am; edited 1 time in total

Faz · 2 Re: Creating HTML Forms Fri Aug 06, 2010 2:29 am

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

I can't seem to make this work. When i click the send button on my page, it doesn't do anything

here's my code:

Code:: <form method="post" action="mailto:sbofwnc@gmail.com"> <p>Name: <input type="text" name="body" /> </p> <p>Location New Western North Carolina: <input type="checkbox" name="check1" value="chosed" /> </p> <p><select size="1" name="menu"> <option>no. 1</option> <option selected="selected">I want to contact you about a new project</option> <option>I want to submit a question, or a comment about you.</option> </select> </p> <p>Content:</p> <p> <textarea name="a name" rows="10" cols="100"> </textarea> </p> <p> <input type="submit" value="Send" /> </p> </form>

RockerMan · 3 Re: Creating HTML Forms Fri Aug 06, 2010 6:18 am

RockerMan

Technician

Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser : Firefox

Try this one Wink

:

Code:: <form action="mailto@anyemail.com" method="POST" enctype="multipart/form-data" name="WebArtz"> Your Name:<br> <input type="text" size="20" name="Name"><br><br> Your Comment:<br> <textarea name="Comment" rows="4" cols="20"> </textarea><br><br> <input type="submit" value="Email This Form"> </form>

Faz · 4 Re: Creating HTML Forms Fri Aug 06, 2010 7:36 am

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

it doesnt work:

Page Not Found

The page you are looking for might
have been removed, had its name changed, or is temporarily unavailable.
Please try the following:

If you typed the page address in the Address bar, make sure that it is spelled correctly.
Click the Back button in your browser to try another link.
Use a search engine like Google to look for information on the Internet.

When i click send, it sends me to my websites URL, then it has a slash, and after the slash it shows my email

RockerMan · 5 Re: Creating HTML Forms Mon Aug 09, 2010 6:53 pm

RockerMan

Technician

Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser : Firefox

Have you checked your mailbox to see if the email is there?

C.noergaard · 6 Re: Creating HTML Forms Wed Sep 29, 2010 4:45 pm

C.noergaard

Registered Member

Posts : 103
Points : 0
Age : 26
Location : Ikast,Jylland,Denmark
Browser : Google Chrome

Nice you make a very good tutorial Very Happy

Sponsored content

Quick Menu

Quick Menu

1 Creating HTML Forms Wed Jul 21, 2010 4:39 pm

Unknown Data

2 Re: Creating HTML Forms Fri Aug 06, 2010 2:29 am

Faz

3 Re: Creating HTML Forms Fri Aug 06, 2010 6:18 am

RockerMan

4 Re: Creating HTML Forms Fri Aug 06, 2010 7:36 am

Faz

5 Re: Creating HTML Forms Mon Aug 09, 2010 6:53 pm

RockerMan

6 Re: Creating HTML Forms Wed Sep 29, 2010 4:45 pm

C.noergaard

7 Re: Creating HTML Forms

Sponsored content