<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
body {
text-align: center;
}
.input1 {
pointer-events: none;
}
</style>
</head>
<body>
Non-Editable:
<input class="input1" name="input" value="W3docs">
<br>
<br> Editable:
<input class="input2" name="input" value="W3docs">
</body>
</html>