HTML Input Type Playground

HTML5 defines 22+ input types including: text, password, email, url, search, tel, number, date, time, datetime-local, month, week, color, range, file, checkbox, radio, submit, reset, button, image, and hidden. Each type provides specialized input behavior, keyboard layouts on mobile devices, and built-in validation. Unknown types gracefully fall back to type="text".

Several input types optimize mobile keyboards for specific data entry:

• email – shows @ symbol and .com keys
• url – shows / and .com keys
• tel – shows numeric telephone keypad
• number – shows numeric keypad with decimal
• search – shows search/enter key instead of return
• date/time types – trigger native date/time pickers

Disabled (disabled): The input cannot be focused, its value is not submitted with the form, and it appears grayed out. Readonly (readonly): The input can be focused and tabbed to, its value is submitted with the form, but the user cannot modify the content. Use readonly when you want to display pre-filled data that should be submitted, and disabled when the field should be completely excluded from form submission.

Input types like date, time, datetime-local, month, and week trigger the browser's native date/time picker UI. On desktop Chrome/Edge, a clean calendar popup appears. On Safari, a different native picker is used. On mobile devices (iOS/Android), the OS-level date spinner or calendar is shown. This eliminates the need for JavaScript date picker libraries for basic use cases. The value format for date is always YYYY-MM-DD regardless of display format.

type="hidden" creates an invisible input field that stores data in the DOM without any visual representation. Common use cases include CSRF tokens, user IDs, session identifiers, or any server-generated data that needs to be submitted with a form but should not be seen or modified by users. The value is still visible in the page source and can be inspected via browser DevTools, so never store sensitive secrets in hidden fields.

Yes! The pattern attribute accepts a regular expression that the input value must match for form validation to pass. For example, pattern="[A-Za-z]{3,}" requires at least 3 alphabetic characters. Combined with required and title (for custom error messages), you can create powerful client-side validation without JavaScript. The title attribute text appears as a tooltip when validation fails.

Checkboxes allow multiple independent selections – each checkbox toggles on/off individually. Radio buttons with the same name attribute form a mutually exclusive group – selecting one automatically deselects the others. Use checkboxes for "select all that apply" scenarios and radio buttons for "choose one" scenarios. Both use the checked attribute to set a default selection.

type="image" creates a graphical submit button using an image specified by the src attribute. When clicked, it submits the form along with the x/y coordinates of the click position (as name.x and name.y parameters). This was historically used for image-based submit buttons and server-side image maps. For modern web apps, consider using type="submit" with CSS-styled buttons or inline SVG icons for better accessibility and control.