HTML & CSS · 10 entries
<form action="url" method="GET|POST">
...
</form><form action="/api/subscribe" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>Note GET appends data to the URL (visible, cacheable, bookmarkable). POST sends data in the request body (for sensitive data and large payloads). Omitting method defaults to GET.
<input type="text|email|password|url|search|tel" name="field" id="field"><label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username" maxlength="30" required>
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="email" autocomplete="email">Note Different type values trigger different mobile keyboards and built-in validation. For example, type="email" shows an @ key on mobile and validates email format.
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100" value="50"><label for="quantity">Quantity (1-10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">Note Number inputs show spinners on desktop and numeric keyboards on mobile. The step attribute controls increment size. Use step="any" for decimal values.
<input type="date|time|datetime-local|month|week"><label for="start-date">Start Date:</label>
<input type="date" id="start-date" name="startDate" min="2026-01-01" max="2026-12-31">
<label for="meeting-time">Meeting Time:</label>
<input type="datetime-local" id="meeting-time" name="meetingTime">Note Date picker appearance varies significantly across browsers and platforms. The value format is always ISO 8601 (YYYY-MM-DD) regardless of display format. Use min and max to constrain the selectable range.
<input type="checkbox" name="field" value="val">
<input type="radio" name="group" value="val"><fieldset>
<legend>Notification Preferences</legend>
<label><input type="checkbox" name="notify" value="email"> Email</label>
<label><input type="checkbox" name="notify" value="sms"> SMS</label>
</fieldset>
<fieldset>
<legend>Priority</legend>
<label><input type="radio" name="priority" value="low"> Low</label>
<label><input type="radio" name="priority" value="high"> High</label>
</fieldset>Note Radio buttons with the same name attribute form an exclusive group where only one can be selected. Checkboxes allow multiple selections. Wrap each in a label for a clickable hit area.
<select name="field" id="field">
<option value="val">Label</option>
</select><label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
</optgroup>
</select>Note Use optgroup to categorize options. Add an empty first option as a placeholder. For multi-selection, add the multiple attribute, but consider checkboxes instead since multi-select is not intuitive for many users.
<textarea name="field" rows="n" cols="n"></textarea><label for="message">Your Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Type your message here..." maxlength="500"></textarea>Note Unlike input, the textarea value goes between the opening and closing tags, not in a value attribute. Use the CSS resize property to control whether users can resize it.
<label for="input-id">Text</label>
<input id="input-id"><label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname">
<!-- Or wrapping approach -->
<label>
Phone Number
<input type="tel" name="phone">
</label>Note Every form input must have a label for accessibility. The for attribute must match the input's id. Alternatively, wrap the input inside the label element to create an implicit association.
<input list="list-id">
<datalist id="list-id">
<option value="suggestion">
</datalist><label for="framework">Framework:</label>
<input type="text" id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
<option value="React">
<option value="Vue">
<option value="Angular">
<option value="Svelte">
<option value="Solid">
</datalist>Note Unlike select, datalist allows free-text entry in addition to the suggestions. The user is not forced to pick from the list. Browser rendering of suggestions varies.
required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"<input type="text" name="zipcode" required pattern="[0-9]{5}" title="Five digit zip code">
<input type="password" name="password" required minlength="8" maxlength="128">
<input type="number" name="age" min="18" max="120">Note Built-in validation runs on form submission and is bypassed by adding formnovalidate to the submit button or novalidate to the form. The title attribute provides a hint message shown when the pattern fails.