HTML Form Elements

By: Rajesh P.S.

An HTML form element is a component of a web page that allows users to input data and interact with the website. HTML forms are used for submitting user data to a server for processing or for retrieving data from a server. They typically contain various form elements such as text input fields, checkboxes, radio buttons, select dropdown lists, textareas, and submit buttons, which allow users to input and submit data to a server. Each form element is defined using HTML tags and attributes, and can be customized to control its behavior and appearance. When a user submits a form, the data is sent to the server for processing, and the server may generate a response that is sent back to the user's browser. HTML form elements are an important part of web development and are used extensively in creating interactive and dynamic web applications.

There are several types of form elements available in HTML. The most common ones are:

Text input fields: These are used for entering text or numbers into a form. They can be used for single-line or multi-line input.
Select dropdown lists: These allow users to choose one or more options from a list of predefined choices.
Checkboxes: These allow users to select one or more options from a list of predefined choices.
Radio buttons: These allow users to select one option from a list of predefined choices.
Textareas: These are used for entering larger amounts of text or comments into a form.
Submit buttons: These are used to submit the form data to the server.
File upload input fields: These allow users to upload files to a server.

Each form element is defined using HTML tags and attributes. The "name" attribute is used to uniquely identify each form element, while the "action" attribute specifies the URL of the server-side script that will handle the form data.

Other attributes such as "method", "enctype", "autocomplete", "placeholder", "required", "disabled", "maxlength", and "value" can also be used to customize the behavior of form elements.

When a user submits a form, the browser sends the form data to the server using the HTTP protocol. The server-side script then processes the data and generates a response, which is sent back to the user's browser.

Create a form element in HTML

To create a form element in HTML, you need to use the

tag.

In the above example, the "action" attribute specifies the URL of the server-side script that will handle the form data when the form is submitted, and the "method" attribute specifies the HTTP method to use when submitting the form (in this case, "post").

Between the opening and closing <form> tags, you can add various form elements such as text input fields, checkboxes, radio buttons, select dropdown lists, textareas, and submit buttons, among others, that allow users to input data and interact with the website.

For example, to create a text input field, you can use the <input> tag with the "type" attribute set to "text":

Browser View

Name:

In the above example, the "for" attribute of the <label> tag is used to associate the label with the input field, the "type" attribute of the <input> tag is set to "text" to create a text input field, the "id" attribute is used to uniquely identify the input field, the "name" attribute is used to specify the name of the input field (which is used to reference the input data in the server-side script), and the "required" attribute specifies that the input field is required and must be filled in before the form can be submitted.

Specify the HTTP method to use when submitting a form

To specify the HTTP method to use when submitting a form, you need to use the "method" attribute in the <form> tag.

There are two commonly used HTTP methods when submitting a form: "GET" and "POST".

GET method

The "GET" method is used to retrieve data from the server. When a form is submitted using the "GET" method, the data entered into the form fields is appended to the URL as a query string. This makes it easy to bookmark or share the URL, but it also limits the amount of data that can be submitted and is less secure than the "POST" method.

To specify the "GET" method, you can add the following attribute to the <form> tag:

POST method

The "POST" method is used to submit data to the server. When a form is submitted using the "POST" method, the data entered into the form fields is sent as part of the HTTP request body. This allows for larger amounts of data to be submitted and is more secure than the "GET" method, but it cannot be bookmarked or shared as easily.

To specify the "POST" method, you can add the following attribute to the <form> tag:

Action attribute

The "action" attribute in a form element is used to specify the URL of the server-side script or resource that will process the form data when the form is submitted.

When a user submits a form, the data entered into the form fields is sent to the server as an HTTP request. The "action" attribute in the <form> tag specifies the URL of the resource that will handle this request.

For example, consider the following form element:

In the above example, the "action" attribute is set to "/submit-form". When the user submits the form, the data entered into the form fields will be sent to the URL "/submit-form" as an HTTP request.

The server-side script or resource at the specified URL can then process the form data and return a response to the user. This can include storing the data in a database, sending an email, or redirecting the user to a different page.

Label element

To create a label in HTML, you can use the <label> element. The <label> element is used to associate a label with an input element. Here's an example:

Browser View

Name:

In the above example, the <label> element is used to label the text input field with the id of "name". The "for" attribute in the <label> element should be set to the id of the associated input element. This allows users to click on the label text to give focus to the associated input field.

The text enclosed in the <label> element provides a descriptive label for the input field. You can customize the appearance of the label text using CSS.

Labels are an important accessibility feature because they help users with visual or motor impairments to understand the purpose of form controls. Additionally, properly associated labels make it easier for screen readers to read the form and help users navigate through the form.

Text input field

To create a text input field in HTML, you can use the <label> element with the "type" attribute set to "text".

Browser View

Name:

In the above example, created a text input field with the label "Name". The "type" attribute is set to "text" to indicate that this is a text input field. The "id" attribute is used to uniquely identify the input field, and the "name" attribute is used to specify the name of the input field when the form is submitted.

Button Element

To create a button element in HTML, you can use the <button> tag.

<button>Click Me</button>

Browser View

This will create a simple button that says "Click Me". You can also add additional attributes to the button element to specify its behavior, style, and more.

Following are some common attributes you can use with the <button> tag:

type: specifies the type of button. The default value is "submit", which will submit a form when clicked. Other values include "button" (a normal button), "reset" (resets the form), and "menu" (opens a context menu).
name: specifies a name for the button, which can be used when submitting a form.
value: specifies a value for the button, which can also be used when submitting a form.
disabled: disables the button so it can't be clicked.
onclick: specifies a JavaScript function to be executed when the button is clicked.

Following is an example of a button with some additional attributes:

<button type="button" name="myButton" value="1" disabled onclick="alert('Button clicked!')">Click Me</button>

Browser View

This button has a type of "button", a name of "myButton", a value of "1", and is disabled. When clicked, it will display an alert message using the onclick attribute.

Dropdown list

To create a select dropdown list in HTML, you can use the <select> element with one or more <option> elements inside it.

<label for="color">Favorite color:</label> <select id="color" name="color"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>

Browser View

Favorite color:

In the above example, we have created a select dropdown list with the label "Favorite color". The "select" element has an "id" attribute to uniquely identify the dropdown list, and a "name" attribute to specify the name of the dropdown list when the form is submitted.

The "option" elements inside the "select" element represent the individual options in the dropdown list. The "value" attribute of each "option" element specifies the value that will be submitted when the form is submitted. The text content of each "option" element is the label that will be displayed in the dropdown list.

You can add a "selected" attribute to one of the "option" elements to specify which option should be selected by default when the page loads. You can also add a "disabled" attribute to an "option" element to prevent the user from selecting it.

Checkbox

To create a checkbox in HTML, you can use the <input> element with the "type" attribute set to "checkbox".

<label for="fruit">Favorite fruit:</label> <input type="checkbox" id="fruit-apple" name="fruit[]" value="apple"> <label for="fruit-apple">Apple</label> <input type="checkbox" id="fruit-banana" name="fruit[]" value="banana"> <label for="fruit-banana">Banana</label> <input type="checkbox" id="fruit-orange" name="fruit[]" value="orange"> <label for="fruit-orange">Orange</label>

Browser View

Favorite fruit: Apple Banana Orange

In the above example, created three checkboxes for selecting favorite fruits. The "input" element has the "type" attribute set to "checkbox" to indicate that this is a checkbox input field. The "id" attribute is used to uniquely identify the checkbox field, and the "name" attribute is used to specify the name of the input field when the form is submitted. The "value" attribute specifies the value that will be submitted when the checkbox is checked.

Note that, used a separate <label> element for each checkbox, with the "for" attribute set to the "id" of the corresponding "input" element. This associates the label with the checkbox field, so that clicking on the label will also toggle the checkbox.

Also used square brackets "[]" in the "name" attribute to indicate that this input field is part of an array. This allows multiple checkboxes to be selected and submitted as an array of values.

Radio button

To create a radio button in HTML, you can use the <input> element with the "type" attribute set to "radio".

<label for="gender">Gender:</label> <input type="radio" id="gender-male" name="gender" value="male"> <label for="gender-male">Male</label> <input type="radio" id="gender-female" name="gender" value="female"> <label for="gender-female">Female</label>

Browser View

Gender: Male Female

In the above example, created two radio buttons for selecting gender. The "input" element has the "type" attribute set to "radio" to indicate that this is a radio button input field. The "id" attribute is used to uniquely identify the radio button field, and the "name" attribute is used to group the radio buttons together so that only one can be selected at a time. The "value" attribute specifies the value that will be submitted when the radio button is selected.

Note that, used a separate <label> element for each radio button, with the "for" attribute set to the "id" of the corresponding "input" element. This associates the label with the radio button field, so that clicking on the label will also select the corresponding radio button.

Textarea

In HTML, a textarea is a form element that allows the user to enter and edit multiple lines of text. The entered text is enclosed within the opening and closing tags of the <textarea> element.

To create a textarea in HTML, you can use the <textarea> element with the optional "name", "rows", and "cols" attributes.

<label for="comments">Comments:</label> <textarea id="comments" name="comments" rows="4" cols="40"></textarea>

Browser View

Comments:

In the above example, created a textarea field for entering comments. The "textarea" element has the "name" attribute set to "comments" to specify the name of the input field when the form is submitted. The "rows" and "cols" attributes are used to specify the size of the textarea field in rows and columns, respectively.

You can also include default text in the textarea by enclosing it within the opening and closing tags of the <textarea> element, like this:

<label for="comments">Comments:</label> <textarea id="comments" name="comments" rows="4" cols="40">Enter your comments here</textarea>

In the above example, the default text "Enter your comments here" is displayed in the textarea field when the page is loaded.

Submit button

To create a submit button in HTML, you can use the <input> element with the "type" attribute set to "submit".

Browser View

In this example, created a submit button with the label "Submit". When the user clicks on the submit button, the form data is submitted to the server for processing.

Placeholder

The "placeholder" attribute is used in HTML form elements to provide a short hint or example text that describes the expected value of the input field. It is a text that appears in the input field as a greyed-out text before the user starts typing in their own text.

For example, if you have a text input field for the user's name, you can use the "placeholder" attribute to provide a hint such as "Enter your name" or "First name, Last name". The placeholder text disappears when the user starts typing in the input field.

Browser View

Name:

In this example, added a "placeholder" attribute to the input field with the value "Enter your name". This text will be displayed in the input field until the user starts typing their name.

The "placeholder" attribute is useful in providing guidance to the user on what input is expected in the form field. However, it should not be used as a replacement for clear and descriptive labels as some users may not be able to see the placeholder text and it may not provide enough information.

Fieldset

To create a fieldset element in HTML, you can use the <fieldset> tag. This tag is used to group related form elements together and can also be used with the <legend> tag to provide a description or caption for the group. Here's an example of how to use the <fieldset> and <legend> tags:

<form> <fieldset> <legend>Contact Information</legend> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <label for="message">Message:</label> </fieldset> </form>

Browser View

Contact Information Name:
Email:
Message:

In the above example, the <fieldset> tag is used to group together three form elements: a text input for the user's name, an email input for their email address, and a textarea for their message. The <legend> tag is used to provide a description or caption for the group, which in this case is "Contact Information".

Using a <fieldset> and <legent> is a good way to organize and group related form elements together, and can help improve the accessibility and usability of your forms.

Password input

To create a password input field in HTML, you can use the <input> tag with the type attribute set to "password".

<label for="password">Password:</label> <input type="password" id="password" name="password">

Browser View

Password:

In the above example, the <label> tag provides a label for the password input field, which has an id of "password" and a name of "password". The type attribute is set to "password", which tells the browser to mask the input so that the user's password is not visible as they type it.

By default, the text in a password input field is masked with dots or asterisks. You can also use the maxlength attribute to limit the maximum number of characters the user can enter, and the required attribute to make the field mandatory.

<label for="password">Password:</label> <input type="password" id="password" name="password" maxlength="20" required>

In the above example, the password input field is limited to a maximum of 20 characters and is marked as required, which means the user must enter a password before the form can be submitted.

File upload

To create a file upload input field in HTML, you can use the <input> tag with the type attribute set to "file".

<label for="file">Choose a file:</label> <input type="file" id="file" name="file">

Browser View

Choose a file:

In the above example, the <label> tag provides a label for the file upload input field, which has an id of "file" and a name of "file". The type attribute is set to "file", which tells the browser to display a file selector dialog box when the user clicks on the input field.

By default, the file upload input field will allow the user to select any type of file. You can also use the accept attribute to specify a list of file types that the user is allowed to select.

<label for="file">Choose an image file:</label> <input type="file" id="file" name="file" accept="image/*">

Browser View

Choose an image file:

In the above example, the file upload input field is restricted to image files only, as specified by the accept attribute with a value of "image/*".

Note that file upload input fields have some security considerations, such as the possibility of uploading malicious files. Therefore, it's important to validate and sanitize the uploaded files on the server side.

Autocomplete

The autocomplete attribute is used in form elements to control whether the browser should automatically fill in the input field with previously entered data, based on the user's browser history and/or form data stored on their computer.

The autocomplete attribute can have the following values:

"on": (default) The browser is allowed to automatically fill in the input field based on the user's previous entries.
"off": The browser is not allowed to automatically fill in the input field based on the user's previous entries.

For example, if you have a login form with an input field for the user's email address and password, you may want to disable autocomplete for the password field for security reasons, so that the browser doesn't store the user's password and automatically fill it in next time they visit the page. Here's an example:

<form> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="on"><br> <label for="password">Password:</label> <input type="password" id="password" name="password" autocomplete="off"><br> <button type="submit">Submit</button> </form>

Browser View

In the above example, the autocomplete attribute is set to "on" for the email input field and "off" for the password input field. This means that the browser will be allowed to automatically fill in the email field based on the user's previous entries, but not the password field. This can help improve the security of your login form by preventing the browser from storing the user's password.

Conclusion:

Creating a form element in HTML involves using the <form> tag, along with various form elements such as text input fields, checkboxes, radio buttons, select dropdown lists, textareas, and submit buttons, to allow users to input and submit data to a server.

Next > HTML Form Action

Related Topics

More Related Topics.....

HTML Input Form Attributes