HTML Form
Ok this my first ever tutorial in my life!
Anyway you must be thinking what the heck is form? Form can be use to send information across the web, For example you register your acount in Solid Snake Design and you has to fill in the detail such as username, password, birthday, hide email or not then you press submit button and the infomation you has filled in are sent to your e-mail acount and you open it up and read the information you have filled in. It simple isn't it?
Open up notepad
Then copy and paste this:
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML Form </title> </head> <body bgcolor="#FFFFFF"> </body> </html>
Now between:
<body bgcolor="#FFFFFF">
I want you to type the opening tag for form
<form>
Once you done that You can choose of what to put in the form field
Here the form code:
For textbox:
Input type="text" />
For Password:
<input type="password" />
For Checkbox:
<input type="checkbox" /><
For Radio:
<input type="radio" />
For Upload File From your PC:
<input type="file" />
For Submit Button:
<input type="submit" />
Notice
If you do not want the button to say submit and want to put of what you want the button to say then do this
<input type="submit" value="Login" />
Notice You see it say
Value="login" />
That is the value where you can choose of what you want the button text to be For Button:
<input type="button" />
For Reset:
Input type="reset" />
For Hidden:
<input type="hidden" />
Notice
The input tag have no separate closing tag but it close it self using "/>" at the end.
For Textarea:
A textbox is a large box which require rows and cols attribute it look like this <textarea rows="5" cols="5">A textbox</textarea>
Last one
For Drop Down Menu:
This is very different from the other tag including the textarea To open the tag for dropdown menu use this tag
<select>
Then for the bit that will be in the box you will need to do this:
<option value="option 1">Mum</option> <option value="option 2">Dad</option> <option value="option 3">Sister</option> <option value="option 4">Brother</option>
To add more item then repeat this in number ordered:
<option value="option 5">Friends</option>
Now you see where i type mum, dad, sister, brother and friends? that is the text that going to appear in the box
Enough TAG! let put it in there form field
Again go to notepad and type this
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML Form </title> </head> <body bgcolor="#FFFFFF"> <form> <input type="text"/> <strong>Username</strong> </form> </body> </html>
and save it as Form.htm, then open it up and you get a clear display of what i'm talking about! So put any of them to see what it like
How to Use Form In A Appropriate Way
Now lot of people can make it look bad way and unexpected way so you gonna have learn how to use it So use the break tag to break the form in the line, it is the same as when you type a text. So try and make a registration fields like in Proboards for a good start So copy and paste this or code:
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML Form </title> </head> <body bgcolor="#FFFFFF"> <form> <input type="text" /> <strong>Username</strong><br /><br /> <input type="password /> <strong>Password<br /><br /> <input type="password /> <strong>Password Again</strong><br /><br /> <strong>Gender</strong> <input type="radio" /><strong>Male</strong><br /><br /> <input type="radio" /><strong>Female</strong><br /><br /> <input type="radio" /><strong>Keep Secret</strong><br /><br /> <strong>Age</strong><br /><br /> <select> <option value="option 1">13</option> <option value="option 2">Over 13</option> </select> <br /> <br /> <input type="submit" value="submit" /><br /><br /> <strong>thank you for registering At Metal Gear Solid Snake</strong> </form> </body> </html>
Phew after coding it! so save it and open it and you get a very clear image of how to use it in a Appropriate Way :smile: But it does send it to where you want to. If you want to learn how to send it then you will have to learn ASP or PHP I hope this tutorial help you people! Enjoy :) And do not RIP my tutorial
Art Group ~ Collection 17: Lyrical Life
Kai | Tommy Huynh | Britt | Tommy Huynh |
Comments
Post new comment