<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input Types</h1>
<form action="">
<!-- button -->
<span>Button:-</span>
<input type="button" onclick="alert('Hello World!')" value="Click Me">
<br><br>
<!-- checkbox -->
<span>Checkbox:-</span>
<input type="checkbox" name="" id="">
<label for="">HTML</label>
<input type="checkbox" name="" id="">
<label for="">CSS</label>
<input type="checkbox" name="" id="">
<label for="">JS</label>
<br><br>
<!-- Color -->
<span>Color:-</span>
<input type="color" name="" id="">
<br><br>
<!-- Date -->
<span>Date:-</span>
<input type="date" name="" id="">
<br><br>
<!-- Email -->
<span>Email:-</span>
<input type="email" name="" id="">
<br><br>
<!-- File -->
<span>File:-</span>
<input type="file" name="" id="">
<br><br>
<!-- Hidden -->
<span>Hidden:-</span>
<input type="hidden" name="">
<br><br>
<!-- Password -->
<span>Password:-</span>
<input type="password" name="" id="">
<br><br>
<!-- Radio -->
<span>Radio:-</span>
<input type="radio" name="" id="">Female
<input type="radio" name="" id="">Male
<br><br>
<!-- Reset -->
<span>Reset:-</span>
<input type="reset" value="Reset">
<br><br>
<!-- Range -->
<span>Range:-</span>
<input type="range" name="" id="" min="0" max="50">
<br><br>
<!-- Image -->
<span>Image:-</span>
<input type="image" src="img.gif" alt="">
<br><br>
<!-- Submit -->
<span>Submit:-</span>
<input type="submit" value="Submit">
<br><br>
<!-- Text -->
<spa
n>Text:-</span>
<input type="text" name="" id="">
<br><br>
<!-- Time -->
<span>Time:-</span>
<input type="time" name="" id="">
<br><br>
<!-- Select Option -->
<select name="" id="">
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JS</option>
<option value="4">React</option>
</select>
<br><br>
<!-- textarea -->
<textarea name="" id="" cols="30" rows="10">Address</textarea>
<!-- date -->
<input type="date" name="" id="">
</form>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.