HTML - Forms
What are HTML Forms
HTML Forms are required once you want to gather some data from the location visitor. for instance, during user registration, you'd wish to collect information like name, email address, MasterCard, etc.
A form will receive the data from the location of the visitor then will send it to a back-end application like CGI, ASP Script or PHP script, etc. The back-end application will perform the specified processing on the passed data supported defined business logic inside the appliance.
There are various form elements that are available these include:
1. text fields,
2. text area fields,
3. drop-down menus,
4. radio buttons,
5. checkboxes, etc.
The HTML <form> tag is added in other to make an HTML form and it's the main syntax is written below:
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>
Form Attributes
Apart from common attributes, the following is a list of the most frequently used form attributes:
| Sr.No | Attribute & Description |
|---|---|
| 1 | action: Backend script ready to process your passed data. |
| 2 | method: Method to be used to upload data. The most frequently used are GET and POST methods. |
| 3 | target: Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent, etc. |
| 4 | 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 −application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file, etc. |
HTML Form Controls
There are different types of form controls that you can use to collect data using HTML form −
1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button
Text Input Controls
There are three sorts of text input used on forms:
1. Single-line text input controls: This control is employed for items that need just one line of user input, like search boxes or names. they're created using HTML <input> tag.
2. Password input controls: this is often also a single-line text input but it masks the character as soon as a user enters it. they're also created using HTML <input> tag.
3. Multi-line text input controls: this is often used when the user is required to offer details that will be longer than one sentence. Multi-line input controls are created using HTML <textarea> tag.
Single-line text input controls
This form control method is mainly used for items that usually require just one line of user input, such as search boxes or names. They are made using HTML <input> tag.
Example:
This is a simple example of single-line text input used to display a 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>
The above code will display as:
Attributes
The following is a list of available attributes for <input> tag for making the text field in a form.
|
No. |
Attribute & Description |
|---|---|
|
1 |
type Indicates the type of input control and for text input control it will be set to text. |
|
2 |
name Used to give a name to the control which is sent to the server to be recognized and get the value. |
|
3 |
value This can be used to provide an initial value inside the control. |
|
4 |
size Allows specifying the width of the text-input control in terms of characters. |
|
5 |
maxlength Allows specifying the maximum number of characters a user can enter into the text box. |
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
