HTML forms

Forms basically comprise of two important part the form taking the input from the user and the other part , also known as the action part that handles your data to use in any way the website wishes to use. Lets first go through the form elements , ignoring the action part of the form.

In normal forms, we basically have text input fields(inserting name), select buttons(selecting gender), dropdown menus (adding city/state) , checkbox(remember me), submit button, reset button(reseting fields) etc. Lets see how we can make each of them separately and at the end , we will integrate them together.

Input type = 'text'

This field is used for taking string like name, email, number etc. We fix a name for each of the input fields used , so that we can differentiate them while using.


My first form

First Name :
Last Name : Password :

The form above supports three input values from the user. First and second field are of type text, so , everything is visible to you while you type. In third input type is set to password, so , you can only see astericks while you type.

Checkbox

My first form

Gender : Male
Female

The above method creates a checkbox which get the gender of the user. Setting attribute checked='checked' makes the corresponding checkbox button to remain checked by default when the page loads.

Submit and Reset

Submit button helps us to submit the form when user has enter the values and is ready to proceed.Value given to the value attribute is visible on the button. It calls the action page by default, however, its nature can be changed by using javascripts. We will see that later on. Reset button allows the user to fill the fields again. It clears all the elements of the form.


My first form

So, once we are done with individual parts, lets see how the intregated version look like .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
My first webpage



</head>
<body>

My first form

First Name :
Last Name : Password : Gender : Male
Female
</body> </html>

If you are interested in the action page, and have basic knowledge of PHP, you can catch it at our PHP action page or we will come to it later.

If you have gone through the all the parts discussed carefully, I am pretty sure you can proceed to CSS now and start decorating things.

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review