CSE 154

HTML5 UI Elements with JS

The HTML <form>

<form>s are a way to group objects that allow users to input information into a web page to add interactivity. Note that you don't need to put these elements in a form, but it can be useful for HTML5 validation attributes like required.

<form>
  Your name: <input type="text" size="10" maxlength="8" /> <br />
  Your favorite color:  <input type="text" size="16" /> <br />
  The airspeed wing velocity of a swallow:  <input type="number" size="4" min=0 /> 
  <button type="submit" value="submit" />Submit<button>
</form>

HTML

output

Table of HTML Form/UI Elements

The following is a (partial) list of HTML form elements with examples in these slides. For more information on form elements, make sure to check MDN.

• <button>
• Inline text inputs: <input type="text">
• Radio buttons: <input type="radio">
• Labels: <label>
• Checkboxes: <input type="checkbox">
• Multi-line text boxes: <textarea>
• Drop-down list: <select>

Using These HTML Form/UI Elements with JS

Each UI element has a value attribute you can access with JS to get the user's value/selection

Examples:

<input type="text" id="search-term" />
<input type="number" id="guess-count" />
<input type="radio" name="color-count" value="2"> 2
<input type="radio" name="color-count" value="4" checked> 4
<input type="checkbox" name="lettuce" checked> Lettuce
<input type="checkbox" name="tomatos" checked> Tomatos
<select id="pet-type">
  <option>Dog></option>
  <option>Cat></option>
  <option>Other></option>
</select>

HTML

let guesses = id("guess-count").value;
let chosenColorCount = qs("input[name='color-count']:checked").value;
let petType = id("pet-type").value;

JS

<button>

Performs an action, usually submitting data or resetting a form to the original values.

<button id="my-btn">Click me!</button>

HTML

Button's text appears inside tag; can also contain images

Input Element

The input element serves many roles, depending on its type attribute.

• type="text": Accepts single-line text input.
• type="number": Accepts single-line numerical input.
• type="radio": Accepts one of multiple options. Give multiple radio inputs the same name attribute to group them together.
• type="checkbox": Like radio, but accepts any number of the given options, not just one.

There are many more that you can look up on MDN, but these are thee ones you will see most in this class.

<input>

              <!-- 'q' happens to be the name of Google's required parameter -->
<input id="search-input" type="text" name="q" placeholder="Enter your search term"/>
<input id="guess-count" type="number" value="10" />
<input type="email" value="dubs@uw.edu" />

HTML

output

Input element is used to create many UI controls (an inline element that must be self-closed)

name attribute specifies name of query parameter to pass to server (not required)

type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ...

value attribute specifies control's initial text - used in JS to get input value...

Optional Attributes for <input> Fields

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In!" />

HTML

input attributes: disabled, maxLength, readonly, size, value

size attribute controls onscreen width of text field

maxlength limits how many characters the user is able to type into the field

Radio buttons: <input>

sets of mutually exclusive choices (inline)

<p>
  How many colors do you want in your rainbow?
  <label><input type="radio" name="color-count" value="2"> 2</label>
  <label><input type="radio" name="color-count" value="4" checked> 4</label>
  <label><input type="radio" name="color-count" value="6"> 6</label>
</p>

HTML

Grouped by name attribute (only one can be checked at a time)

Must specify a value for each one or else it will be sent as value on

Useful Selectors for Form/UI Elements

element[attribute="value"] {
  property: value;
  ...
}

input[name='color-count'] {
  opacity: 0.5;
}

output

Attribute selector: matches only elements that have a particular attribute value

Useful for controls because many share the same element (input) and a certain type (e.g. type="radio" or type="checkbox")

Can also use these selectors in JS with document.querySelector!

Using Attribute Selectors with qs to get a Selected Radio Button

function getColorCount() {
  let checkedBtn = qs("input[name='color-count']:checked");
  return colorCount = parseInt(checkedBtn.value); 
}

JS (example)

Remember that qs is an alias for document.querySelector

Labels for Form Elements

Oftentimes you want to label form elements with descriptive text, and/or have the form element get selected if the user clicks on the text. By surrounding the text with a label element, (or giving it a for attribute equal to the id of another form element), it will select that form element remotely when clicked.

Labels are also very important for screenreaders so that users can know what information they should be inputting (more information here).

Example Using Labels

<p>
  How many colors do you want in your rainbow?
  <input type="radio" name="color-count" value="2"> 2
  <input type="radio" name="color-count" value="4" checked> 4
  <input type="radio" name="color-count" value="6"> 6
</p>

HTML

<p>
  How many colors do you want in your rainbow?
  <label><input type="radio" name="color-count" value="2"> 2</label>
  <label><input type="radio" name="color-count" value="4" checked> 4</label>
  <label><input type="radio" name="color-count" value="6"> 6</label>
</p>

HTML

Try selecting the text for both examples - do you notice the difference?

Checkboxes: <input>

yes/no choices that can be checked and unchecked (inline)

<label><input type="checkbox" name="lettuce" /> Lettuce
<label><input type="checkbox" name="tomato" checked /> Tomato</label>
<label><input type="checkbox" name="pickles" checked /> Pickles</label>

HTML

output

None, 1, or many checkboxes can be checked at same time

Use checked boolean attribute in HTML to initially check the box (alternatively, checked="checked")

Text boxes: <textarea>

<textarea rows="4" cols="20">
  Type your comments here.  </textarea>

HTML

Initial text is placed inside textarea tag (optional)

Required rows and cols attributes specify height/width in characters

optional readonly attribute means text cannot be modified

Dropdown Menus

select elements represent dropdown menus. They contain option elements, which represent each option in the dropdown.

The value of the select element is equal to the value of the chosen option element.

<select id="pet-type">
  <option>Dog</option>
  <option>Cat</option>
  <option selected="selected">Rock</option>
  <option>Other</option>
</select>

HTML

Option element represents each choice

Optional selected attribute sets which one is initially chosen