HTML Forms – Identifying inputs

Label

The <label> element is the most formal way to tie an input to it’s label. This is the most important element when building accessible forms. When you implement it correctly, screen readers and other software will speak aloud the element’s label along with any other related instructions.

This is how we use it:

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

You associate the label to the input via the for and id attributes.

This will get the screen reader to read something like “Name. Edit text”

Another bonus of setting a label to tie to it’s input, is when you use a checkbox or radio, it will actually make the label click-able and correctly check or uncheck the box.

<div>
  <input type="checkbox" id="coding" name="interest" value="coding" checked>
  <label for="coding" style="display: inline-block">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music" style="display: inline-block">Music</label>
</div>

Coding

Music

Fieldsets and legends

The <fieldset> element can be used to group inputs together, semantically and/or with styles. You can add a label to a fieldset by using the <legend> tag. The legend is used to formally describe the fieldset that it is inside.

Assistive software like screen readers will read the legend of a fieldset with each input.

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

The screen reader, for the above code, would speak something like “Fruit juice size small” for the first input, and “Fruit juice size medium” for the second and so on.

This use case is one of the most important when considering accessibility. You should nest each radio group inside of a fieldset.

It can also be used to break up forms into sections. But make sure that it makes sense. It sometimes is better to break up the form across multiple pages rather than sectioning off a single page.

Listen to it on screen reader software and make sure that it makes sense and isn’t too complicated to understand.

February 17, 2018February 19, 2018

HTML Inputs

In your HTML you often will want to collect information from the user. We generally do this through the use of different types of inputs. These might be different kinds of text inputs or some kind of choice inputs. Most of these will be implemented using the <input> tag with a type attribute.

Input Type Text

<input type="text"> Is used for a one-line text input.

<form>
    Favorite Food:<br>
    <input type="text" name="favoritefood"><br>
    Favorite Drink:
    <input type="text" name="favoritedrink"><br>
  </form>

How this will look on the page:

Input Type Password

<input type="password"> Is used for an obfuscated password input.

<form>
    User name:<br>
    <input type="text" name="username"><br>
    Password:
    <input type="password" name="password"><br>
  </form>

How this will look on the page:

Input Type Email

<input type="email"> Is used as an email input field.
Some browsers will automatically validate email format on submit.
Some mobile browsers will use a special keyboard for email inputs, that includes a “.com” button etc.

<form>
    E-Mail:<br>
    <input type="email" name="email"><br>
  </form>

How this will look on the page (try it on mobile):

Input Type File

<input type="file"> Is used for a file-select input, with a “Browse” or “Choose file” button for file uploads.

<form>
    Select File:<br>
    <input type="file" name="file"><br>
  </form>

How this will look on the page:

Input Type Range

<input type="range"> Is used as a selector for a number within a certain range. The default range is 0 to 100, but you can define those restrictions

<form>
    Order Quantity:<br>
    <input type="range" name="qty" min="0" max="10"><br>
  </form>

How this will look on the page:

Input Type Hidden

<input type="hidden"> Is used to include data in your form to be submitted, that you don’t want to actually display on the page.

Warning: It will still be in the markup, so don’t store sensitive data here.

<form>
  Favorite Food:<br>
  <input type="text" name="favoritefood"><br>
  Favorite Drink:
  <input type="text" name="favoritedrink"><br>

  <input type="hidden" id="sessionid" name="sessionid" value="x8ysia7">
  <button type="submit">Submit</button>
</form>

How this will look on the page:

Input Placeholder attribute

<input type="text" placeholder="pattern"> Is used as a hint that describes the expected value for the input.
It is allowed on input types: text, search, url, tel, email, and password.

Warning: Do not use the placeholder attribute in place of a <label> element. The label describes the role of the input. The placeholder is just a hint. There are cases that the placeholder will not be shown or not understood correctly for accessibility, so the form must be understandable without it.

<form>
    Phone Number:<br>
    <input type="tel" name="tel" placeholder="(###) ###-####"><br>
  </form>

How this will look on the page:

Input Type Radio

<input type="radio"> Is used as a choice input where only one option may be chosen.

The name attribute is what will group these together as semantically belonging together as a group.

<form>
  Gender:<br>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other

How this will look on the page:

Input Type Checkbox

<input type="radio"> Is used as a choice input where multiple options may be chosen, or there is just an on/off or yes/no state.

The name attribute is what will be the data key if you are using a form submit action. The value for that key will be in the value attribute, if no value is provided, it will default to on. An unchecked checkbox will not send a value on a submit.

You can use the checked attribute to default a checkbox to checked.

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

How this will look on the page:

Choose your interests

Coding

Music

Select dropdown input

<select> Is it’s own input type that can have multiple options to choose from a dropdown.

You can provide a selected attribute to set a default. You can also provide a value attribute to specify the value saved when selected.

You can use the multiple attribute to allow for the user to ctrl-click multiple selections. But this can be a difficult interaction for users if they aren’t familiar with that functionality, and even more difficult when considering accessibility and people using only keyboards.

<select name="optionid">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3" selected>Option 3</option>
</select>

How this will look on the page:

You can use the <optgroup> element to break options into sections.

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

How this will look on the page:

Input Type Submit

You use the submit input type for the control, usually a button, that will submit the form data, generally to your back-end.

An input with type submit will be styled as a button, and the value attribute describes what the text on the button will say. If value is omitted, the browser will use it’s default.

<input type="submit" value="Send">

You can use your own custom element or button, but be aware that if there is only one <button> element inside a form, it will be treated as the submit action. So, you should get in the habit of always applying the type="submit" attribute.

January 23, 2018

Never console.log(objOrArray) and have to dig down into the items or properties again!

`console.table(data)` logs your data as a table in the console

console.table(data) can be used to log any array or enumerable properties of an object into a table format in the console.

This function is available in all modern browsers, except IE.

The function takes one mandatory argument, the data that you want to log. It must be an object or array. It has a second optional parameter which can define which columns that you want to display.

The first column in the table will be labeled (index). If data is an array, then its values will be the array indices. If data is an object, then its values will be the property names.

// logs a sortable table right in the console!
console.table(["one", "two", "three"]);

(index)	Values
0	“one”
1	“two”
2	“three”

Object with string properties


  const person = {
    firstName: "RJ",
    lastName: "Schmertz"
  }

  console.table(person);

(index)	Values
firstName	“RJ”
lastName	“Schmertz”

Array of objects


  const person1 = {
    firstName: "RJ",
    lastName: "Schmertz"
  }
  const person2 = {
    firstName: "Ryan",
    lastName: "Smith"
  }
  const person3 = {
    firstName: "Cassie",
    lastName: "Jones"
  }

  console.table([person1, person2, person3]);

(index)	firstName	lastName
0	“RJ”	“Schmertz”
1	“Ryan”	“Smith”
2	“Cassie”	“Jones”

Object whose properties are objects


  const person1 = {
    firstName: "RJ",
    lastName: "Schmertz"
  }
  const person2 = {
    firstName: "Ryan",
    lastName: "Smith"
  }
  const person3 = {
    firstName: "Cassie",
    lastName: "Jones"
  }

  const family = {};

  family.father = person1;
  family.brother = person2;
  family.sister = person3;


  console.table(family);

(index)	firstName	lastName
father	“RJ”	“Schmertz”
brother	“Ryan”	“Smith”
sister	“Cassie”	“Jones”

Restricting which columns are displayed


  const person1 = {
    firstName: "RJ",
    lastName: "Schmertz"
  }
  const person2 = {
    firstName: "Ryan",
    lastName: "Smith"
  }
  const person3 = {
    firstName: "Cassie",
    lastName: "Jones"
  }

  const family = {};

  family.father = person1;
  family.brother = person2;
  family.sister = person3;


  console.table([person1, person2, person3], ["firstName"]);

(index)	firstName
0	“RJ”
1	“Ryan”
2	“Cassie”

December 28, 2017January 24, 2018

HTML base elements

HTML `DOCTYPE`

The first line of an HTML document is the Doctype declaration. This is used to tell the browser what version of HTML you are using. DOCTYPEs are required for legacy reasons. HTML is responsible for informing the browser how text and objects will appear in the web page. DOCTYPE declaration is not an HTML tag. It is only a declaration and always appears at the first line of your HTML documents. There are a number of different doctype declarations that correspond to various versions of HTML.

HTML5 – does not have a formal DTD (Document Type Definition) in the form of a URL or other Formal Public Identifier

<!DOCTYPE html>

HTML 4.01 Strict – Does not allow Framesets, presentational or deprecated elements

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

etc …

HTML `lang` attribute

You can provide HTML Language Code Reference.

ISO Language Codes – The HTML lang attribute is used to declare the language of the web page, used by search engines and the browser. It is best practice to provide the primary language on the lang attribute on the root HTML tag.

In HTML5, the lang attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

In HTML 4.01, the lang attribute cannot be used with: <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, and <script>.

<html lang="en">
  ...
</html>

In XHTML, the language is declared inside the html tag as well


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>

You can find a list of the language codes here

HTML `HEAD` element

The <head> element is a container for all the head elements.

The <head> element can include a title for the document, scripts, styles, meta information, and more.

The following elements can go inside the <head> element:

<title> (this element is required in an HTML document)
Defines the Title in the browser tab
Used as the title when added to favorites
Displayed as the title in search engine results

<style>
Used to define style information for the HTML page. CSS

<base>
specifies the base URL and base target for all relative URLs in a page

<link>
Used to link external resources and stylesheets

<meta>
used to specify which character set is used, page description, keywords, author, and other metadata.

<script>
used to define client-side JavaScripts.

<noscript>
defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support script.

In HTML 4.01, the head element is required,
In HTML5 it may be omitted.

HTML Forms – Identifying inputs

Label

Fieldsets and legends

Share this:

HTML Inputs

Input Type Text

Input Type Password

Input Type Email

Input Type File

Input Type Range

Input Type Hidden

Input Placeholder attribute

Input Type Radio

Input Type Checkbox

Select dropdown input

Input Type Submit

Share this:

console.table(data) logs your data as a table in the console

Object with string properties

Array of objects

Object whose properties are objects

Restricting which columns are displayed

Share this:

HTML DOCTYPE

HTML lang attribute

HTML HEAD element

Share this:

`console.table(data)` logs your data as a table in the console

HTML `DOCTYPE`

HTML `lang` attribute

HTML `HEAD` element