Scribd
Upload
21 views4 pages

HTML Form Input Cheatsheet

This document serves as a comprehensive cheat sheet for HTML input tags and types, covering common <input> types, important <form> attributes, and HTML5 validation attributes. It includes JavaScript methods and events for form handling, along with accessibility tips and a short example of form validation with AJAX submission. Additionally, it provides quick reference tables for input types, form attributes, validation attributes, and JavaScript methods.

Uploaded by

Rohan Bharekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views4 pages

HTML Form Input Cheatsheet

This document serves as a comprehensive cheat sheet for HTML input tags and types, covering common <input> types, important <form> attributes, and HTML5 validation attributes. It includes JavaScript methods and events for form handling, along with accessibility tips and a short example of form validation with AJAX submission. Additionally, it provides quick reference tables for input types, form attributes, validation attributes, and JavaScript methods.

Uploaded by

Rohan Bharekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Input Tags & Types — Form Cheat Sheet

(Cognizant Prep)
Compact revision sheet covering: all common <input> types, important <form> attributes, HTML5 validation
attributes, JavaScript form/input methods & events, accessibility tips, and short examples.

1. Common <input> Types (with notes)


text: Single-line text input. Use maxlength, minlength, pattern, placeholder.
password: Masked input for passwords.
email: Validates on email format. Use multiple attribute for multiple addresses.
tel: Telephone number — no built-in validation but useful for mobile keyboards.
url: Validates URL format.
number: Numeric input. Use min, max, step. Note: value is string; parse as number in JS.
range: Slider control. Use min, max, step; good for UX.
search: Search field (semantics/UX).
date: Date picker (YYYY-MM-DD). Browser dependent.
datetime-local: Date + time without timezone.
time: Time input (HH:MM).
month: Month and year input.
week: Week-year input.
color: Color picker (returns #rrggbb).
checkbox: Boolean toggle. Multiple checkboxes can share same name for arrays.
radio: Mutually exclusive options when sharing same name.
file: File upload. Use accept attribute and enctype="multipart/form-data" on form.
hidden: Hidden data sent with form.
submit: Submit button (type=submit). Triggers form submission.
reset: Reset form to initial values.
button: Generic button; handle via JS.
image: Image submit button (acts like submit).

2. Important <form> Attributes


action: URL where form data is sent.
method: GET (query string) or POST (request body). Use POST for sensitive data/file uploads.
enctype: How form data is encoded. e.g., application/x-www-form-urlencoded (default), multipart/form-data
(for files), text/plain.
target: Where to display response (_self, _blank, iframe name).
autocomplete: on/off - controls autofill.
novalidate: Disable native HTML5 validation.
accept-charset: Character encoding (e.g., UTF-8).
name / id: Identifiers for JS and server-side.
rel: rarely used on form; more common on links.

3. HTML5 Validation & Control Attributes


required: Field must be filled.
pattern: Regex pattern the value must match (JS regex without delimiters).
min / max: Numeric or date limits.
step: Increment step for number/date/range.
minlength / maxlength: Length constraints for text.
multiple: Allow multiple values (e.g., file, email).
placeholder: Hint text inside input.
readonly: Value can't be edited but will be submitted.
disabled: Disabled controls are not editable and not submitted.
autofocus: Auto-focuses the field on page load.

4. JavaScript — Important Methods, Properties & Events


Form methods
[Link]() — programmatic submit (bypasses submit button's default click?).
[Link]() — reset to initial values.
[Link]() — returns boolean; true if all controls are valid.
[Link]() — shows validation messages and returns boolean.
Constraint Validation API (input-level)
[Link]('msg') — set custom validation message (empty string clears).
[Link]() — true/false for single control.
[Link] — object with flags: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow,
rangeOverflow, tooLong, tooShort, stepMismatch, badInput, customError.
Common properties
[Link], [Link] (checkbox/radio), [Link] (FileList), [Link], [Link], [Link],
[Link]
Useful events
input — fires on value change while typing; change — fires on commit (blur or Enter).
submit — on form submit (use [Link]() to stop default).
invalid — fires when a control fails validation (cancelable).
focus, blur, keyup, keydown, input, change, click
FormData API
const fd = new FormData(form); [Link]('k','v'); fetch(url, {method:'POST', body: fd}); Useful for AJAX file
uploads.

5. Short Example: Form + Validation + AJAX submit


<!-- HTML -->
<form id="signup" action="/signup" method="post" enctype="multipart/form-data">
<label for="email">Email</label>
<input id="email" name="email" type="email" required placeholder="you@[Link]">

<label for="pwd">Password</label>
<input id="pwd" name="password" type="password" minlength="8" required>

<label><input type="checkbox" name="tos" required> Accept TOS</label>

<input type="file" name="avatar" accept="image/*">


<button type="submit">Sign up</button>
</form>

<!-- JS -->
<script>
const form = [Link]('signup');
[Link]('submit', async (e) => {
[Link](); // stop normal submit
if (![Link]()) {
[Link]();
return;
}
const fd = new FormData(form);
// Example: add extra value
[Link]('source','cognizant-bootcamp');
const res = await fetch([Link], {method: [Link], body: fd});
// handle response...
});
</script>

6. Quick Tips — What they often test (Cognizant)


Basic tasks: Create/validate a form, prevent default submission, show validation messages, collect form
data and send via fetch/XHR.
Edge cases: Empty required fields, mismatched pattern (email/phone), file input handling, multiple
checkboxes with same name.
Time-savers: Use built-in HTML5 validation for simple checks (type=email, required, pattern) and JS only for
custom rules.
Accessibility: Always pair with inputs; use aria-describedby for error messages.
Common mistakes: Relying on client-side validation only (server must validate too), forgetting enctype for
file uploads.
7. Quick Reference Table (compact)
Input types: text | password | email | tel | url | number | range | search | date | datetime-local | time | month |
week | color | checkbox | radio | file | hidden | submit | reset | button | image. Form attrs: action, method,
enctype, target, autocomplete, novalidate, accept-charset, name/id. Validation attrs: required, pattern,
minlength/maxlength, min/max/step, multiple, placeholder, readonly, disabled, autofocus. JS: [Link](),
[Link](), checkValidity(), reportValidity(), [Link](), FormData, fetch/XHR,
input/change/submit/invalid events.

You might also like