Basic form

v001 - Working - Data in console - Checkboxes appearing as buttons

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Questionnaire</title>
  <style>
    label {
      display: inline-block;
      margin-bottom: 5px;
    }
    .toggle-button {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      background-color: #eee;
      color: #555;
      cursor: pointer;
      outline: none;
    }
    .toggle-button.toggle-button-checked {
      background-color: green;
      color: white;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
    .summary {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    body {font-family: sans-serif}
  </style>
</head>
<body>
  <h1>Song Questionnaire</h1>
  <form>
    <h2>Track Information</h2>
    <label>
      Artist Name:
      <input type="text" name="artist" required>
    </label><br>
    <label>
      Track Name:
      <input type="text" name="track" required>
    </label><br>
    <label>
      BPM:
      <input type="number" name="bpm" placeholder="120" value="120" required>
    </label>

     <h2>1. What is the overall vibe of this track?</h2>
    <label>
      <input type="checkbox" name="vibe" value="Aggressive" hidden>
      <button class="toggle-button">Aggressive</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Atmospheric" hidden>
      <button class="toggle-button">Atmospheric</button>
    </label>
    <!-- Add the rest of the checkboxes for the vibe here -->

    <h2>2. What feelings does this track evoke in you?</h2>
    <label>
      <input type="checkbox" name="feelings" value="Happy" hidden>
      <button class="toggle-button">Happy</button>
    </label>
    <label>
      <input type="checkbox" name="feelings" value="Sad" hidden>
      <button class="toggle-button">Sad</button>
    </label>
    <!-- Add the rest of the checkboxes for the feelings here -->

    <h2>3. What are the top 3 musical lines driving this track?</h2>
    <label>
      <input...