Scribd
Upload
19 views11 pages

HTML5 Forms With Example and Graphic

HTML5 forms enhance user input collection with new input types like color, number, and email for improved functionality and validation. Additional attributes such as required, pattern, and placeholder allow for further customization and restrictions on user input. The document also includes practical examples and suggestions for implementing these features in forms.

Uploaded by

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

HTML5 Forms With Example and Graphic

HTML5 forms enhance user input collection with new input types like color, number, and email for improved functionality and validation. Additional attributes such as required, pattern, and placeholder allow for further customization and restrictions on user input. The document also includes practical examples and suggestions for implementing these features in forms.

Uploaded by

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

HTML5 Forms - Introduction

• HTML forms collect user input like name,


email, date, etc.
• HTML5 introduced new input types for
better functionality and validation.
Advanced Input Types in HTML5
• color - Opens a color picker to choose a color.
• number - Only allows number input, can use
min and max.
• url - Used for entering website links (URLs).
• image - Uses an image as a submit button.
• date - Date picker (day, month, year).
Advanced Input Types in HTML5

• email - Checks if the input is a valid email


address.
More HTML5 Input Types
• month - Select a month and year (e.g. Jan
2025).
• range - Slider input, used for values like
rating or volume.
• datetime-local - Pick date and time
together.
• time - Select only time (e.g. 10:30 AM).
• week - Select a week of the year.
More HTML5 Input Types

• search - Input field for search text.


• file - Allows user to upload files.
• tel - Used for phone numbers with
validation pattern.
Input Restrictions (Attributes)
• disabled - Disables the input field so user
can't type in it.
• max / min - Set maximum and minimum
values.
• pattern - Uses regular expressions to validate
input format.
• readonly - Makes the field uneditable.
• placeholder - Shows hint text inside the field.
Input Restrictions (Attributes)
• required - Field must be filled before
submitting.
• autocomplete - Suggests saved input values.
• autofocus - Automatically focuses this field on
page load.
• height & width - Set size for image type inputs.
• multiple - Allows multiple values (e.g. multiple
emails/files).
id and class Attributes

• id - Uniquely identifies an input. Useful


for JavaScript & CSS.
• class - Used to apply common CSS styles
to multiple elements.
• These attributes help with styling and
scripting your form.
Example
Output
🎯 Do it Yourself:
• Add multiple attribute to email input.
• Use placeholder in the phone number field.
• Add min and max attributes to number input.
• Apply autocomplete="off" to name input.
• Use autofocus to highlight the first input on
load.
• Add <input type="range"> with min=0,
max=10, step=1

You might also like