HTML form elements with their attributes and examples

HTML form elements

HTML (Hypertext Markup Language) provides various form elements that allow users to interact with web pages by entering data, making selections, and submitting information. Let's delve into some of the key form elements in HTML:

<form>

The <form> element is used to create an HTML form for user input.

Attributes:

action: Specifies where to send the form data when submitted (URL).
method: Specifies the HTTP method (GET or POST) used to send the form data.
target: Specifies where to display the response after submitting the form (_self, _blank, etc.).

Text Input: <input type="text">

Creates a single-line text input field.

Attributes:

type: Specifies the type of input (e.g., text, password, email, number).
name: Specifies the name of the input field.
value: Specifies the initial value of the input field.

Example

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Textarea: <textarea>

Creates a multi-line text input field (for longer text).

Attributes:

name: Specifies the name of the textarea.
rows, cols: Specifies the visible height and width of the textarea in lines and characters.

Example

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Checkbox: <input type="checkbox">

Creates a checkbox that can be checked or unchecked.

Attributes:

name: Specifies the name of the checkbox.
value: Specifies the value to be sent if checked.
checked: Specifies that the checkbox should be pre-selected.

Example

<input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
<label for="subscribe"> Subscribe to Newsletter</label><br>

Radio Button: <input type="radio">

Creates a radio button for selecting one option from multiple choices.

Attributes:

name: Specifies the name of the radio button group.
value: Specifies the value to be sent if selected.
checked: Specifies that the radio button should be pre-selected.

Example

<input type="radio" id="male" name="gender" value="male" checked>
<label for="male"> Male</label><br>

Select Dropdown: <select>

Creates a dropdown list (combo box) from which users can select one or more options.

Attributes:

name: Specifies the name of the select element.
<option>: Specifies each option in the dropdown list.
value: Specifies the value to be sent if selected.
selected: Specifies that an option should be pre-selected.

Example

<select>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Button: <button>

Creates a clickable button.

Attributes:

type: Specifies the type of button (submit, reset, button).
name, value: Used with type="submit" to send form data.

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Hidden Input: <input type="hidden">

Creates a hidden input field that is not displayed but still sends data when the form is submitted.
Useful for passing additional information without user interaction.

Example

<input type="hidden" name="referrer" value="homepage">
<input type="hidden" name="campaign" value="summer_sale">

File Input: <input type="file">

Creates a file upload control to select files from the user's device.

Attributes:

accept: Specifies the types of files that the server accepts.

Example:

<form action="/upload-files" method="post" enctype="multipart/form-data">
  <label for="files">Select multiple files:</label><br>
  <input type="file" id="files" name="files[]" multiple><br><br>

  <button type="submit">Upload</button>
</form>