113 commands · 8 cheat sheets · HTML

Forms and Interaction master quick reference

Browse 113 commands from 8 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.

Forms and Interaction · 12 commands

HTML Buttons and Native Controls Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Neutral button<button type="button">Preview</button>View examples
Submit button<button type="submit">Save</button>View examples
Reset button<button type="reset">Reset</button>View examples
Disable a control<button type="button" disabled>Unavailable</button>View examples
Associate with another form<button type="submit" form="profile"> Save profile </button>View examples
Single select<select name="region"> <option value="sa">South America</option> </select>View examples
Multiple select<select name="roles" multiple> <option>Editor</option> </select>View examples
Group options<optgroup label="Americas"> <option value="br">Brazil</option> </optgroup>View examples
Known progress<progress value="65" max="100">65%</progress>View examples
Unknown progress<progress>Loading</progress>View examples
Scalar measurement<meter min="0" max="100" low="30" high="80" optimum="90" value="72"> 72 </meter>View examples
Calculation output<output for="price quantity" name="total">0</output>View examples

Forms and Interaction · 13 commands

HTML Clipboard and Web Share APIs Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Copy plain textawait navigator.clipboard.writeText(text)View examples
Read plain textconst text = await navigator.clipboard.readText()View examples
Write multiple formatsawait navigator.clipboard.write([new ClipboardItem({ 'text/plain': plainBlob, 'text/html': htmlBlob })])View examples
Inspect clipboard itemsconst items = await navigator.clipboard.read()View examples
Check a write typeClipboardItem.supports('image/png')View examples
Customize a copyevent.clipboardData.setData('text/plain', value)View examples
Inspect a pasteconst text = event.clipboardData.getData('text/plain')View examples
Replace default pasteevent.preventDefault()View examples
Detect API availabilityif (isSecureContext && navigator.clipboard) { /* enhance */ }View examples
Delegate clipboard accessPermissions-Policy: clipboard-read=(self), clipboard-write=(self)View examples
Open the share chooserawait navigator.share({ title, text, url })View examples
Validate file sharingnavigator.canShare?.({ files })View examples
Register a PWA share target"share_target": { "action": "/share/", "method": "POST", "params": { "text": "text" } }View examples

Forms and Interaction · 18 commands

HTML Constraint Validation API Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Require a value<input id="email" name="email" type="email" required>View examples
Constrain text length<input name="username" minlength="3" maxlength="24">View examples
Require a text pattern<input name="code" pattern="[A-Z]{3}-[0-9]{4}" title="AAA-1234">View examples
Constrain a number<input name="quantity" type="number" min="1" max="20" step="1">View examples
Check validation eligibilityif (control.willValidate) inspect(control.validity)View examples
Inspect the validity stateconst { valueMissing, typeMismatch, valid } = email.validityView examples
Read the browser messageconst message = control.validationMessageView examples
Check one controlconst valid = control.checkValidity()View examples
Check a whole formconst valid = form.checkValidity()View examples
Report invalid controlsconst valid = form.reportValidity()View examples
Capture invalid eventsform.addEventListener('invalid', handleInvalid, true)View examples
Set a custom errorconfirmation.setCustomValidity('Email addresses must match.')View examples
Clear a custom errorconfirmation.setCustomValidity('')View examples
Request normal submissionform.requestSubmit(saveButton)View examples
Submit without validationHTMLFormElement.prototype.submit.call(form)View examples
Disable submit-time validation<form action="/import" method="post" novalidate>View examples
Bypass validation for one action<button type="submit" formnovalidate name="action" value="draft"> Save draft </button>View examples
Style invalid user inputinput:user-invalid { border-color: var(--error-color); }View examples

Forms and Interaction · 13 commands

HTML contenteditable and Editing Events Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Create a rich-text host<div contenteditable="true" aria-label="Post body"> </div>View examples
Create a plain-text host<div contenteditable="plaintext-only" aria-label="Summary"> </div>View examples
Opt out inside a host<span contenteditable="false">Locked token</span>View examples
Inspect effective stateeditor.isContentEditableView examples
Observe editing intenteditor.addEventListener('beforeinput', handleBeforeInput)View examples
Read operation typeevent.inputType === 'insertText'View examples
React after mutationeditor.addEventListener('input', saveDraft)View examples
Read plain textconst value = editor.textContentView examples
Set trusted plain texteditor.replaceChildren(document.createTextNode(value))View examples
Focus a nested host<div contenteditable="true" tabindex="0"></div>View examples
Suggest a keyboard<div contenteditable="plaintext-only" inputmode="numeric"> </div>View examples
Request spellchecking<div contenteditable="true" spellcheck="true"></div>View examples
Render saved text safelypreview.textContent = savedValueView examples

Forms and Interaction · 15 commands

HTML Disclosures, Dialogs, and Popovers Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Create a disclosure<details> <summary>More options</summary> <p>Details</p> </details>View examples
Open initially<details open> <summary>Status</summary> <p>Ready</p> </details>View examples
Group disclosures<details name="faq"> <summary>Question</summary> <p>Answer</p> </details>View examples
Declare a dialog<dialog id="settings"><p>Settings</p></dialog>View examples
Open modallydocument.querySelector('#settings').showModal()View examples
Open non-modallydocument.querySelector('#settings').show()View examples
Close with a resultdocument.querySelector('#settings').close('saved')View examples
Submit and close<form method="dialog"> <button value="cancel">Cancel</button> </form>View examples
Style the modal backdropdialog::backdrop { background: rgb(0 0 0 / 55%); }View examples
Declare an auto popover<div id="help" popover>Helpful text</div>View examples
Toggle declaratively<button popovertarget="help">Help</button>View examples
Choose an action<button popovertarget="help" popovertargetaction="show"> Show help </button>View examples
Keep a popover open<div id="status" popover="manual">Saved</div>View examples
Show with JavaScriptdocument.querySelector('#status').showPopover()View examples
Style an open popover[popover]:popover-open { opacity: 1; }View examples

Forms and Interaction · 13 commands

HTML Drag and Drop and DataTransfer Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Make a source draggable<li draggable="true" data-item-id="task-42"> Review draft </li>View examples
Write a typed payloadevent.dataTransfer.setData('application/x-task-id', taskId)View examples
Limit source operationsevent.dataTransfer.effectAllowed = 'move'View examples
Set drag feedbackevent.dataTransfer.setDragImage(preview, 16, 16)View examples
Accept drag entryzone.addEventListener('dragenter', event => event.preventDefault())View examples
Enable droppingzone.addEventListener('dragover', event => event.preventDefault())View examples
Show copy feedbackevent.dataTransfer.dropEffect = 'copy'View examples
Inspect offered formatsevent.dataTransfer.types.includes('text/plain')View examples
Inspect transfer items[...event.dataTransfer.items].some(item => item.kind === 'file')View examples
Read dropped textconst id = event.dataTransfer.getData('application/x-task-id')View examples
Complete a custom dropevent.preventDefault()View examples
Clean up after draggingsource.addEventListener('dragend', () => source.classList.remove('dragging'))View examples
Offer a button alternative<button type="button" data-action="move"> Move to Done </button>View examples

Forms and Interaction · 15 commands

HTML Forms Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Submit with POST<form action="/submit" method="post"></form>View examples
Submit with GET<form action="/search" method="get"></form>View examples
Label a control<label for="email">Email</label>View examples
Describe a control<input aria-describedby="email-help">View examples
Collect an email<input type="email" name="email">View examples
Collect a phone number<input type="tel" name="phone">View examples
Enable autofill<input name="email" autocomplete="email">View examples
Create a choice list<select name="role"></select>View examples
Add a select option<option value="developer">Developer</option>View examples
Require a value<input name="email" required>View examples
Limit text length<input name="username" minlength="3" maxlength="20">View examples
Require a pattern<input name="username" pattern="[A-Za-z0-9_]+">View examples
Submit the form<button type="submit">Save profile</button>View examples
Run a custom action<button type="button">Preview</button>View examples
Reset form fields<button type="reset">Reset fields</button>View examples

Forms and Interaction · 14 commands

Pointer Events and Gesture Handling Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Start pointer inputsurface.addEventListener('pointerdown', beginGesture)View examples
Check the primary pointerif (!event.isPrimary) returnView examples
Adapt to pointer typeconst kind = event.pointerTypeView examples
Declare handled gesturestouch-action: pan-y pinch-zoom;View examples
Cancel a supported defaultif (event.cancelable) event.preventDefault()View examples
Capture an active pointersurface.setPointerCapture(event.pointerId)View examples
Release pointer capturesurface.releasePointerCapture(pointerId)View examples
Handle lost capturesurface.addEventListener('lostpointercapture', cancelGesture)View examples
Track active contactsactivePointers.set(event.pointerId, { x: event.clientX, y: event.clientY })View examples
Read normalized pressureconst pressure = event.pressureView examples
Read coalesced samplesconst samples = event.getCoalescedEvents?.() ?? [event]View examples
Handle raw updates conditionallysurface.addEventListener('pointerrawupdate', drawSamples)View examples
Handle gesture cancellationsurface.addEventListener('pointercancel', cancelGesture)View examples
Remove gesture listenerscontroller.abort()View examples
Back to Forms and Interaction cheat sheets
CMDMEMO TERMINALREAD ONLY