A command button, also referred to as a push button, is a control that causes the application to perform some action when the user clicks it.

A standard button measures 75px wide and 23px tall, with a raised outer and inner border. They are given 12px of horizontal padding by default.

<button>Click me</button>
<input type="submit" />
<input type="reset" />

When buttons are clicked, the raised borders become sunken. The following button is simulated to be in the pressed (active) state.

<button>I am being pressed</button>

Disabled buttons maintain the same raised border, but have a "washed out" appearance in their label.

<button disabled>I cannot be clicked</button>

Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused.

<button>I am focused</button>

A drop-down list box allows the selection of only a single item from a list. In its closed state, the control displays the current value for the control. The user opens the list to change the value.

Dropdowns can be rendered by using the select and option elements.

5 - Incredible! 4 - Great! 3 - Pretty good 2 - Not so great 1 - Unfortunate

<select> <option>5 - Incredible!</option> <option>4 - Great!</option> <option>3 - Pretty good</option> <option>2 - Not so great</option> <option>1 - Unfortunate</option>
</select>

By default, the first option will be selected. You can change this by giving one of your option elements the selected attribute.

5 - Incredible! 4 - Great! 3 - Pretty good 2 - Not so great 1 - Unfortunate

<select> <option>5 - Incredible!</option> <option>4 - Great!</option> <option selected>3 - Pretty good</option> <option>2 - Not so great</option> <option>1 - Unfortunate</option>
</select>

At the top edge of the window, inside its border, is the title bar (also reffered to as the caption or caption bar), which extends across the width of the window. The title bar identifies the contents of the window.

Include command buttons associated with the common commands of the primary window in the title bar. These buttons act as shortcuts to specific window commands.

You can build a complete title bar by making use of three classes, title-bar, title-bar-text, and title-bar-controls.

<div class="title-bar"> <div class="title-bar-text">A Title Bar</div> <div class="title-bar-controls"> <button aria-label="Close"></button> </div>
</div>

We make use of aria-label to render the Close button, to let assistive technologies know the intent of this button. You may also use "Minimize", "Maximize", "Restore" and "Help" like so:

<div class="title-bar"> <div class="title-bar-text">A Title Bar</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div>
</div> <br /> <div class="title-bar"> <div class="title-bar-text">A Maximized Title Bar</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Restore"></button> <button aria-label="Close"></button> </div>
</div> <br /> <div class="title-bar"> <div class="title-bar-text">A Helpful Bar</div> <div class="title-bar-controls"> <button aria-label="Help"></button> <button aria-label="Close"></button> </div>
</div>

You can make a title bar "inactive" by adding inactive class, useful when making more than one window.

<div class="title-bar inactive"> <div class="title-bar-text">An inactive title bar</div> <div class="title-bar-controls"> <button aria-label="Close"></button> </div>
</div>

Every window has a boundary that defines its shape.

To give our title bar a home, we make use of the window class. This provides a raised outer and inner border, as well as some padding. We can freely resize the window by specifying a width in the container style.

<div class="window" style="width: 300px"> <div class="title-bar"> <div class="title-bar-text">A Complete Window</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div>
</div>

To draw the contents of the window, we use the window-body class under the title bar.

<div class="window" style="width: 300px"> <div class="title-bar"> <div class="title-bar-text">A Window With Stuff In It</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <div class="window-body"> <p>There's so much room for activities!</p> </div>
</div>

A status bar is a special area within a window, typically the bottom, that displays information about the current state of what is being viewed in the window or any other contextual information, such as keyboard state.

You can render a status bar with the status-bar class, and status-bar-field for every child text element.

<div class="window" style="width: 320px"> <div class="title-bar"> <div class="title-bar-text">A Window With A Status Bar</div> </div> <div class="window-body">
<p> There are just so many possibilities:</p>
<ul> <li>A Task Manager</li> <li>A Notepad</li> <li>Or even a File Explorer!</li>
</ul> </div> <div class="status-bar"> <p class="status-bar-field">Press F1 for help</p> <p class="status-bar-field">Slide 1</p> <p class="status-bar-field">CPU Usage: 14%</p> </div>
</div>

A tree view control is a special list box control that displays a set of objects as an indented outline based on their logical hierarchical relationship.

To render a tree view, use an ul element with the tree-view class. The children of this list (li elements), can contain whatever you'd like.

• We can put
• ✨ Whatever ✨
• We want in here

<ul class="tree-view"> <li>We can put</li> <li><strong style="color: purple">✨ Whatever ✨</strong></li> <li>We want in here</li>
</ul>

To make this a tree, we can nest further ul elements (no class needed on these). This will provide them with a nice dotted border and indentation to illustrate the structure of the tree.

To create expandable sections, wrap child lists inside of details elements.

• Table of Contents
• What is web development?
• CSS
  • Selectors
  • Specificity
  • Properties
• JavaScript

  • Avoid at all costs
  • Unless

    • Avoid
    • At
    • All
    • Cost
• HTML
• Special Thanks

<ul class="tree-view"> <li>Table of Contents</li> <li>What is web development?</li> <li> CSS <ul> <li>Selectors</li> <li>Specificity</li> <li>Properties</li> </ul> </li> <li> <details open> <summary>JavaScript</summary> <ul> <li>Avoid at all costs</li> <li> <details> <summary>Unless</summary> <ul> <li>Avoid</li> <li> <details> <summary>At</summary> <ul> <li>Avoid</li> <li>At</li> <li>All</li> <li>Cost</li> </ul> </details> </li> <li>All</li> <li>Cost</li> </ul> </details> </li> </ul> </details> </li> <li>HTML</li> <li>Special Thanks</li>
</ul>