- 3 years ago
- Shahzad Gujjar
- 2388 Views
-
2
You can learn how to create a form in HTML to collect user inputs in this tutorial.
What is HTML Form
HTML Forms are needed to capture various types of user inputs, such as contact information such as name, email address, phone numbers, or financial information such as credit card information.
Input boxes, checkboxes, radio buttons, submit buttons, and other functions are found on forms. Users normally fill out a form by changing the controls, such as inserting text, choosing objects, and submitting it to a web server for processing.
An HTML form is created using the <form> tag. Here’s a simple login form:
<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>
The sections below go into the various types of controls you will use in your form.
Input Element
Inside HTML types, this is the most widely used feature.
Inside HTML types, this is the most widely used element.
Based on the type attribute, you can define different types of user input fields. A text field, password field, checkbox, radio button, submit button, reset button, file select box, and several new input styles added in HTML5 can all be used as input elements.
Here is a list of the most widely used input types.
Text Fields
Text fields are single-line locations where the user can enter text.
An <input> element with the form attribute text is used to construct single-line text input controls. Here’s an example of a single-line text input that could be used to capture usernames:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
The output of the previous example will appear as follows:
Labels for <input> elements are defined using the <label> tag. Instead, use an <textarea> if you want the user to enter several lines.
Password Field
Text fields and password fields are identical. Characters in a password sector are masked, which means they are shown as asterisks or dots. This is to deter anyone from reading the password shown on the computer. This is also a single-line text input control generated with the form attribute set to password on the <input> variable.
Here’s an example of a single-line password entry that will be used to capture the user’s password:
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
— The output of the previous example will appear as follows:
Radio Buttons
Radio buttons allow the user to choose exactly one option from a list of possibilities. It’s made with an <input> element with the type attribute set to the radio.
Here’s an example of a radio button that could be used to collect information about a user’s gender:
<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>
— The output of the previous example will appear as follows:
Checkboxes
Checkboxes allow the user to choose one or more choices from a list of pre-defined options. It’s made with an input> element with the type attribute set to the checkbox.
Checkboxes can be used to gather information about a user’s hobbies in the following way:
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>
The output of the previous example will appear as follows:
NOTE: Add the attribute checked to the input element, such as input <type=”checkbox” checked>, to make a radio button or checkbox selected by default.
File Select box
A user will search for a local file and send it as an attachment with the form data using the file fields. A file select input field with a Browse button is rendered in web browsers like Google Chrome and Firefox, allowing the user to access the local hard drive and select a file.
This is also created by an element, the attribute type of which is set to a file.
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
The output of the example above will appear as follows:
NOTE: Several other types of input are available. Refer to the new input types chapter on HTML5 to read more about new input types.
Textarea
Textarea is a multi-line input text control that enables a user to enter more than one text line. Controls of multi-line text inputs are generated with an element <textarea>.
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
The output of the example above will appear as follows:
Select Boxes
A box to select is a list of options that allows users to select one or more of the options from a pull-down list. The <select> element and <option> element are used to create select box. Each item in the list is defined by the elements within the element.
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>
The output of the example above will appear as follows:
Submit and Reset Buttons
The form data is submitted to a web server through a submit button. When pressing the Submit button, the form data will be sent to a file specified in the action attribute of the form for processing the data sent.
A reset button resets the default values for all forms control. Try the example below by entering your name in the text field, and then press the Submit button to see it in effect.
<form action="action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
In the above text area, type your name and press Submit button to see it in action.
The element can also be used to create the buttons. Buttons generated with the
element feature, like buttons created with the input element, However, they have more rendering options by allowing the embedding of other HTML elements.
Grouping Form Controls
The <legend> element is often used to group logically related controls and labels within a web form. Form controls are organized into categories to make it easier for users to find them, making the form more user-friendly. Let’s take a look at an example and see how it works:
<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form>
Frequently Used Form Attributes
The attributes of the most widely used type elements are listed in the table below:
| Attribute | Description |
|---|
name | used to specifies the name of the form. |
action | Specifies the URL of the webserver software or script that will be used to process the data sent via the form. |
method | The HTTP form used by the browser to transfer data to the webserver is specified here. The value can be one of two options: get (the default) or send. |
target | Specifies where the answer obtained after sending the form should be shown. _blank, _self, _parent, and _top are examples of possible values. |
enctype | When uploading the form to the server, this property determines how the form data should be encoded. And when the function attribute’s value is post is it applicable. |
There are some other attributes, please refer to the tag reference for more information.
Inside the forms collection, the name attribute reflects the form’s name. Its meaning must be special among the forms in a document and not empty.
The data sent through the get method is visible in the address bar of the browser. However, the user is not able to see the data sent via post. Please see the GET vs. POST guide for a detailed explanation of the differences between these two HTTP methods.
- 3 years ago
- Shahzad Gujjar
- 2388 Views
-
2