Forms

Basic Form Elements

Text Input

Name:

<div>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your name">
</div>

Email Input

Email:

<div>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="[email protected]">
</div>

Password Input

Password:

<div>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
</div>

Color Input

Favorite Color:

<div>
  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color" value="#4287f5">
</div>

Date Input

Birth Date:

<div>
  <label for="date">Birth Date:</label>
  <input type="date" id="date" name="date">
</div>

Range Input

Rating (1-10):

<div>
  <label for="range">Rating (1-10):</label>
  <input type="range" id="range" name="range" min="1" max="10" value="5">
</div>

Selection Elements

Dropdown

Select an option:

<div>
  <label for="dropdown">Select an option:</label>
  <select id="dropdown" name="dropdown">
    <option value="" disabled selected>Choose one...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

Checkboxes

Option 1

Option 2

Option 3

<fieldset>
  <legend>Checkboxes</legend>
  <div>
    <input type="checkbox" id="checkbox1" name="checkbox1" value="option1">
    <label for="checkbox1">Option 1</label>
  </div>
  <div>
    <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
    <label for="checkbox2">Option 2</label>
  </div>
  <div>
    <input type="checkbox" id="checkbox3" name="checkbox3" value="option3">
    <label for="checkbox3">Option 3</label>
  </div>
</fieldset>

Radio Buttons

Option 1

Option 2

Option 3

<fieldset>
  <legend>Radio Buttons</legend>
  <div>
    <input type="radio" id="radio1" name="radiogroup" value="option1">
    <label for="radio1">Option 1</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radiogroup" value="option2">
    <label for="radio2">Option 2</label>
  </div>
  <div>
    <input type="radio" id="radio3" name="radiogroup" value="option3">
    <label for="radio3">Option 3</label>
  </div>
</fieldset>

Text Areas and Buttons

Text Area

Message:

<div>
  <label for="textarea">Message:</label>
  <textarea id="textarea" name="textarea" rows="5" cols="50" 
    placeholder="Enter your message here..."></textarea>
</div>

Buttons

<div>
  <button type="button">Standard Button</button>
  <button type="submit">Submit Button</button>
  <button type="reset">Reset Button</button>
</div>

Input Buttons

<div>
  <input type="button" value="Input Button">
  <input type="submit" value="Input Submit">
  <input type="reset" value="Input Reset">
</div>