Course Content
Ultimate HTML
HTML provides various types of <input/>
elements that can be used to capture different types of data. Some of the commonly used input types are:
email and password
type="email"
is used for email input fields that require a valid email address. The browser will automatically validate the email address; if the user's email is invalid, he will be prompted to type the correct address.
type="password"
is used for password fields where the entered text is masked to prevent it from being visible to others. The characters are typically replaced with asterisks or bullets. Generally, we also provide minLength
and maxLength
attributes to say how long a password can be.
index.html
index.css
index.js
number
type="number"
is used for taking numerical input. It allows users to enter a number in a specific range (min
/ max
attributes) with a specific step (step
attribute) value.
index.html
index.css
index.js
telephone
type="tel"
is intended to be used for inputting telephone numbers, but it does not perform any validation on the input. It is up to the developer to validate the input and ensure that it is a valid phone number.
index.html
index.css
index.js
checkbox
type="checkbox"
allows the user to select one or more options from a set of predefined choices. It is represented by a square box that can be checked or unchecked by the user. Attribute checked
makes a checkbox checked by default.
index.html
index.css
index.js
radio
type="radio"
is used to create a set of options where only one option can be selected at a time. Each option is represented by a radio button, and when one is selected, the others are automatically deselected. Each radio button should have a unique value attribute to identify it.
index.html
index.css
index.js
range
type="range"
is used to create a slider control that allows users to select a value within a specific range. min
, max
, step
and value
attributes can be applied as well. We know there functionality.
index.html
index.css
index.js
Note
We will learn JavaScript in the following courses. It is not the context of this course.
date and time
type="date"
allows users to select a date from a calendar popup.
type="time"
allows users to input a time in a 24-hour format.
type="datetime-local"
is the combination of time and date inputs. After considering the examples, it will be much clearer.
index.html
index.css
index.js
Note
Because all browsers have their popup calendars and time, which are poorly styled, we use ready solutions to ensure that on all devices, the calendar or time popup will look the same.
Section 5.
Chapter 5