Scribd
Upload
2 views

9. HTML 5 input elements - Color, Number, Date, Month, week, Time, date time-local

The document outlines various HTML input elements introduced in HTML5, including Color, Number, Date, Month, Week, Time, and DateTime-Local, each designed to enhance user input experience and data accuracy. It provides examples of how to implement these input types in forms, demonstrating their specific functionalities. Overall, these elements facilitate easier and more accurate data entry for users on the web.

Uploaded by

lakshrajsinh188
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

9. HTML 5 input elements - Color, Number, Date, Month, week, Time, date time-local

The document outlines various HTML input elements introduced in HTML5, including Color, Number, Date, Month, Week, Time, and DateTime-Local, each designed to enhance user input experience and data accuracy. It provides examples of how to implement these input types in forms, demonstrating their specific functionalities. Overall, these elements facilitate easier and more accurate data entry for users on the web.

Uploaded by

lakshrajsinh188
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Fundamentals of Web Designing

HTML input elements - Color, Number, Date, Month, week, Time,


date time-local.
Input Elements
 Allow users to input various types of information, such as text,
numbers, checkboxes, radio buttons, and more.
 The "Color" input allows users to select a color using a color picker.
 The "Number" input ensures that users input only numeric values.
 "Date," "Month," "Week," and "Time" inputs enable users to easily
pick dates, months, weeks, or time values.
 HTML5 input elements streamline data input, enhance user
experience, and improve data accuracy in web.

2
Input Elements - Color
 It allows users to pick and specify colors directly within a form.
 The <input> element with the type="color" attribute to create the
color picker input.
Example :
<form>
<label for="colorPicker">Select a Color:</label>
<input type="color" id="colorPicker" name="color">
<input type="submit" value="Submit">
</form>

3
Input Elements - Number
 Defines an input field to enter a number.
 You can also set restrictions on what numbers are accepted.
min : Specifies the minimum value for an input field.
max : Specifies the maximum value for an input field
Example :
<form action="process_data.php" method="post">
<!-- Form controls go here -->
<label for="quantity">Enter Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="100"
step="1">
</form>

4
Input Elements - Date
 Defines an input field for selection of date.
 A date picker can show up in the input field.
Example :
<form>
<label for="dateInput">Select a Date:</label>
<input type="date" id="dateInput" name="date">
</form>

Assign a unique id and a name attribute to the date input element.

5
Input Elements – Month
 Allows the user to select a month and year.
 Users to select a specific month and year easily.
 The type attribute to "month“. This tells the browser to render a
"month" input, which typically displays a dropdown or a date picker.
Example :
<form>
<label for="monthInput">Select a Month:</label>
<input type="month" id="monthInput" name="month">
<input type="submit" value="Submit">
</form>
6
Input Elements – Week
 Allows the user to select a week and year.
 Input type for weeks, it ensures data accuracy and simplifies user
input for week-related information.
Example :
<form>
<label for="weekInput">Select a Week:</label>
<input type="week" id="weekInput" name="week">
<input type="submit" value="Submit">
</form>

7
Input Elements – Time
 Allows the user to select a time (no time zone).
 A time picker can show up in the input field.
 It easier to process and analyze time-related information on the
server side.
Example :
<form>
<label for="meeting-time">Select a time for the meeting:</label>
<input type="time" id="meeting-time" name="meeting-time">
<input type="time" id="meeting-time" name="meeting-time" min="09:00"
max="17:00" step="900">
</form>

8
Input Elements –Date Time-Local
 Specifies a date and time input field.
 A date picker can show up in the input field.
 When collecting data that requires precise timestamps, such as
scheduling appointments or logging events.
Example :
<form>
<label for="datetime">Select Date and Time:</label>
<input type="datetime-local" id="datetime" name="datetime">
<input type="submit" value="Submit">
</form>

9
Thank You…!!!

You might also like