awesome-copilot/skills/create-web-form/references/html-form-elements.md

HTML Form Elements Reference

A consolidated reference for HTML form-related elements, sourced from the Mozilla Developer Network (MDN) Web Docs.

---

Table of Contents

1. <form>
2. HTMLFormElement.elements
3. <button>
4. <datalist>
5. <fieldset>
6. <input>
7. <label>
8. <legend>
9. <meter>
10. <optgroup>
11. <option>
12. <output>
13. <progress>
14. <select>
15. <textarea>

---

<form>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form

Description

The <form> element represents a document section containing interactive controls for submitting information to a server. Both opening and closing tags are mandatory. Forms cannot be nested inside other forms.

Key Attributes

Attribute	Description
action	URL that processes the form submission. Can be overridden by formaction on submit buttons.
method	HTTP method: get (default), post, or dialog. Defines how data is sent.
enctype	MIME type for POST submissions: application/x-www-form-urlencoded (default), multipart/form-data (for files), text/plain.
novalidate	Boolean attribute that disables form validation on submission.
autocomplete	Controls auto-completion: on (default) or off.
accept-charset	Character encoding accepted (typically UTF-8).
name	Form identifier; must be unique. Becomes a property of window, document, and document.forms.
target	Where to display the response: _self (default), _blank, _parent, _top.
rel	Link relationship types: external, nofollow, noopener, noreferrer, etc.

Usage Notes

• Forms cannot contain nested forms.
• Supports CSS pseudo-classes: :valid and :invalid for styling based on form validity.
• DOM Interface: HTMLFormElement.
• Implicit ARIA role: form.

Example

<form action="/submit" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <input type="submit" value="Submit" />
</form>

---

HTMLFormElement.elements

Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

Description

The elements property returns an HTMLFormControlsCollection containing all the form controls associated with a <form> element. Controls can be accessed by index or by their name/id attributes.

Return Value

• Type: HTMLFormControlsCollection (a live collection based on HTMLCollection)
• Live: Yes -- automatically updates when controls are added or removed.
• Order: Tree order (preorder, depth-first traversal of the document).

Included Form Controls

The collection includes:

• <button>
• <fieldset>
• <input> (except type="image")
• <object>
• <output>
• <select>
• <textarea>
• Form-associated custom elements

Note: <label> and <legend> elements are not included.

Example

// Access form controls
const inputs = document.getElementById("my-form").elements;
const firstControl = inputs[0];           // By index
const byName = inputs["username"];        // By name attribute

// Iterate over controls
for (const control of inputs) {
  if (control.nodeName === "INPUT" && control.type === "text") {
    control.value = control.value.toUpperCase();
  }
}

// Get number of controls
console.log(inputs.length);

---

<button>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button

Description

The <button> element is an interactive element activated by a user (via mouse, keyboard, finger, voice, or assistive technology) that performs an action, such as submitting a form or opening a dialog. By default, its appearance reflects the user's platform but can be fully customized with CSS.

Key Attributes

Attribute	Description
type	Specifies behavior: submit (default for forms), reset (clears form), button (no default behavior).
disabled	Boolean; prevents user interaction.
name	Button name for form submission.
value	Value submitted with form data.
form	Associates button with a form by ID.
formaction	Overrides form's action URL.
formmethod	Overrides form's HTTP method (post/get).
autofocus	Gives button focus on page load.
popovertarget	Controls a popover element by ID.
popovertargetaction	Popover action: show, hide, or toggle.

Usage Notes

• <button> is easier to style than <input type="button"> because it supports inner HTML content (text, images, icons, pseudo-elements).
• Always set type="button" for non-form buttons to prevent unintended form submission.
• Default display is flow-root; buttons center children both horizontally and vertically.

Accessibility Considerations

• Icon-only buttons must include visible text or ARIA attributes describing functionality.
• Minimum recommended interactive target size: 44x44 CSS pixels.
• Space buttons adequately to prevent accidental activation.
• Use :focus-visible for keyboard focus indicators with sufficient contrast (4.5:1 ratio).
• Use aria-pressed to describe toggle button state (not aria-checked or aria-selected).

Example

<!-- Basic button -->
<button type="button">Click me</button>

<!-- Form submission button -->
<form>
  <input type="text" name="username" />
  <button type="submit">Submit</button>
</form>

<!-- Styled button -->
<button class="favorite" type="button">Add to favorites</button>

<style>
  .favorite {
    padding: 10px 20px;
    background-color: tomato;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .favorite:hover {
    background-color: red;
  }
</style>

---

<datalist>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist

Description

The <datalist> element contains a set of <option> elements that represent permissible or recommended options available to choose from within other controls, such as <input> elements. It provides autocomplete/suggestion functionality without restricting user input.

How It Works

The <datalist> is associated with an <input> element via:

1. Give the <datalist> a unique id.
2. Add the list attribute to the <input> with the same id value.

Key Attributes

• <datalist> itself: No specific attributes (only global attributes like id).
• <option> children: value (the suggestion; required), label (display text; optional).

Supported Input Types

• Text-based: text, search, url, tel, email, number
• Date/Time: month, week, date, time, datetime-local
• Visual: range, color

Usage Notes

• Not a replacement for <select> -- users can still enter values not in the list.
• Provides suggestions, not restrictions.
• Browser styling of the dropdown is limited.
• Some screen readers may not announce suggestions.

Example

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

---

<fieldset>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset

Description

The <fieldset> element is used to group several form controls and labels together within a web form. It provides semantic grouping and visual organization of related form fields.

Key Attributes

Attribute	Description
disabled	Boolean attribute that disables all form controls inside the fieldset (except those in <legend>). Disabled controls will not be editable or submitted.
form	Links the fieldset to a <form> by referencing the form's id, even if the fieldset is not nested inside it.
name	Specifies the name associated with the group.

Usage Notes

• The first <legend> element nested in the fieldset provides its caption and should be the first child.
• Displays as block by default with a 2px groove border and padding.
• When disabled, all descendant form controls become disabled except those inside the <legend> element.
• Implicit ARIA role: group.
• DOM Interface: HTMLFieldSetElement.

Example

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

---

<input>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input

Description

The <input> element creates interactive controls for web-based forms to accept data from the user. It is one of the most powerful and complex HTML elements due to the numerous combinations of input types and attributes.

Input Types (24 total)

Type	Purpose
button	Push button with no default behavior
checkbox	Single value selection/deselection
color	Color picker control
date	Date input (year, month, day)
datetime-local	Date and time without timezone
email	Email address field
file	File upload control
hidden	Non-displayed value submitted to server
image	Graphical submit button
month	Month and year input
number	Numeric input with validation
password	Obscured text field
radio	Single choice from multiple options
range	Numeric value selector (slider)
reset	Form reset button
search	Search string input
submit	Form submission button
tel	Telephone number field
text	Single-line text (default)
time	Time input
url	URL field with validation
week	Week and year input

Key Attributes

Attribute	Applicable Types	Purpose
type	All	Specifies the input control type
name	All	Form control identifier for submission
value	All	Control's initial/current value
id	All	Unique element identifier
required	Most	Makes input mandatory
disabled	All	Disables user interaction
readonly	Text-like	Prevents value editing
placeholder	Text-like	Hint text when empty
min / max	Numeric/date	Value range limits
minlength / maxlength	Text-like	Character count limits
pattern	Text-like	Regex validation pattern
step	Numeric/date	Incremental value steps
autocomplete	Most	Form autofill hint
list	Most	Associates with <datalist>
checked	Checkbox/radio	Pre-selected state
multiple	Email/file	Allow multiple values

Usage Notes

• Labels required: Always pair inputs with <label> elements for accessibility.
• Placeholders are not labels: Placeholders disappear when typing and are not accessible to all screen readers.
• Client-side validation: Use constraint attributes (required, pattern, min, max) for browser validation, but always validate server-side as well.
• Default type: If type is not specified, it defaults to text.
• Form association: Use name attribute for form submission; inputs without name are not submitted.
• CSS pseudo-classes: Style with :invalid, :valid, :checked, :disabled, :placeholder-shown, etc.

Example

<label for="name">Name (4 to 8 characters):</label>
<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

---

<label>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label

Description

The <label> element represents a caption for an item in a user interface. It associates descriptive text with form controls to enhance usability and accessibility.

Key Attributes

Attribute	Description
for	The id of the labelable form control to associate with this label. JavaScript reflection: htmlFor.

Associating Labels with Controls

Explicit association (recommended):

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

Implicit association:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Combined (both methods for maximum compatibility):

<label for="peas">
  I like peas.
  <input type="checkbox" name="peas" id="peas" />
</label>

Labelable Elements

Labels can be associated with: <button>, <input> (except type="hidden"), <meter>, <output>, <progress>, <select>, and <textarea>.

Accessibility Guidelines

Do:

• Use explicit association with the for attribute for broad tool compatibility.
• Place context (like links to terms) before the form control.
• Use <legend> within <fieldset> for form section titles.

Do not:

• Place interactive elements (links, buttons) inside labels -- it makes form controls difficult to activate.
• Use heading elements inside labels -- it interferes with assistive technology navigation.
• Add labels to <input type="button"> or <button> elements (they have built-in labels via their content/value).

---

<legend>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend

Description

The <legend> element represents a caption for the content of its parent <fieldset>. It provides a semantic way to label grouped form controls.

Key Details

• Must be the first child of a <fieldset> element.
• Provides an accessible label for the entire fieldset group.
• Only supports global attributes (no element-specific attributes).
• Can contain phrasing content and headings (h1--h6).
• DOM Interface: HTMLLegendElement.

Example

<fieldset>
  <legend>Choose your favorite monster</legend>

  <input type="radio" id="kraken" name="monster" value="K" />
  <label for="kraken">Kraken</label><br />

  <input type="radio" id="sasquatch" name="monster" value="S" />
  <label for="sasquatch">Sasquatch</label>
</fieldset>

legend {
  background-color: black;
  color: white;
  padding: 3px 6px;
}

---

<meter>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter

Description

The <meter> element represents a scalar value within a known range or a fractional value. It is commonly used to display measurements like fuel levels, temperature, disk usage, or ratings.

Key Attributes

Attribute	Default	Description
value	0	Current numeric value (must be between min and max).
min	0	Lower bound of the measured range.
max	1	Upper bound of the measured range.
low	min value	Upper bound of the "low" end of the range.
high	max value	Lower bound of the "high" end of the range.
optimum	--	Optimal numeric value; indicates the preferred range section.

Usage Notes

• Unless the value is between 0 and 1, define min and max to ensure value falls within the range.
• Browsers color the meter bar differently based on whether the value is below low, between low and high, above high, or relative to optimum.
• Cannot contain nested <meter> elements.
• Implicit ARIA role: meter.

Difference from <progress>

• <meter>: Displays a scalar measurement within a range (e.g., temperature, disk usage).
• <progress>: Displays task completion progress from 0 to max.

Example

<!-- Simple battery level -->
<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

<!-- With low/high ranges -->
<p>
  Student's exam score:
  <meter low="50" high="80" max="100" value="84">84%</meter>
</p>

<!-- Complete example with optimum -->
<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

---

<optgroup>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup

Description

The <optgroup> element creates a grouping of options within a <select> element, allowing you to organize related options into labeled groups.

Key Attributes

Attribute	Description
label	The name of the option group (mandatory). Browsers display this as a non-selectable label in the UI.
disabled	Boolean attribute. When set, all options in this group become non-selectable and appear greyed out.

Usage Notes

• Must be a child of a <select> element.
• Contains one or more <option> elements.
• Cannot be nested within other <optgroup> elements.
• The label attribute is mandatory.
• Implicit ARIA role: group.

Example

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
  <optgroup label="Extinct Groups" disabled>
    <option>Stegosaurus</option>
  </optgroup>
</select>

---

<option>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option

Description

The <option> element defines items contained within <select>, <optgroup>, or <datalist> elements. It represents individual menu items or selectable options.

Key Attributes

Attribute	Description
value	The value submitted with the form if the option is selected. If omitted, the element's text content is used.
selected	Boolean attribute that marks the option as initially selected. Only one <option> per <select> (without multiple) can have this attribute.
disabled	Boolean attribute that disables the option (greyed out, no interaction). Options are also disabled if their <optgroup> ancestor is disabled.
label	Text label for the option. If not defined, the element's text content is used.

Context of Use

• Within <select>: Lists selectable options; users choose one (or multiple if multiple attribute is set on the select).
• Within <optgroup>: Groups related options together.
• Within <datalist>: Provides autocomplete suggestions for <input> elements.

Usage Notes

• End tag is optional if immediately followed by another <option> or <optgroup>.
• Implicit ARIA role: option.

Example

<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster" disabled>Hamster</option>
  <option value="parrot" selected>Parrot</option>
</select>

---

<output>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output

Description

The <output> element is a container element that displays the results of a calculation or the outcome of a user action. It is form-associated and is implemented as an ARIA live region by most browsers, meaning assistive technology will announce changes automatically.

Key Attributes

Attribute	Description
for	Space-separated list of element ids that contributed to the calculation.
form	Associates the output with a specific <form> by its id (overrides ancestor forms).
name	The element's name; used in form.elements API.

Usage Notes

• The <output> value, name, and contents are not submitted with the form.
• Implemented as an aria-live region; assistive technology announces changes automatically.
• Must have both opening and closing tags.

Example

<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

<script>
  const form = document.getElementById("example-form");
  form.addEventListener("input", () => {
    const result = form.elements["a"].valueAsNumber +
                   form.elements["b"].valueAsNumber;
    form.elements["result"].value = result;
  });
</script>

---

<progress>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress

Description

The <progress> element displays a progress indicator showing the completion of a task, typically rendered as a progress bar.

Key Attributes

Attribute	Description
max	Total amount of work required. Must be greater than 0 and a valid floating-point number. Default: 1.
value	Completed amount (0 to max, or 0 to 1 if max is omitted). If omitted, shows an indeterminate progress bar.

Difference from <meter>

• Minimum value is always 0 (the min attribute is not allowed for <progress>).
• <progress> is specifically for task completion; <meter> is for scalar measurements.

Usage Notes

• Both opening and closing tags are required.
• Implicit ARIA role: progressbar.
• Text between tags is fallback content for older browsers (not an accessible label).
• Use the :indeterminate pseudo-class to style indeterminate progress bars.
• Remove the value attribute (element.removeAttribute('value')) to make an indeterminate progress bar.

Accessibility Considerations

• Always provide an accessible label using a <label> element, aria-labelledby, or aria-label.
• For page sections that are loading: set aria-busy="true" on the section being updated, use aria-describedby to link to the progress element, and remove aria-busy when loading completes.

Example

<!-- Basic progress bar -->
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>

<!-- Accessible with implicit label -->
<label>
  Uploading Document: <progress value="70" max="100">70%</progress>
</label>

<!-- Indeterminate (no value attribute) -->
<progress max="100"></progress>

---

<select>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select

Description

The <select> element represents a control that provides a menu of options, allowing users to select from a dropdown list of choices.

Key Attributes

Attribute	Description
name	Specifies the name of the control for form submission.
multiple	Boolean attribute allowing selection of multiple options.
size	Number of visible rows in a scrolling list box (default: 0).
required	Boolean attribute requiring a non-empty option selection.
disabled	Boolean attribute preventing user interaction.
autofocus	Boolean attribute giving focus to the control on page load.
form	Associates the select with a specific form by ID.
autocomplete	Provides hints for autocomplete behavior.

Usage Notes

• Each option is defined with nested <option> elements.
• Use <optgroup> to group related options visually.
• Use <hr> elements to create visual separators between options.
• The value attribute on <option> elements specifies data submitted to the server.
• If no value attribute exists on an option, the option's text content is used.
• Without a selected attribute, the first option defaults as selected.
• Multiple selections with multiple attribute are submitted as name=value1&name=value2.

Accessibility Considerations

• Associate with labels using <label> with for attribute matching the select's id.
• Implicit ARIA roles: combobox (single select), listbox (multiple or size > 1).

Example

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>

---

<textarea>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea

Description

The <textarea> element represents a multi-line plain-text editing control for allowing users to enter sizeable amounts of free-form text (e.g., comments, feedback, reviews).

Key Attributes

Attribute	Description
rows	Number of visible text lines (default: 2).
cols	Visible width in average character widths (default: 20).
name	Control name for form submission.
id	For associating with <label> elements.
placeholder	Hint text displayed to the user.
maxlength	Maximum string length (UTF-16 code units).
minlength	Minimum string length (UTF-16 code units).
wrap	Line wrapping behavior: soft (default), hard, or off.
disabled	Boolean; disables user interaction.
readonly	Boolean; user cannot modify content but it remains focusable and submittable.
required	Boolean; user must fill in a value.
autocomplete	on or off for browser auto-completion.
spellcheck	true, false, or default for spell-checking behavior.
autofocus	Boolean; receives focus on page load.

Usage Notes

• Initial content goes between opening and closing tags (not as a value attribute).
• Use .value property in JavaScript to get/set content; .defaultValue for the initial value.
• Resizable by default; disable resizing with resize: none in CSS.
• Use :valid and :invalid pseudo-classes for styling based on minlength/maxlength/required constraints.

Example

<label for="story">Tell us your story:</label>

<textarea
  id="story"
  name="story"
  rows="5"
  cols="33"
  placeholder="Enter your feedback here..."
  maxlength="500"
  required>
It was a dark and stormy night...
</textarea>

textarea {
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  resize: vertical;
}

textarea:invalid {
  border-color: red;
}

textarea:valid {
  border-color: green;
}