<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Submit</button>
</form>

<!-- GET method — data in URL (search forms) -->
<form action="/search" method="get">
<input type="search" name="q">
<button>Search</button>
</form>

<!-- POST method — data in body (login, registration) -->
<form action="/login" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button>Log In</button>
</form>

<!-- File uploads require multipart encoding -->
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="avatar">
<button>Upload</button>
</form>

<input type="text" name="username" value="alice">

<input type="text" placeholder="Enter your full name">

<input type="text" name="fullname" maxlength="50">

<input type="email" name="email" placeholder="user@example.com">

<input type="password" name="password">

<input type="number" name="age" min="0" max="150" step="1">

<input type="hidden" name="user_id" value="123">

<input type="text" name="country" value="United States">

<input type="text" name="email" required>

<input type="text" pattern="[A-Za-z ]+" title="Letters only">

<input type="submit" value="Send">
<!-- or use a button element -->
<button type="submit">Send</button>

<input type="file" name="avatar" accept="image/*" multiple>

<!-- Submit the form (default) -->
<button type="submit">Save</button>

<!-- Reset all fields to their default values -->
<button type="reset">Clear</button>

<!-- Regular button — does nothing by default -->
<button type="button" onclick="alert("Clicked!")">Click Me</button>

<fieldset>
<legend>Gender</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other" checked>
<label for="other">Other</label>
</fieldset>

<fieldset>
<legend>Interests</legend>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label>
<input type="checkbox" id="design" name="interests" value="design">
<label for="design">Design</label>
<input type="checkbox" id="music" name="interests" value="music" checked>
<label for="music">Music</label>
</fieldset>

<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="billing_month">
<input type="week" name="event_week">

<input type="color" name="theme_color" value="#ff0000">

<input type="range" name="volume" min="0" max="100" value="50">

<input type="tel" name="phone" placeholder="+1-555-0100">

<input type="url" name="website" placeholder="https://example.com">

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"
placeholder="Write your message here..."
maxlength="500"></textarea>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="">— Select —</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="jp" selected>Japan</option>
</select>

<select name="car">
<optgroup label="German">
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="Japanese">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
</select>

<select name="skills" multiple size="4">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Python</option>
</select>