Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Input Attributes</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 align="center">HTML Input Attributes</h1>
<!-- Input Attribute Value --->
<h2>Input Attribute 'Value'</h2>
<input type="text" value="Coding Atharva" />
<!-- Input Attribute readonly --->
<h2>Input Attribute 'readonly'</h2>
<input type="text" value="Atharva Agrawal" readonly />
<!-- Input Attribute disabled --->
<h2>Input Attribute 'disabled'</h2>
<input type="text" value="Development Community" disabled />
<!-- Input Attribute size --->
<h2>Input Attribute 'size'</h2>
<input type="text" value="https://codingatharva.blogspot.com" size="40" />
<!-- Input Attribute rows , cols --->
<h2>Input Attribute 'rows' , 'cols'</h2>
<input type="text" rows="5" cols="10" />
<h1 align="center">HTML 5 Input Attributes</h1>
<!-- Input Attribute required --->
<h2>Input Attribute 'required'</h2>
<input type="text" required />
<!-- Input Attribute novalidate --->
<h2>Input Attribute 'novalidate'</h2>
<form novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
<!-- Input Attribute autofocus --->
<h2>Input Attribute 'autofocus'</h2>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" autofocus><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit">
</form>
<!-- Input Attribute pattern --->
<h2>Input Attribute 'pattern'</h2>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<!-- Input Attribute placeholder --->
<h2>Input Attribute 'placeholder'</h2>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
<br><br><br>
</body>
</html>
Output:
