Saturday, November 24, 2012

HTML Forms

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. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:


Syntax:
<form>
.
.
input elements
.
.
.
</form>
HTML Forms – The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
<input type=”text” /> defines a one-line input field that a user can enter text into:
Code:
<form>
First name: <input type=”text” name=”firstname” /><br />
Last name: <input type=”text” name=”lastname” />
</form>
Output:





Password Field
<input type=”password” /> defines a password field:

Code:
<form>
Password: <input type=”password” name=”pwd” />
</form>
Output:





Radio Buttons
<input type=”radio” /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
Code:
<form>
<input type=”radio” name=”sex” value=”male” /> Male<br />
<input type=”radio” name=”sex” value=”female” /> Female
</form>
Output:





 Checkboxes
<input type=”checkbox” /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.
Code
<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>
Output:





Submit Button
<input type=”submit” /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:
Code:
<form name=”input” action=”html_form_action.php” method=”get”>
Username: <input type=”text” name=”user” /><br/>
<input type=”submit” value=”Submit” />
</form>
 Output:

No comments:

Post a Comment