09 - Forms

Forms 

Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email.

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.

The basic tags used in the actual HTML of forms are form, input, textarea, select and option.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

The input tag is the daddy of the form world. It can take ten forms, outlined below:

<input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

How the HTML code above looks in a browser:

First name:  
Last name: 

<input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.

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

How the HTML code above looks in a browser:

Password: 

<input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.

<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>

How the HTML code above looks in a browser:

 I have a bike
 I have a car
 

<input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female 

</form>

How the HTML code above looks in a browser:

 Male
 Female

<input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button  with the value attribute, for ex:

How the HTML code above looks in a browser:

Username: 

Some Working Example

<form action="contactus.php" method="post">

 <p>Name:</p>
 <p><input type="text" name="name" value="Your name" /></p>

 <p>Comments: </p>
 <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

 <p>Are you:</p>
 <p><input type="radio" name="areyou" value="male" /> Male</p>
 <p><input type="radio" name="areyou" value="female" /> Female</p>
 <p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
 <p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

 <p><input type="submit" /></p>

 <p><input type="reset" /></p>

</form>

 How the HTML code above looks in a browser:

Name:

Comments:
Your comments
Are you:
Male
Female
An hermaphrodite
Asexual

Note: Data inserted in forms will further taken by PHP code and store  in database on Server

powered by multimediagyan ©