HTML Form Elements

HTML form elements are components that allow users to input data, make selections, and interact with a web page. These elements are used within the <form> element to create a structured and interactive user interface for submitting data to a server. Here are some common HTML form elements:

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

<input>
<textarea>
<select>
<option>
<button>
<label>
<fieldset>
<legend>
<input type="file">

<input> Element:

The <input> element is a versatile form control used to create various types of input fields, including text boxes, passwords, checkboxes, radio buttons, and more. The specific type of input is defined by the type attribute.

Example

<input type="text" name="username" />

You can click on above box to edit the code and run again.

Output

<textarea> Element:

The <textarea> element is used for multiline text inputs, such as comments or longer messages.

Example

<textarea name="message" rows="4" cols="50"></textarea>

You can click on above box to edit the code and run again.

Output

<select> and <option>: Element

The <select> element creates a dropdown list, and <option> elements define the individual options within the list.

Example

<select name="gender">
    <option value="male">Male</option>
    <option value="female">Female>/option>
</select>

You can click on above box to edit the code and run again.

Output

<button> Element

The <button> element creates a clickable button. It can be used for submitting forms, triggering JavaScript functions, or other custom actions.

Example

<button type="submit">Submit</button>

You can click on above box to edit the code and run again.

Output

<label> Element:

The <label> element is used to associate a text label with a form control, improving accessibility and user experience.

Example

<label for="username">Username:</label> <input type="text" id="username" name="username" />

You can click on above box to edit the code and run again.

Output

<fieldset> and <legend> Element:

The <fieldset> element groups related form elements together, and <legend> provides a caption for the group.

Example


 <fieldset>
<legend>Contact Information</legend>
<!-- Form elements go here -->
</fieldset>

You can click on above box to edit the code and run again.

Output

<input type="file"> Element:

The <input> element with type="file" creates a file input, allowing users to upload files. element with type="file" creates a file input, allowing users to upload files.

Example

<input type="file" name="fileUpload">

You can click on above box to edit the code and run again.

Output