Introduction to HTML forms - tutorial

Introduction to HTML forms – tutorial

ID-10046685
Hello world!
November 14, 2009
social_facebook_login
Contact Form for Facebook
November 18, 2009

Introduction to HTML forms – tutorial

ID-10097459

We thought it would be useful to create a short tutorial on HTML forms, because understanding how forms work will make you use them more efficient.

HTML forms are the best way to collect data from the visitors. With them, you can create a contact form, a survey, a \”send to a friend\” form, a newsletter subscribing form and much more. The forms require input from the visitors, like: Name, Email, Address, Message, Age, Ocupation… and so on, you get the point. The most common form elements are text fields, radio buttons, checkboxes, drop down lists and submit buttons. Before you define the form elements, you must define the form, using the <form> tag.

<form method=\”post\” action=\”mailto:yourname@yoursite.com\”>
………………………….
form elements
………………………….
</form>

In the code above, you can see the email address that is set to receive the form sumbissions. In the mid-1990s, when spam started to be a problem, the web developers had to find a way to hide the email address. So, nowadays, 99.9% of the forms use a script that actually sends the form submission:

<form method=\”post\” action=\”myscript.php\”>
………………………….
form elements
………………………….
</form>

Let\’s go back to the form elements, and explain them one by one. We will separate the form elements & text using the <br/> tag, which will put them one on a line.

Text fields are used when you want the user to type letters, numbers etc (for example, type their name, address, email).

Your name: <br/>
<input type=\”text\” name=\”yourname\” />

In the browser, this will become:

Your name:

Radio buttons are used when you want the user to select a choice from a fixed list of choices (for example, his sex: male of female)

Your sex:<br/>
<input type=\”radio\” name=\”yoursex\” value=\”male\” /> Male<br/>
<input type=\”radio\” name=\”yoursex\” value=\”female\” /> Female

In the browser, this will become:

Your sex: Male Female

Checkboxes are used when you want the user to select one or more choices (or even none!) from a fixed list of choices.

<input type=\”checkbox\” name=\”browser1\” value=\”Internet Explorer\”/> Using Internet Explorer<br/>
<input type=\”checkbox\” name=\”browser2\” value=\”Firefox\”/> Using Firefox<br/>
<input type=\”checkbox\” name=\”browser3\” value=\”Google Chrome\”/> Using Google Chrome<br/>

In the browser, this will become:

Using Internet Explorer Using Firefox Using Google Chrome

Drop down lists are quite similar to radio buttons, as you can select only one choice from a list of choices, but they are prefered in case of a high amount of options. If you want the user to select one of the 50 US states, using radio buttons would occupy a lot of space in the web page, while the dropdown ocuppies just one line.

How many children do you have? <br/>
<select name=\”children\”>
<option>None</option>
<option>One</option>
<option>Two</option>
<option>Three or more</option>
</select>

In the browser, this will become:

How many children do you have?

Submit buttons are used, of course, to submit the form 🙂 When the user is satisfied with what he filled the form, he clicks the submit button and the form is submitted.

<input type=\”submit\” value=\”Submit\” />

In the browser, this will become:

Ok, now let\’s put all these form elements together.

<form method=\”post\” action=\”myscript.php\”>

Your name: <br/>
<input type=\”text\” name=\”yourname\” /><br/>

Your sex:<br/>
<input type=\”radio\” name=\”yoursex\” value=\”male\” /> Male<br/>
<input type=\”radio\” name=\”yoursex\” value=\”female\” /> Female<br/>

<input type=\”checkbox\” name=\”browser1? value=\”Internet Explorer\”/> Using Internet Explorer<br/>
<input type=\”checkbox\” name=\”browser2? value=\”Firefox\”/> Using Firefox<br/>
<input type=\”checkbox\” name=\”browser3? value=\”Google Chrome\”/> Using Google Chrome<br/>

How many children do you have? <br/>
<select name=\”children\”>
<option>None</option>
<option>One</option>
<option>Two</option>
<option>Three or more</option>
</select><br/>

<input type=\”submit\” value=\”Submit\” />

</form>

The entire form code is saved here. The form looks like this:

\"\"

That\’s it, we created a simple form. The script that sends the email can be created with various programming languages, like PHP, ASP. You can learn HTML and those languages, but you have a simpler solution: use 123ContactForm, our Free Form Generator. Using it, you can create a wide variety of web forms, in a couple of minutes.

 

Featured image courtesy: freedigitalphotos.net

Alexandra Draghici
Alexandra Draghici
is the Project Manager of 123ContactForm. She tracks our project development and acts as a link between departments. Alexandra likes web technologies and teaching online and offline.

Leave a Reply

Your email address will not be published. Required fields are marked *