Form Fields

While designing a Contact Form 7 (CF7) form on your website, you may need to .. [always include a link to CF7 in first paragraph]

[ ADD Background/Introduction ]

This article will show you how to [ADD article title summary ..] and …

Table of Contents #

item

In HTML forms, various form fields are available to collect different types of user input. These fields are defined using the <input> element with different type attributes, as well as other form-related elements. Here’s a comprehensive list of currently available HTML form fields:

`<input>` element types

text: A basic single-line text input field.
- Example: <input type="text" id="name" name="name">
password: A single-line text field where the entered characters are obscured (e.g., with dots or asterisks) for secure password entry.
- Example: <input type="password" id="password" name="password">
email: A single-line text field designed for email addresses. Browsers may provide basic validation to ensure the input resembles an email format.
- Example: <input type="email" id="email" name="email">
number: A field for entering numeric values. You can often specify constraints like min, max, and step.
- Example: <input type="number" id="quantity" name="quantity" min="1" max="10">
date: A control that allows users to select a date (year, month, and day), often presented with a date picker interface.
- Example: <input type="date" id="birthday" name="birthday">
time: A control for entering a time value (hour and minute).
- Example: <input type="time" id="appt" name="appt">
datetime-local: A control that allows users to select a date and time (without time zone).
- Example: <input type="datetime-local" id="meeting" name="meeting">
month: A control for selecting a month and year.
- Example: <input type="month" id="startmonth" name="startmonth">
week: A control for selecting a week and year.
- Example: <input type="week" id="startweek" name="startweek">
tel: A single-line text field intended for telephone numbers. Some mobile browsers might display a numeric keypad optimized for phone numbers.
- Example: <input type="tel" id="phone" name="phone">
url: A single-line text field for entering URLs. Browsers may provide basic validation to ensure the input resembles a URL format.
- Example: <input type="url" id="website" name="website">
range: A slider control that allows users to select a numeric value within a specified range (defined by min and max attributes).
- Example: <input type="range" id="volume" name="volume" min="0" max="100">
color: A control that displays a color picker interface, allowing users to select a color. The value is submitted in hexadecimal format.
- Example: <input type="color" id="favcolor" name="favcolor">
checkbox: A control that allows users to select one or more options from a set of choices. Multiple checkboxes can have the same name to represent a collection of selected values.
- Example: HTML

<input type="checkbox" id="option1" name="options" value="value1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="options" value="value2">
<label for="option2">Option 2</label>

radio: A control that allows users to select only one option from a set of choices. Radio buttons within the same group share the same name attribute.
- Example: HTML

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

file: A control that allows users to select one or more files from their local file system to be uploaded. The accept attribute can be used to specify the types of files the user can select.
- Example: <input type="file" id="upload" name="upload" accept="image/*">
submit: A button that submits the form data to the server (defined by the form’s action attribute).
- Example: <input type="submit" value="Submit">
reset: A button that resets all the form controls to their initial values.
- Example: <input type="reset" value="Reset">
image: A graphical submit button. You specify the image source using the src attribute.
- Example: <input type="image" src="submit.png" alt="Submit Button">
button: A general-purpose clickable button with no default behavior. You typically use JavaScript to define its functionality.
- Example: <input type="button" value="Click Me" onclick="myFunction()">
hidden: A control that is not displayed to the user but whose value is submitted with the form. This is often used to store data that the user doesn’t need to see or modify.
- Example: <input type="hidden" id="userId" name="userId" value="12345">
search: A single-line text field intended for search queries. Browsers might render it differently (e.g., with a clear button).
- Example: <input type="search" id="query" name="query">

Other form-related elements:

<textarea>: A multi-line text input control, allowing users to enter larger amounts of text. You can specify the visible dimensions using the rows and cols attributes.
- Example: <textarea id="message" name="message" rows="4" cols="50"></textarea>
<select>: Creates a drop-down list of options.
- <option>: Represents an individual option within a <select> element.
- <optgroup>: Used to group related options within a <select> element.
- Example: HTML

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

<button>: Defines a clickable button. Unlike <input type="button">, the <button> element can contain content like text, images, or other HTML elements. You can specify its type using the type attribute (submit, reset, or button).
- Example: <button type="submit">Send</button>
<fieldset>: Used to group related form elements. It visually creates a box around the grouped elements and can include a <legend>.
- <legend>: Defines a caption for the <fieldset> element.
- Example: HTML

<fieldset>
  <legend>Personal Information:</legend>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email">
</fieldset>

<datalist>: Specifies a list of pre-defined options for an <input> element. The <input> element’s list attribute must refer to the id of the <datalist>. This allows users to either select from the pre-defined options or enter their own value.
- Example: HTML

<label for="browser">Choose a browser:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<output>: Represents the result of a calculation or user action.
- Example: HTML

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="a" value="0"> +
  <input type="number" name="b" value="0"> =
  <output name="result" for="a b"></output>
</form>

<label>: Defines a label for a form control. Using labels is important for accessibility, as it associates the text with the form element, making it easier for users (especially those using assistive technologies) to understand the purpose of the control. You can associate a <label> with a control by using the for attribute, which should match the id of the form element.
- Example: <label for="username">Username:</label> <input type="text" id="username" name="username">

These form fields and related elements provide a wide range of options for creating interactive forms in HTML to collect various types of data from users. The specific attributes available for each field type can further customize their behavior and appearance.