A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST"> form elements like input, textarea etc. </form>
Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes:| Attribute | Description |
|---|---|
| action | Backend script ready to process your passed data. |
| method | Method to be used to upload data. The most frequently used are GET and POST methods. |
| target | Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. |
| enctype | You can use the enctype attribute to specify
how the browser encodes the data before it sends it to the server.
Possible values are:
|
HTML Form Controls
There are different types of form controls that you can use to collect data using HTML form:- Text Input Controls
- Checkboxes Controls
- Radio Box Controls
- Select Box Controls
- File Select boxes
- Hidden Controls
- Clickable Buttons
- Submit and Reset Button
Text Input Controls
There are three types of text input used on forms:- Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
- Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.
- Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
Single-line text input controls
This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.Example
Here is a basic example of a single-line text input used to take first name and last name:<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
This will produce following result:Attributes
Following is the list of attributes for <input> tag for creating text field.| Attribute | Description |
|---|---|
| type | Indicates the type of input control and for text input control it will be set to text. |
| name | Used to give a name to the control which is sent to the server to be recognized and get the value. |
| value | This can be used to provide an initial value inside the control. |
| size | Allows to specify the width of the text-input control in terms of characters. |
| maxlength | Allows to specify the maximum number of characters a user can enter into the text box. |
Password input controls
This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.Example
Here is a basic example of a single-line password input used to take user password:<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
This will produce following result:Attributes
Following is the list of attributes for <input> tag for creating password field.| Attribute | Description |
|---|---|
| type | Indicates the type of input control and for password input control it will be set to password. |
| name | Used to give a name to the control which is sent to the server to be recognized and get the value. |
| value | This can be used to provide an initial value inside the control. |
| size | Allows to specify the width of the text-input control in terms of characters. |
| maxlength | Allows to specify the maximum number of characters a user can enter into the text box. |
Multiple-Line Text Input Controls
This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.Example
Here is a basic example of a multi-line text input used to take item description:<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
0 comentarii:
Trimiteți un comentariu