Interactable Elements in pure HTML (Minimal JavaScript):

Heads up! Some elements in here uses minimal JavaScript code, such as buttons which will execute a simple alert.

Standard Push Button (<button> / type="button")

Code (ready to copy-paste):

<button type="button" onclick="alert('heya there :)')">Press Me</button>
<input type="button" value="Input Button">

Submit & Reset Buttons (type="submit" / type="reset")

Code (ready to copy-paste):

<form>
  <input type="text" placeholder="Type something..." value="Liejan">
  <button type="submit">Submit</button>
  <button type="reset">Reset Form</button>
</form>

Range Slider (type="range")

Code (ready to copy-paste):

<label for="slider_thingy">Slider (0 to 100):</label>
<input type="range" id="slider_thingy" name="slider_thingy" min="0" max="100" value="50" step="1">

Slider with Tick Marks (<datalist>)

Code (ready to copy-paste):

<label for="speed">Speed Level:</label>
<input type="range" id="speed" name="speed" min="0" max="100" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="25" label="25%"></option>
  <option value="50" label="50%"></option>
  <option value="75" label="75%"></option>
  <option value="100" label="100%"></option>
</datalist>

Toggle Checkbox & Radio Buttons (type="checkbox" / type="radio")

Checkboxes (Multiple selections):

Radio Buttons (Only one at a time):

Code (ready to copy-paste):

<!-- Checkboxes -->
<input type="checkbox" id="option1" name="skills" value="HTML" checked>
<label for="option1">HTML</label>
<input type="checkbox" id="option2" name="skills" value="CSS">
<label for="option2">CSS</label>

<!-- Radio Buttons -->
<input type="radio" id="gender_m" name="gender" value="male">
<label for="gender_m">Male</label>
<input type="radio" id="gender_f" name="gender" value="female" checked>
<label for="gender_f">Female</label>

Color Picker Button (type="color")

Code (ready to copy-paste):

<label for="colorwheel">Choose Color:</label>
<input type="color" id="colorwheel" name="colorwheel" value="#00FFFF">

Expandable Disclosure (<details> & <summary>)

Code (ready to copy-paste):

<details>
  <summary>Click to reveal secret details</summary>
  <p>This section is natively expandable without any JavaScript or CSS!</p>
</details>