HTML - Form Control

Input Fields

Input fields are the most common type of form control. They let users enter various types of data, such as text, numbers, and dates. Here are some commonly used input fields:

Checkboxes and Radio Buttons

Checkboxes and radio buttons are used when users need to select one or more options from a group of choices.

Dropdown Lists and Select Boxes

Dropdown lists and select boxes provide a way for users to choose one or more options from a predefined list.

Buttons

Buttons are used to trigger actions or submit forms.

Textareas

Textareas are used for entering multi-line text input.

The rows and cols attributes can be used to set the initial dimensions of the textarea. The rows attribute sets the number of visible text lines, while the cols attribute sets the average character width. Textareas are resizable by default, allowing users to adjust the size of the input area. The resizing behavior can be controlled using CSS properties like resize.

Label Elements

The <label> element is used to create a label for a form control. It provides a text description that is associated with a specific form control, such as an input field, checkbox, or radio button. The label text helps you understand the purpose of the form control and what information you should enter or select.

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

Associating Labels with Form Controls

To associate a label with a form control, you can use the for attribute of the <label> element. The value of the for attribute should match the id attribute of the corresponding form control. This creates a logical connection between the label and the form control, allowing you to click on the label to focus on the associated control.

<input type="checkbox" id="terms" name="terms">
<label for="terms">I agree to the terms and conditions</label>

Importance of Labeling for Accessibility

Labeling form controls is important for accessibility. It helps you understand the purpose and context of each form control when using assistive technologies, such as screen readers. When a label is properly associated with a form control, assistive technologies can convey the label text to you, making it easier to navigate and interact with the form.

In addition to the for attribute, you can also nest the form control inside the <label> element. This implicitly associates the label with the nested control, even without using the for attribute. However, using the for attribute is still considered a best practice for explicit association.

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

By properly labeling form controls, you make your forms more accessible and user-friendly for all users, including those relying on assistive technologies.

Fieldset Elements

The <fieldset> element groups together related form controls within a form. It creates a visual and logical grouping of form controls, making the form more structured and easier to understand. The <fieldset> element contains the grouped controls and can also include a caption or label for the group using the <legend> element.

<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="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Legend Elements

The <legend> element provides a caption or label for a <fieldset>. It appears as a heading within the fieldset and describes the grouped form controls. The <legend> element should be the first child of the <fieldset> element.

<fieldset>
  <legend>Shipping Address</legend>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br>
  <label for="city">City:</label>
  <input type="text" id="city" name="city"><br>
  <label for="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip">
</fieldset>

Grouping Related Form Controls

When grouping form controls using <fieldset>, consider the logical relationship between the controls. Group together controls that are closely related or belong to the same category. This helps organize the form and makes it easier for users to understand and fill out.

Some common examples of grouping related form controls include:

By grouping related form controls with <fieldset> and providing clear labels with <legend>, you improve the usability and readability of your forms. It guides users through the form and makes it easier to understand the required information.

Remember to use appropriate labels for each form control within the fieldset to maintain accessibility and usability.

Required Attribute

The required attribute is used to indicate that a form control must be filled out before the form can be submitted. When a form control has the required attribute, the browser will stop the form from being submitted if the control is left empty or does not meet the specified validation criteria.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

Disabled Attribute

The disabled attribute is used to disable a form control, making it non-interactive and non-editable. Disabled form controls are usually grayed out and cannot be focused, clicked, or changed by you.

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

Disabled form controls are not submitted as part of the form data when the form is submitted. They are skipped during form processing.

Readonly Attribute

The readonly attribute is used to make a form control read-only, meaning you can view its value but cannot change it. Read-only form controls are still focusable and can be included in form submission.

<label for="email">Email:</label>
<input type="email" id="email" name="email" value="user@example.com" readonly>

Read-only form controls are useful when you want to show pre-filled or calculated values that should not be changed by you.

Placeholder Attribute

The placeholder attribute is used to provide a hint or example text inside a form control when it is empty. The placeholder text disappears when you start typing or the form control receives focus.

<label for="search">Search:</label>
<input type="text" id="search" name="search" placeholder="Enter search term...">

Placeholders should be used as a supplementary hint and should not replace proper labeling of form controls. They are helpful for providing additional guidance or examples, but should not be relied upon as the only way of conveying the purpose of a form control.

Applying CSS to Form Controls

To apply CSS styles to form controls, you can use CSS selectors to target specific form elements. You can select form controls based on their type, class, ID, or other attributes. Here are some examples of CSS selectors for form controls:

/* Selecting all input elements */
input {
  /* CSS styles */
}

/* Selecting a specific input type */
input[type="text"] {
  /* CSS styles */
}

/* Selecting a form control with a specific class */
.form-control {
  /* CSS styles */
}

/* Selecting a form control with a specific ID */
#username {
  /* CSS styles */
}

Once you have selected the form controls, you can apply various CSS properties to style them. Some common CSS properties used for form control styling include:

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

Pseudo-classes for Form Control States

CSS provides pseudo-classes that let you style form controls based on their states. Pseudo-classes are keywords added to selectors to specify a special state of an element. Some commonly used pseudo-classes for form controls are:

input[type="text"]:focus {
  outline: none;
  border-color: blue;
}

input[type="email"]:valid {
  border-color: green;
}

input[type="number"]:invalid {
  border-color: red;
}

input[type="text"]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

Customizing Form Control Appearance

CSS lets you change the look of form controls beyond the default browser styles. You can use CSS properties and techniques to create visually appealing and unique form controls that match your website's design.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: background-color 0.3s;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

select {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select:focus {
  outline: none;
  border-color: blue;
}