HTML Form Element and tags
<form> HTML Form Element and Tags
HTML form “<form>” element and tags is used to collect and send information to an email or database. The <form> element can contain various input elements.
When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form element.
HTML Form Element and Tags Attributes
Following is a list of the most frequently used form attributes:
| S.N. | Attribute & Description |
| 1 | Action: Backend script ready to process your entered data in form elements. |
| 2 | Method: Method to be used to upload data. The most frequently used are POST and GET methods. |
| 3 | Target: Specify the target window or frame where the result of the script will be displayed. We can set values like _blank, _self, _parent etc. |
| 4 | Enctype: specify how the browser encodes the data before it sends it to the server. Possible values are −
Enctype=”mutlipart/form-data”− This is used when you want to upload binary data in the form of files like image, word or pdf file etc. Enctype=”application/x-www-form-urlencoded” − This is the standard method most forms use in simple scenarios. |
HTML Form Controls
There are different types of form controls that is used to collect data using HTML form element and tags.
- Input type text
- Input type password
- Input type email
- Input type Checkbox
- Input type Radio
- Input type Select
- Input type File
- Input type Hidden
- Input type Button
- Input type Submit and Reset Button
<input> Element
HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute.
| Type | Description |
| <input type=”text”> | Displays a single-line text input field |
| <input type=”radio”> | Displays a radio button (for selecting one of many choices) |
| <input type=”checkbox”> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type=”submit”> | Displays a submit button (for submitting the form) |
| <input type=”button”> | Displays a clickable button |
| <input type=”file”> | To select files like: image, docx or pdf files |
<input>: Type Text
HTML <input> elements can support any types of text input by setting the attribute type=”text”. This renders a single row input field.
<input> name Attribute
Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all.
<label> Element
The <label> tag defines a label for many form elements.
<input>: Number Type
HTML input elements can be of type number. These input fields allow the user to enter only numbers inside the field. It is created using the <input> element but type attribute is set to number.
<input>: email Type
HTML input elements can be of type email. These input fields allow the user to enter only email inside the field. It is created using the <input> element but type attribute is set to email.
<input> Password Type
The HTML <input> element can have the attribute type=”password” that renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information or password field.
<input>: file Type
The HTML <input> element allows a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. It is created using the <input> element but type attribute is set to file.
<input>: Type Radio Button
Radio buttons are used when out of many options, just one option is required to be selected. They are created using HTML <input> tag but type attribute is set to radio.
<input>: Type Checkbox
Checkboxes are used when more than one option is required to be selected. It is created using HTML <input> tag but type attribute is set to checkbox.
<select> Select List Element
The HTML <select> element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time.
<textarea> Element
The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element.
When rendered by the browser, textarea fields can be stretched/shrunk in size by the user, but the rows and cols attributes determine the initial size.
required Attribute
In HTML, input fields have an attribute called required which specifies that the field must include a value.
maxlength Attribute
In HTML, input fields with type text have an attribute called maxlength that specifies the maximum number of characters that can be entered into the field.
The code block shows an input text field that accepts text that has a maximum length of 10 characters.
<input> type Submit
HTML <input> elements can have a type attribute set to submit, by adding type=”submit”. With this attribute included, a submit button will be rendered and, by default, will submit the <form> and execute its action.
The text of a submit button is set to Submit by default but can also be changed by modifying the value attribute.
<input> type Reset
HTML <input> elements can have a type attribute set to reset, by adding type=”reset”. With this attribute included, a reset button will be reset all the fill out value from a form.
The text of a reset button is set to Reset by default but can also be changed by modifying the value attribute.
<input> Type Hidden
Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page.
HTML Form Validators
HTML forms allow you to specify different kinds of validation for your input fields to make sure that data is entered correctly before being submitted. HTML supports a number of different validators, including things like minimum value, minimum/maximum length, etc. The validators are specified as attributes on the input field.
Live Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Element</title>
</head>
<body>
<form action="mailto:yamsoti@gmail.com" method="post">
<table class="table">
<tr>
<td>
<label for="firstName">First Name</label>
</td>
<td>
<input type="text" name="firstName" required="required" maxlength="20">
</td>
</tr>
<tr>
<td>
<label for="lastName">Last Name</label>
</td>
<td>
<input type="text" name="lastName" required="required" maxlength="20">
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input type="email" name="email" maxlength="50">
</td>
</tr>
<tr>
<td>
<label for="password">Password</label>
</td>
<td>
<input type="password" name="password" minlength="8" maxlength="15">
</td>
</tr>
<tr>
<td>
<label for="contact">Contact Number</label>
</td>
<td>
<input type="number" name="phone" maxlength="10">
</td>
</tr>
<tr>
<td>
<label for="image">Image</label>
</td>
<td>
<input type="file" name="uploadImage">
</td>
</tr>
<tr>
<td>
<label for="gender">Gender</label>
</td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</td>
</tr>
<tr>
<td>
<label for="course">Course</label>
</td>
<td>
<input type="checkbox" name="course" value="HTML">HTML
<input type="checkbox" name="course" value="CSS">CSS
<input type="checkbox" name="course" value="PHP">PHP
<input type="checkbox" name="course" value="Java Script">Java Script
</td>
</tr>
<tr>
<td>
<label for="doa">Date of Admission</label>
</td>
<td>
<select name="year">
<option>Select Year</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
<select name="month">
<option>Select Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
</select>
<select name="day">
<option>Select Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="message">Message</label>
</td>
<td>
<textarea cols="45" rows="10" placeholder="Message"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="Post">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Leave a Reply