HTML Input Types Cheatsheet

<input type="text" name="username" value="Example" />
<input type="password" name="password" value="secret" />
<input type="email" name="email" value="hello@example.com" />
<input type="tel" name="phone" value="+1-555-123-4567" />
<input type="url" name="website" value="https://example.com" />
<input type="search" name="search" value="Search..." />

<input type="number" name="quantity" min="1" max="10" value="5" />
<input type="range" name="volume" min="0" max="100" value="50" />

<input type="date" name="birthday" value="2024-07-12" />
<input type="datetime-local" name="appointment" value="2024-07-12T10:00" />
<input type="month" name="month" value="2024-07" />
<input type="week" name="week" value="2024-W28" />
<input type="time" name="time" value="10:00" />

<input type="checkbox" name="subscribe" checked />
<input type="radio" name="plan" value="free" checked />
<input type="radio" name="plan" value="pro" />
<input type="color" name="favoriteColor" value="#ff0000" />
<input type="file" name="resume" accept=".pdf" />

<input type="button" value="Click me" />
<input type="submit" value="Send" />
<input type="reset" value="Clear" />

<input type="hidden" name="userId" value="123" />

<input type="text" required />
<input type="number" min="0" max="100" value="50" />
<input type="text" minlength="3" maxlength="20" value="abc" />
<input type="text" pattern="[A-Za-z]{3}" title="Three letters" value="abc" />
<input type="number" step="5" value="10" />
<input type="text" value="Read only" readonly />
<input type="text" value="Disabled" disabled />
<input type="text" placeholder="Enter your name" />