Diploma in
Coding and Technology
Lesson: HTML inputs
Working with HTML input types
Creating HTML forms
Practical session
Objectives
Loading…
HTML input
Using input elements enables
developers to create interactive
websites. To create an input element,
we use the <input> tag and specify the
type of input using the “type” attribute.
Captures data Used to parse
from user for data to the
processing back-end
Why use HTML
input elements?
Shape the
client and
server
response
HTML input types
Input type Description
Button A clickable button.
Text A text field that accepts a single line of text.
Checkbox A checkbox that allows users to select/deselect single values.
Radio A clickable radio checkbox that allows users to a single value from a list of
options with the same named value.
Password A single line text field that hides the values entered by the user.
Range Enables users to select between a maximum and minimum range.
Submit A clickable button that submits form data.
Date and time Generates a simple UI which allows users to select a time and date.
Email A text field that accepts a single line of text. The text is treated as an email
address and uses validation parameters.
Text
Buttons
Checkboxes
Radios
Range
Email
Password
Date and time
Loading…
HTML forms
Forms allow the client to capture
data from the user. The HTML
<form> element defines a form that
is used to collect user input or data.
• Data validation
• Operations outside of HTML
• Highly flexible
Login form
example
Loading…
Let’s code!