Wednesday, September 28, 2011

Crazyp01's Daily HTML Lessons

Here at HTML Penguin. We do also give lessons on HTML, (which we really haven't done yet) by me. Today, I will give my FIRST lesson ever! This week we will focus on forms! Lets look at an example:

First name:

Last name:






You are probably wondering, "How do I do that?". As most of you know, most forms are made using a simple program like If you have used that program, it will require a watermark. Why not spend your time coding the forms SO easily! Lets get started!

1. Start of with the <html> tag. It will not accept without this tag.
2. Put in the <body> tag. Same thing as before :)
3. For the form to be in action, put the <form action=""> tag.

So far, this is what it should look like:


<form action="">
4. Look at these links for examples:

Create text fields
Create password field
Radio buttons
Simple drop-down list
Drop-down list with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border around form-data
Form with text fields and a submit button
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send e-mail from a form

I hope you find these links somewhat helpful. If you do not know how the form goes to you please comment below. I am happy to help you. If you would like to have the code for the form above here it is:

<form action="">
First name: <input name="firstname" type="text" />

Last name:<input name="lastname" type="text" />

Password: <input name="password" type="password" />

<input name="" type="checkbox" value="" /> Something1

<input name="" type="checkbox" value="" /> Something2

<input name="" type="radio" value="male" /> Boy

<input name="" type="radio" value="female" /> Girl

<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

<input type="button" value="Submit" />


<H1> Do not edit the code. It is considered, BOTH vandalism and plagiarism, because you are editing and "destroying" the code and copying, etc) <H1/>

<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="62" src="" width="320" /></a></div>

No comments:

Post a Comment