HTML Form Elements

HTML form elements are the building blocks of web forms, allowing users to input data and interact with a website. Each element serves a specific purpose, ranging from text input to selection options and submission controls.

Below are the most common form elements:

<input>
It is used to create interactive controls, for example, buttons and various types of text fields and so on, to accept input or data from the user. The key attribute of this element is type. Some common values for the type include: button, checkbox, date, email, number, password, submit, text, and url. These values dictate the appearance of the element.

For example:

<form action=”my_action_page”>
<label for=”uname”>Username:</label>
<input type=”text” id=”uname” name=”username”>
<label for=”pwd”>Password:</label>
<input type=”password” id=”pwd” name=”pwd”>
<input type=”submit” value=”Login”>
</form>

Output




  Username:
  
  
  Password:

<label>
Defines a label for an <input> element, enhancing accessibility by associating text labels with form controls. Clicking on a <label> focuses the associated input.

Output




Name:

<select>
Creates a drop-down list allowing users to choose one or more options from a predefined list. Used in conjunction with <option> elements.

<label for=”cars”>Choose a car:</label>
<select id=”cars” name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</select>

Output



Choose a car:

<textarea>
Provides a multi-line text input field for entering longer pieces of text. Unlike <input> fields of type text, <textarea> can expand vertically to accommodate user input.

<label for=”story”>Tell your story:</label>
<textarea id=”story” name=”story” rows=”5″ cols=”33″></textarea>

Output



Tell your story:

<button>
Represents a clickable button used to submit forms, reset form data, or trigger custom JavaScript actions. It can contain text and other elements like images.

<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me</button>


Output

<fieldset>
Groups related form controls and labels, creating a visual and logical association. Often used to break up long forms into manageable sections.

<fieldset>
<legend>Personal Information</legend>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>


Output



Personal Information
  First name:
  

  Last name:

<legend>
Provides a caption for the <fieldset> element, helping to describe the group of form controls within the fieldset. Enhances readability and structure of forms.

<fieldset>
<legend>Account Information</legend>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br><br>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password”><br><br>
<input type=”submit” value=”Register”>
</fieldset>

Output


Account Information
  First name:
  

  Last name:

<datalist>
Defines a list of predefined options for an <input> element, providing autocomplete suggestions as users type. Enhances user experience by offering possible choices.

<label for=”browsers”>Choose your browser:</label>
<input list=”browsers” id=”browser” name=”browser”>
<datalist id=”browsers”>
<option value=”Chrome”>
<option value=”Firefox”>
<option value=”Safari”>
<option value=”Edge”>
<option value=”Opera”>
</datalist>

Output



Choose your browser:

HTML element attributes
HTML element attributes are additional pieces of information that can be added to an HTML tag to modify its behavior or provide extra details about the element. Attributes usually consist of a name-value pair and are placed within the opening tag of an HTML element.

Some common attributes include:
1. id: Specifies a unique identifier for the element.

2. class: Defines one or more class names for the element, which can be used for styling with CSS.

3. style: Allows inline CSS styles to be applied directly to the element.

4. src: Specifies the URL of an external resource, like an image or script, that the element refers to.

5. href: Defines the URL of the linked resource for <a> (anchor) elements.

6. alt: Provides alternative text for elements like <img> (image) that are used to describe the content.

7. title: Adds a title or tooltip text that appears when the mouse hovers over the element.

8. target: Specifies where to open the linked document or where to display the result of a form submission (_blank, _self, _parent, _top, etc.).

9. rel: Defines the relationship between the current document and the linked document for <a> elements.

10. type: Specifies the media type of the linked document for <a> elements or the type of input for <input> elements (text, checkbox, submit, etc.).

11. value: Sets the initial value for form elements like <input> and <button>.

12. name: Specifies the name of the element, used by the server for form submission and scripting purposes.

13. disabled: Disables the element so it cannot be interacted with or its value cannot be changed.

14. readonly: Specifies that the element is read-only and cannot be edited by the user.

15. required: Specifies that the element must be filled out before submitting the form.

16. min and max: Defines the minimum and maximum values for <input> elements with types like number, range, and date.

17. checked: Specifies that a checkbox or radio button should be pre-selected (checked).

18. placeholder: Provides a hint or example text that is displayed in an empty input field before the user enters a value.

19. autocomplete: Specifies whether the browser should automatically complete the input based on the user’s previous inputs.

20. aria- attributes*: Used for accessibility purposes, such as aria-label, aria-labelled by, etc., to provide additional information to assistive technologies.