HTML Forms
HTML forms are special kind of HTMLpage that can be used to pass data to a server. Once the server gets the data, it may manipulate the data and send some of it back, or it may store it into a database for later use.
An HTML form will contain input elements like lables, text fields, check boxes, radio-select-buttons, submit buttons, and more. A form can also present lists, from which the user can also present lists, from which the user can make a selection, or a text area where multi-line typing is allowed.
The basic structure of a form is as follows:
|
1 2 3 4 5 6 7 8 9 |
<form> ... input elements ... </form> |
The form tags go inside the <body> tag. The data in the form 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 :
|
1 |
<form name="form_name" action="postSignup.php" method="get"> |
HTML Form Actions & Methods
When you define a form, there are two required attributes: action and method.
The action attribute (action=) indicates the name of the file that the form will be submitted to. The method attributes (method=) specifies how the form will be submitted.
The defined in the action attribute usually does something with the received input, like put it into a database or send back some of the values to the user. Here’s an example of a simple form with action and method attributes.
<form name=”input” action=”form_action.php” method=”post”>
Full Name : <input type=”text” name=”fullname” />
<input type=”submit” value=”Submit”>
</form>
The Input tag
The most common form element is the <input> element, which is used to collect information from the user. An <input> element has several variations, which depend on the type attribute. An <input> element , so you can refer to it later.
In general, the sysntax is :
|
1 |
<input type="type" name="name" /> |
An <input> element can be of type text, checkbox, password, radio button , submit button, and more. The common types are described.
Text Fields
<input type=”text”> defines a one-line input field that a user can enter text into:
|
1 2 3 4 5 6 7 |
<form> <input type="text" name="firstname" /><br /> <input type="text" name="lastname" /> </form> |
Password Field
<input type=”password”> defines password field. The password field is just like the text field, except the text that is typed in is not displayed on the screen.
|
1 |
Password: <input type="password" name="userpwd" /> |
Note that a password field doesn’t secure the data, it only hides it on the screen.
Radio Buttons
<input type=”radio”> defines a radio button. Radio buttons let a user select one (and only one) of a limited number of presented choices :
|
1 2 3 4 5 6 7 8 |
<body> <form> Pick your favorite color :<br /> <input type="radio" name="color" value="red" />Red <br /> <input type="radio" name="color" value="green" />Green <br /> <input type="radio" name="color" value="Blue" />Blue </form> </body> |
Checkboxes
<input type=”checkbox”. defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
|
1 2 3 4 |
<form> <input type="checkbox" name="vehicle" value="Bike" />I have a bike <br /> <input type="checkbox" name="vehicle" value="Car" />I have a Car <br /> </form> |
Submit Button
<input type=”submit”> defines the submit button.
A submit button is used when the user has filled in the form, and is ready to send (“submit”) the data they entered to the server. The data is sent to the page specified in the form’s action attribute.
