<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All HTML5 Input Types</title>
</head>
<body>
<h2>Complete HTML Form with All Input Types</h2>
<form action="/submit-form" method="post" enctype="multipart/form-data"
autocomplete="on" target="_self">
<!-- Text Input -->
<label for="text">Text:</label>
<input type="text" id="text" name="textInput" placeholder="Enter text" maxlength="50"
minlength="5" size="30" required autofocus><br><br>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="pwd" required><br><br>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" multiple placeholder="Enter email"><br><br>
<!-- URL -->
<label for="url">Website:</label>
<input type="url" id="url" name="website" placeholder="https://example.com"><br><br>
<!-- Tel -->
<label for="tel">Telephone:</label>
<input type="tel" id="tel" name="telephone" pattern="[0-9]{3}-[0-9]{7}" placeholder="123-
4567890"><br><br>
<!-- Number -->
<label for="number">Number (1 to 10):</label>
<input type="number" id="number" name="quantity" min="1" max="10" step="1"><br><br>
<!-- Range -->
<label for="range">Range (0-100):</label>
<input type="range" id="range" name="slider" min="0" max="100" step="10"><br><br>
<!-- Date -->
<label for="date">Date:</label>
<input type="date" id="date" name="birthdate"><br><br>
<!-- Time -->
<label for="time">Time:</label>
<input type="time" id="time" name="alarm"><br><br>
<!-- Datetime-local -->
<label for="datetime">Date and Time:</label>
<input type="datetime-local" id="datetime" name="appointment"><br><br>
<!-- Month -->
<label for="month">Month:</label>
<input type="month" id="month" name="bmonth"><br><br>
<!-- Week -->
<label for="week">Week:</label>
<input type="week" id="week" name="wchoice"><br><br>
<!-- Color -->
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="favcolor"><br><br>
<!-- File Upload -->
<label for="file">Upload File:</label>
<input type="file" id="file" name="upload" multiple><br><br>
<!-- Checkbox -->
<label>Hobbies:</label><br>
<input type="checkbox" id="hobby1" name="hobby" value="reading" checked>
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobby" value="traveling">
<label for="hobby2">Traveling</label><br><br>
<!-- Radio Buttons -->
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<!-- Hidden -->
<input type="hidden" name="userId" value="12345">
<!-- Search -->
<label for="search">Search:</label>
<input type="search" id="search" name="query"><br><br>
<!-- Submit, Reset and Button -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<button type="button" onclick="alert('Custom button clicked')">Click Me</button>
</form>
</body>
</html>
