webdevlinux - logo Web Dev Linux

Typed input types

We use the input element to define different input types. In this chapter, you will learn about typed data input types.

Typed input types Input types

Try the below example

FILE : typed-input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Typed input</title>
</head>
<body>
<form>
<p>Name : <input placeholder="Enter your name"></p>
<p>Email : <input type="email" required autofocus></p>
<p>Nick : <input maxlength="5" size="4"></p>
<p>Password : <input type="password"></p>
<p>Age : <input type="number"></p>
<p>Read only : <input value="This is readonly" readonly></p>
<p>Disabled : <input value="This is disabled" disabled></p>
<input type="submit">
</form>
</body>
</html>

Explanation

Take a look at the explanation of elements & attributes used in the example.

placeholder="Enter your name"
The placeholder attribute represents a hint to the user.
<input type="number">
The input element with the type value number represents a single line numeric input field.
<input type="email">
The input element with the type value email represents an email address input field. That can have one email address or a list of email address separated with commas.
<input type="password">
The input element with the type value password represents a single line password input field.
required
When the required attribute is specified, the field is required. With the standards web browsers, You will not be able to submit the form without filling a required field.
maxlength="5"
The maxlength attribute represents the maximum allowed character length of the input field. When this is specified, the length of input data must be equal or less than the maxlength value.
size="4"
The size attribute represents the display length of the input field.
autofocus
If the autofocus attribute is specified in a field, then it will focus (the cursor will be there) when the page is loaded. Only one autofocus attribute is permitted within a single form.
readonly
When the readonly attribute is specified, the field is not editable.
disabled
When the disabled attribute is specified, the field is not editable and it is not submitted to the server.