View video tutorial
HTML Input Attributes
HTML
The <input> tag is the most important input element and it has some attributes developer must know about.
Most common input Attributes
value, placeholder,
required, readonly, disabled, size,
max, min, maxlength,
height, width, multiple,
pattern, step, list,
autofocus, autocomplete etc.
<input>tag attribute value
➔ value attribute specifies the initial value of a input.
➔ It is the default value for the input if the user do not type / change anything in the input.
Example (value attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML form input value Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML form input value Example</h3>
<p>The value attribute specifies the default value for the input field.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">User ID:</label></td>
<td><input type="text" name="userid" id="userid" value="1234" required></td>
</tr>
<tr>
<td> <label for="">User Name:</label></td>
<td><input type="text" name="username" id="username" value="Jhon" required></td>
</tr>
<tr>
<td></td>
<td><input type="submit" onclick=submitForm(event) value="Submit Data"></td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let userid = document.getElementById("userid");
let username = document.getElementById("username");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "User Id: " + userid.value +
"\nUser Name: " + username.value;
alert("Form information Uploaded.\n" + txt);
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
<input>tag attribute placeholder
➔ placeholder attribute specifies the initial value of a input.
➔ It is the default value for the input if the user do not type / change anything in the input.
Example (palceholder attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML input placeholder Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML input placeholder Example</h3>
<p>The placeholder attribute specifies a hint to the user about the value of the input field.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">User ID:</label></td>
<td><input type="text" name="userid" id="userid" placeholder="Enter User ID" required></td>
</tr>
<tr>
<td> <label for="">User Name:</label></td>
<td><input type="text" name="username" id="username" placeholder="Enter User Name" required></td>
</tr>
<tr>
<td> <label for="">User Email:</label></td>
<td><input type="useremail" name="useremail" id="useremail" placeholder="Enter User Email" required>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" onclick=submitForm(event) value="Submit Data">
<input type="submit" onclick=clearForm(event) value="Clear Data">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let userid = document.getElementById("userid");
let username = document.getElementById("username");
let useremail = document.getElementById("useremail");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "User Id: " + userid.value +
"\nUser Name: " + username.value +
"\nUser Email: " + useremail.value;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
userid.value = "";
username.value = "";
useremail.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
<input>tag attribute required
➔ required attribute specifies the initial value of a input.
➔ It is the default value for the input if the user do not type / change anything in the input.
Example (required attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML input required Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML input required Example</h3>
<p>The required attribute specifies that the user must enter input into the field before the form can be submitted.
</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">User ID:</label></td>
<td><input type="text" name="userid" id="userid" placeholder="Enter User ID" required></td>
</tr>
<tr>
<td> <label for="">User Email:</label></td>
<td><input type="useremail" name="useremail" id="useremail" placeholder="Enter User Email" required>
</td>
</tr>
<tr>
<td> <label for="">Password:</label></td>
<td><input type="password" name="password" id="password" placeholder="Enter User Password" required>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" onclick=submitForm(event) value="Submit Data">
<input type="submit" onclick=clearForm(event) value="Clear Data">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let userid = document.getElementById("userid");
let useremail = document.getElementById("useremail");
let password = document.getElementById("password");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "User Id: " + userid.value +
"\nUser Email: " + useremail.value;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
userid.value = "";
password.value = "";
useremail.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
<input>tag attribute readonly
➔ readonly attribute specifies the initial value of a input.
➔ It is the default value for the input if the user do not type / change anything in the input.
Example (readonly attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML input readonly attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML input readonly attribute Example</h3>
<p>The readonly attribute specifies that the user cannot enter input into the field but the value will still be
submitted.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">ID:</label></td>
<td><input type="text" name="userid" id="userid" value="AB5004" readonly></td>
</tr>
<tr>
<td> <label for="">Email:</label></td>
<td><input type="useremail" name="useremail" id="useremail" value="ab@example.com" readonly></td>
</tr>
<tr>
<td> <label for="">Password:</label></td>
<td><input type="password" name="password" id="password" placeholder="Enter User Password" required>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" onclick=submitForm(event) value="Get Data">
<input type="submit" onclick=clearForm(event) value="Clear Data">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let userid = document.getElementById("userid");
let useremail = document.getElementById("useremail");
let password = document.getElementById("password");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "User Id: " + userid.value +
"\nUser Email: " + useremail.value;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
userid.value = "AB5004";
password.value = "";
useremail.value = "ab@example.com";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.