forms forms forms
January 9, 2023 - Reading time: 24 minutes

Forms are inevitable on a web journey. Here are some commented examples to understand each component

Table of contents:

search field form

<form action="/search" role="search">
    <label for="search-input">Search articles</label>
   <input type="search" id="search-input" placeholder="Search…" name="q" />
  <input type="submit" value="Submit search" />
</form>

Let's take this search field form (from How to transfigure wireframes into HTML by Lara Aigmüller) as an example.

form tag -> to open an area in the document where the user can provide information
action attribute -> indicates an URL where the form data should be sent. If omitted, it defaults to current page.
role attribute -> for accessibility purposes (value is search to identify search functionnality)

label tag -> to help associate the text for an input element with the input element itself (clicking on the text will select the corresponding button; helpful for assistive technologies)
for attribute -> association method with an input id where values are the same. Another method could be:

<label>
<input type="search" id="search-input" placeholder="Search…" name="q" />
 Search articles
</label>

input tag -> allows several ways to collect data
type attribute -> many possible values, see below
id attribute -> the most important attribute in the universe. Used to identify specific HTML elements. Each id attribute's value must be unique from all other id values for the entire page.
placeholder attribute -> used to give people a hint about what kind of information to enter into an input but this is actually not a best-practice for accessibility (users can confuse the placeholder text with an actual input value).
name attribute -> value to represent the data being submitted, mandatory to be processed on the server-side. Helps grouping radio buttons (selecting one deselects the other - see survey form example).
value attribute -> initial value (for submit and button types: text that will display) - for instance ->

Go back to Table of contents

contact form

<form method="post" action="./contact">
   <input id="name" type="text" name="name" value="" placeholder="Name" required>
   <input id="email" type="email" name="email" value="" placeholder="Email" required>
   <textarea id="message" rows="6" name="message" placeholder="Message" required></textarea>
   <div data-sitekey="..."></div>
   <button id="submit" name="submit" type="submit">Send email</button>
</form>

Let's take this contact form (from Bludit plugin) as an example.

form tag method attribute -> specifies how to send form-data

  • as URL variables (method="get")
    • better for non-secure data, like query strings (appends form-data into the URL in name/value pairs)
    • limited lenght of the URL (2048 characters)
  • as HTTP post transaction (method="post")
    • appends form-data inside the body of the HTTP request (data is not shown in URL)
    • has no size limitations

input tag required attribute -> data is mandatory to allow submission

div tag data-sitekey attribute -> I'll do some research on this topic later on. For now let's just say it's used to prevent spaming using CAPTCHA.

Question of the day: is there a "better" solution between button and input tag when type is submit? After some research I believe the answer is: no, functionnaly, it's identical. However, button elements are much easier to style and inner HTML content can be added. Note however that the first input element with a type of submit is automatically set to submit its nearest parent form element.

Go back to Table of contents

survey form

This is an example from FreeCodeCamp Responsive Web Design course:

<form action="https://freecatphotoapp.com/submit-cat-photo" target="_blank"> 
  <fieldset>
    <legend>Is your cat an indoor or outdoor cat?</legend>
    <label>
      <input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor
    </label>
    <label>
      <input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor
    </label>
  </fieldset>
  <fieldset>
    <legend>What's your cat's personality?</legend>
    <input id="loving" type="checkbox" name="personality" value="loving" checked> 
    <label for="loving">Loving</label>
    <input id="lazy" type="checkbox" name="personality" value="lazy">
    <label for="lazy">Lazy</label>
    <input id="energetic" type="checkbox" name="personality" value="energetic">
    <label for="energetic">Energetic</label>
  </fieldset>
  <input type="text" name="catphotourl" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

form tag, target attribute -> defines where to display the response after submitting the form. Default value is _self (ie current window)

fieldset tag -> used to group related inputs and labels together

legend tag -> acts as a caption for the content in the fieldset element

input tag
value atribute -> even if optionnal, it's best practice to include it with any checkboxes or radio buttons on the page. Otherwise, the form data would include name-value=on, which is not useful.
checked attribute -> force selection by default 

button tag type attribute submit value -> note this is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value. button tag should always have a type attribute because different browsers may use different default types.

Go back to Table of contents

input types

What type of input do you need?

Most common inputs types

  • no type equals text ie a one line text field of 20 characters
  • checkbox, radio - group with name attribute
  • email - has validation functionnalities included
  • password - one line text field where value is hidden - displays an alert if the site is not secured. Use the pattern attribute to define a regular expression that the password must match to be considered valid (for instance [a-z0-5]{8,} -> should match eight or more lowercase letters or the digits 0 to 5)
  • search

Special inputs types

  • color
  • time-related input types:
    • month (month, year)
    • date (day month year). Note you can use the min and max attributes to add restrictions to dates (for instance min="2000-01-02")
    • datetime-local (day month year hour minutes, local time)
    • week (week number)
    • time (hour minutes, local time)
  • file - to select a file. Use accept attribute to define what kind of files you may want
    <input type="file" accept="image/*,.pdf">
  • hidden - not displayed to users, can be used to transport additionnal information when the form is submitted. But do not use as a form of security because it is visible (and can be edited) using any browser's developer tools.
  • number - rejects non numerical values. Can use min and max attributes
  • range - displays an horizontal bar where exact value is not important (for instance: volume controller). Accepts min and max attributes
  • tel - to get a phone number
  • url - has validation parameters

Button inputs types

  • image - use src attribute for the image file and alt attribute in case it's missing
  • button - no particular behaviour defined. Displays value from value attribute if provided
    <input type="button" value="Let's play!">
  • submit - sends the form

Go back to Table of contents

some other input attributes

  • spellcheck: set to "false" to maximize security (otherwise spellcheck is run by a third-party service)
  • autocorrect: set to "off" in password field for instance
  • autocapitalize: set to "none" in password field for instance
  • autocomplete: precise what data can be automatically filled ("name", "new-password" etc., see list on MDN) or just set to "on" for non-sensible data and let the browser do the job
  • novalidate: if present, form-data (input) should not be validated when submitted

If type attribute is submit or image and if you want to proceed with a different action from the rest of the form with this input, use form+regularFormAttributeName to override form attributes for this specific button (ie formaction,  formenctype, formmethod, formtarget, formnovalidate

 <form action="/action_page.php">
  <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">
  <input type="submit" formaction="/action_page2.php" formenctype="multipart/form-data" formmethod="post" formtarget="_blank" formnovalidate="formnovalidate" value="Submit as...">
</form>

Go back to Table of contents

textarea, select, datalist and output

<textarea>

Allow text edition on several lines. Use if you dare:

  • rows and cols attribues to define the size
  • maxlength and minlength attributes (based on the number of characters)
  • required attribute to avoid sending nothing
  • wrap attribute to manage going to next line when text reaches the area's edge (hard, soft, off)
  • default displayed value should be written between the opening an closing tag
<textarea name="textarea" rows="10" cols="50">Please write here.</textarea>

<select>

Use for dropdown lists. Example from W3Schools:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3" multiple>
 <optgroup label="Swedish Cars">
  <option value="volvo" selected>Volvo</option>
  <option value="saab">Saab</option>
 </optgroup>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

selected attribute defines a pre-selected option.

size attribute defines the number of visible values

multiple attribute allow the selection of several options

Group options with optgroup element. Useful when lists are longs.

<datalist>

Specifies a list of pre-defined options for an input tag, showed depending on the user's input. Example from W3Schools:

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

<output>

Represents the result of a calculation. Example from W3Schools:

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0 <input type="range"  id="a" name="a" value="50"> 100 +
    <input type="number" id="b" name="b" value="50"> =
  <output name="x" for="a b"></output>
  <br/>
  <input type="submit">
</form>

Go back to Table of contents

CSS associates

For form and input tags :valid and :invalid  pseudo-classes

Search

Categories