Translated by Google Translate

HTML for Beginners, Knowing Forms (Web Design)




In the recent web design tutorial we have learnt first HTML How To Make Table and now we will learn about Forms in HTML. What is form?? Maybe you ever seen a form in real life, such at psycho test or collage registration. And for example look at a simple psycho test form below.
Picture 1. Registration Form
The registration form in picture 2 is use for collecting data from the registers. Same as picture 2 the form in website is use for collecting data that inputed from form. This is closely related with PHP and Database. So, because the function of form is use for inputing data then to create an HTML form we can use <input> tag.
<form>
input elements
</form>
In picture 2 there are option to identify the participant, like Mr., Mrs., or Ms. and the value for inputed is not charracter but check symbol. In HTML we can use checkboxes element. There are many elements in HTML form, the most common input types are described below :

Text Fields
Text Field is the most frequently used elements.
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
And this the HTML code above looks in browser:

First name:
Last name:

Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
And how it looks like in browser
Password:
The character in passfield are masked (shown as asterisks or circle)

Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="option" value="Yes">Yes<br>
<input type="radio" name="option" value="No">No
</form>
And how it looks like in browser
Yes
No
Checkboxes
<input type="checkbox"> Let a user choose more then on option.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
And how it looks like in browser
I have a bike
I have a car
Submit Button
Submit button is used to send data to the server, data sent to the specified form action
<form name="input" action="http://apps.webdev777.com/code/sentmail.php" method="get">Email: <input type="text" name="user"><input type="submit" value="Submit"></form>
How it looks like in browser
Email:

If you type your email in the field above and click "Submit" button, you will receive an email from herman@webdev777.com




 

©2013 @namakuherman | Developed by Herman Creative Industry