HTML Course 9.1 New input types (email, url, number, tel, search, etc.)

New Input Types in HTML5

HTML5 introduced several new <input> types to improve data validation, enhance user experience and provide specialized user interface controls. Below is an extensive overview of the most common types: email, url, number, tel, search, plus a few more for reference (range, color, date, time).

1. type=’email’

The email input type allows entry of one or more email addresses. Built-in validation checks for the presence of an @ and a valid domain.

• Attributes: multiple, required, maxlength, pattern, placeholder
• Validation: Ensures basic syntax—at least one @ and one dot in the domain portion.
• Mobile UI: Shows email-optimized keyboard on many devices.

Email:

       

Team Emails:

2. type=’url’

The url input type enforces URL formatting rules (protocol optional, but recommended). Browsers validate structure and protocol (e.g. http://, https://).

• Attributes: required, maxlength, pattern, placeholder
• Validation: Checks for a valid URL format.
• Mobile UI: May show keyboard with “/” and “.com” keys.

Website:

       
Blog URL (optional):

3. type=’number’

The number input type accepts numeric values and provides up/down controls. It enforces numeric parsing and can restrict range and step.

• Attributes: min, max, step (default step is 1), value, required, placeholder
• Validation: Value must be a valid number and respect min, max, step.
• Mobile UI: Numeric keypad on touch devices.

Age:

       
Rating (0.0 to 5.0):

4. type=’tel’

The tel input type is intended for telephone numbers. There is no built-in validation, but you can apply a pattern attribute for custom validation.

• Attributes: pattern, maxlength, placeholder, required
• Validation: None by default; use regex via pattern.
• Mobile UI: Telephone keypad on many devices.

Phone:

5. type=’search’

The search input type is a simple text field optimized for search queries. Browsers often render with a clear (✖) button.

• Attributes: placeholder, required, maxlength
• Validation: Same as plain text.
• Mobile UI: Shows “Search” action on the keyboard.

Search this site:

6. Other Useful Input Types

Volume:



Favorite Color:



Appointment:

Best Practices

• Always pair inputs with <label> for accessibility.
• Use required for mandatory fields.
• Employ pattern to enforce custom validation rules.
• Provide placeholder text and default value where appropriate.
• Test in multiple browsers and devices to ensure consistent UI behavior.