Forms

Forms and the pieces that go in them: fields in a row, options under a choice, choice rows, a question card, matching, sorting and a card sort.

Page Setup and Forms App

Put cmu-app on <body> on pages with the CMU header and footer, or cmu-framed on pages shown inside another tool (such as a Canvas LTI frame) without them. cmu-app also styles forms: a label in small gray capitals over each text box or menu, which fills its column; a legend in the same style over each group of checkboxes or radio buttons, listed without bullets, with each label beside its box; and room under each. On any page with the kit, checkboxes, radio buttons, sliders and progress bars are CMU red. A p.cmu-hint right after a field (or after a fieldset's list) sits just under it, with the room below moved under the hint; point the field's aria-describedby at it. Add inline to a text box or menu to keep its natural width. Group checkboxes in a fieldset so the legend names them for screen readers. A legend that asks a question, as in Choice Rows, Matching or Sorting, stays bold and in sentence case.

body.cmu-app, body.cmu-framed

Fields in a Row App

Short fields that belong together on one line, each with its label above: a width and a height, a date range, a first and last name. Wrap each label and its field in a div inside cmu-field-row; a separator such as × or "to" goes between them in a span with aria-hidden="true", since the labels already say what each field is. A hint under the row works as under a single field. When the row is too narrow, the fields wrap onto the next line. For short values, such as numbers or codes, add cmu-field-row--short so the boxes keep a short width instead of sharing the whole row. To name the pair, such as Size for a width and a height, put the row in a fieldset with a <legend>: the legend takes the small capitals, and the fields’ own labels turn quieter, in ordinary case.

cmu-field-row, cmu-field-row--short, cmu-hint

Options Under a Choice App

Options that only apply to one choice go inside that choice's list item, lined up with its label, in a cmu-sub-options block. The kit shows them only while that choice is picked, with no script: put the radio button or checkbox right inside the list item, before its label. Menus and text boxes inside fill the block, as they fill a column elsewhere. Try it: pick A Logo.

cmu-sub-options

Choice Rows App

A question with a few answers, each a large row that's one target: the radio button or checkbox and its words, with the box around it, so it's easy to pick on a phone. Put each <input> inside its <label>, and the question in the fieldset's <legend>. The picked row turns red. Use checkboxes the same way when more than one answer can be picked.

cmu-choices

Question Card App

One question at a time, such as in a training, a quiz or a poll: a white card on a colored band, with the question over a rule and its choice rows. The card is cmu-question on the form; the band is the template's content wide with a color, here red. Checking the answer, and what happens next, is up to the app.

• Under the choices, cmu-question-buttons puts a forward arrow ( ▶ ) on the right and, when people can go back, a back arrow ( ◀ ) on the left (cmu-question-back).
• On the last question, the forward arrow gives way to Submit, centered, so someone clicking forward doesn't submit by accident.
• Give each arrow an aria-label and a matching title, "Previous question" and "Next question," as with the arrows in Sorting.

cmu-question, cmu-question-buttons, cmu-question-back, cmu-choices

Matching App

Items to pair with answers, such as terms and what they mean, drawn as puzzle pieces: each item has a socket, and the menu of answers beside it a tab. Once an answer is picked, the two pieces snap together. It's a menu, not dragging, so it works with a keyboard, a screen reader and a phone. Each menu starts on "Choose," with an empty value, and has a <label> naming its item. Under 600px the menu goes under its item, without the puzzle shapes.

cmu-match

Sorting AppScript

Items to put in order, such as the steps of a task: a numbered list with up and down arrow buttons on each item, which cmu-app.js adds. Each button names its item for screen readers, focus stays on the item as it moves and its new place is read out. Put a hidden <input> in each item; it moves with the item, so the form sends the new order. Without the script, the list keeps its first order.

cmu-sort, data-cmu-sort

Card Sort App

Things to sort into groups, such as uses of AI into public and protected tools: each thing is a white card, with a large tile for each group at its bottom. Cards sit side by side, as many as fit, and one above another on phones. Picking a tile turns it red. Each card is a <fieldset> whose <legend> holds its words, with a radio button in each tile, so keyboards and screen readers work as with any radio buttons. Put the cards on a colored band, as with the question card.

cmu-card-sort