MrUnknown
April 13, 2023
258 views
0 votes
2 Answers

Here is my Html code and css code

The code is responsive also but only yes/no filed is not responsive

form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 5px solid #219ebc;
  border-radius: 15px;
  background-color: #fff;
}

/* style the form title */
h1 {
  text-align: center;
  font-size: 36px;
  margin-top: 0;
  color: #023047;
  font-family: Arial, sans-serif;
}

/* style the form fields */
label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #023047;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 3px solid #8ecae6;
  box-sizing: border-box;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #023047;
}

textarea {
  height: 150px;
  resize: none;
}

/* style the submit button */
button[type="submit"] {
  background-color: #023047;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 24px;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #0077b6;
}

/* style the error messages */
.error {
  color: red;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}

/* adjust styles for smaller screens */
@media (max-width: 600px) {
  form {
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    padding: 5px;
    font-size: 16px;
  }

  textarea {
    height: 100px;
  }

  button[type="submit"] {
    font-size: 18px;
    padding: 8px 16px;
  }

  /* radio buttons */
  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    margin-right: 5px;
  }

  input[type="radio"][name="moderator-experience"]:checked,
  input[type="radio"][name="contribution"]:checked {
    border-color: #023047;
  }

  label[for="moderator-experience-yes"],
  label[for="moderator-experience-no"],
  label[for="contribution-yes"],
  label[for="contribution-no"] {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #023047;
    margin-bottom: 10px;
  }

  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    width: 16px;
    height: 16px;}
    @media (max-width: 600px) {
    form {
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
    }
    
    input[type="text"],
    input[type="email"],
    textarea {
    padding: 5px;
    font-size: 16px;
    }
    
    textarea {
    height: 100px;
    }
    
    button[type="submit"] {
    font-size: 18px;
    padding: 8px 16px;
    }
    
    /* radio buttons */
    input[type="radio"][name="moderator-experience"],
    input[type="radio"][name="contribution"] {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    margin-right: 5px;
    }
    
    input[type="radio"][name="moderator-experience"]:checked,
    input[type="radio"][name="contribution"]:checked {
    border-color: #023047;
    }
    
    label[for="moderator-experience-yes"],
    label[for="moderator-experience-no"],
    label[for="contribution-yes"],
    label[for="contribution-no"] {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #023047;
    margin-bottom: 10px;
    margin-right: 10px;
    }
    
    input[type="radio"][name="moderator-experience"],
    input[type="radio"][name="contribution"] {
    width: 16px;
    height: 16px;
    }
    }
  /* adjust styles for smaller screens */
@media (max-width: 600px) {
  /* radio buttons */
label[for="moderator-experience-yes"],
label[for="moderator-experience-no"],
label[for="contribution-yes"],
label[for="contribution-no"],
input[type="radio"][name="moderator-experience"],
input[type="radio"][name="contribution"],
input[type="text"],
input[type="email"] {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
}
  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    margin-right: 5px;
  }

  input[type="radio"][name="moderator-experience"]:checked,
  input[type="radio"][name="contribution"]:checked {
    border-color: #023047;
  }

  label[for="moderator-experience-yes"],
  label[for="moderator-experience-no"],
  label[for="contribution-yes"],
  label[for="contribution-no"] {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #023047;
    margin-bottom: 10px;
  }

  input[type="radio"][name="moderator-experience"],
  input[type="radio"][name="contribution"] {
    width: 16px;
    height: 16px;
  }

  /* answer fields */
  .answer {
    display: block;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #023047;
  }

  .answer input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 3px solid #8ecae6;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #023047;
  }

  .answer textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border-radius: 5px;
    border: 3px solid #8ecae6;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #023047;
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>Mod Application Form</title>
   <link rel="stylesheet" type="text/css" href="{% static 'css/style-form.css' %}">
</head>
<body>
    <h1 id="mod-text">Mod Application Questions</h1>
    <form id="mod-application-form">
        <label for="excitement">1. What makes you excited to become a part of our staff team?</label><br>
        <textarea id="excitement" name="excitement" required></textarea><br><br>
        
        <label for="time-commitment">2. How much time can you dedicate to our server on a regular basis?</label><br>
        <input type="text" id="time-commitment" name="time-commitment" required><br><br>
        
        <label for="messages-commitment">3. How many messages can you commit to writing each day as a staff member?</label><br>
        <input type="text" id="messages-commitment" name="messages-commitment" required><br><br>
        
        <label for="rule-breaking-action">4. If you come across a member who is breaking our rules, what actions would you take?</label><br>
        <textarea id="rule-breaking-action" name="rule-breaking-action" required></textarea><br><br>
        
        <label for="moderator-experience">5. Have you had any previous experience as a moderator on other servers?</label><br>
        <input type="radio" id="moderator-experience-yes" name="moderator-experience" value="yes" required>
        <label for="moderator-experience-yes">Yes</label><br>
        <input type="radio" id="moderator-experience-no" name="moderator-experience" value="no" required>
        <label for="moderator-experience-no">No</label><br><br>
        
        <label for="largest-membership">6. What is the largest number of members you've moderated on previous servers?</label><br>
        <input type="text" id="largest-membership" name="largest-membership" required><br><br>
        
        <label for="typing-speed">7. What is your typing speed (in words per minute)?</label><br>
        <input type="text" id="typing-speed" name="typing-speed" required><br><br>
        
        <label for="staff-role-removal">8. If your staff role is taken away due to inactivity or any other reason, how would you react?</label><br>
        <textarea id="staff-role-removal" name="staff-role-removal" required></textarea><br><br>
        
        <label for="contribution">9. Are you willing to contribute your owo/bot coins to support events and activities on our server?</label><br>
        <input type="radio" id="contribution-yes" name="contribution" value="yes" required>
        <label for="contribution-yes">Yes</label><br>
        <input type="radio" id="contribution-no" name="contribution" value="no" required>
        <label for="contribution-no">No</label><br><br>
        
        <input style="background-color: #008CBA;
  color: #00ffee;
  padding: 30px 275px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;" type="submit" value="Submit">
    </form>
    <script>
        document.getElementById("mod-application-form").addEventListener("submit", (function(event) {
event.preventDefault(); // prevent the default form submission
// get the form data and format it as a string
const formData = new FormData(event.target);
let formString = '';
for (const [name, value] of formData.entries()) {
formString +=`${name}: ${value}n`;
}
// send the form data as an email
const emailBody = encodeURIComponent(formString);
const emailLink = `mailto:[email protected]?subject=Mod%20Application&body=${emailBody}`;
window.location.href = emailLink;
}));
</script>

</body>
</html>

I am trying to make the page responsive everything is ok but Yes/No label and answer filled is not responsive
please tell me how to make yes/no label responsive
I have attched whole html, javascript and css with media query

Answers

Your labels are set as display:block so they drop on to a new line. To make them appear on the same line then set them to display:inline. I’ve added a line of CSS for this. You’ve also got two media queries for the same width. Suggest you delete one.

    form {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      border: 5px solid #219ebc;
      border-radius: 15px;
      background-color: #fff;
      font-family: Arial, sans-serif;
      color: #023047;
    }

    /* style the form title */
    h1 {
      text-align: center;
      font-size: 36px;
      margin-top: 0;
    }

    /* style the form fields */
    label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }

    /*added this */
    label:is([for="moderator-experience-yes"],[for="moderator-experience-no"],
  [for="contribution-yes"],[for="contribution-no"]) {
    display:inline;
  }

    /* adjust styles for smaller screens */
    @media (max-width: 600px) {
      form {
        max-width: 90%;
        margin: 0 auto;
        padding: 10px;
      }

      /* radio buttons */
      /* not needed */ 
    }

  <h1 id="mod-text">Mod Application Questions</h1>
  <form id="mod-application-form">
    <label for="moderator-experience">5. Have you had any previous experience as a moderator on other
      servers?</label><br>
    <input type="radio" id="moderator-experience-yes" name="moderator-experience" value="yes" required>
    <label for="moderator-experience-yes">Yes</label><br>
    <input type="radio" id="moderator-experience-no" name="moderator-experience" value="no" required>
    <label for="moderator-experience-no">No</label><br><br>
  </form>

I create A Solution for you HTML Document , using div element , you can reefer this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <style>
      form {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 5px solid #219ebc;
        border-radius: 15px;
        background-color: #fff;
      }

      /* style the form title */
      h1 {
        text-align: center;
        font-size: 36px;
        margin-top: 0;
        color: #023047;
        font-family: Arial, sans-serif;
      }

      /* style the form fields */
      label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #023047;
      }

      input[type="text"],
      input[type="email"],
      textarea {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 3px solid #8ecae6;
        box-sizing: border-box;
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        color: #023047;
      }

      textarea {
        height: 150px;
        resize: none;
      }

      /* style the submit button */
      button[type="submit"] {
        background-color: #023047;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 24px;
        font-family: Arial, sans-serif;
        transition: all 0.3s ease;
      }

      button[type="submit"]:hover {
        background-color: #0077b6;
      }

      /* style the error messages */
      .error {
        color: red;
        margin-bottom: 10px;
        font-family: Arial, sans-serif;
      }

      /* adjust styles for smaller screens */
      @media (max-width: 600px) {
        form {
          max-width: 90%;
          margin: 0 auto;
          padding: 10px;
        }

        input[type="text"],
        input[type="email"],
        textarea {
          padding: 5px;
          font-size: 16px;
        }

        textarea {
          height: 100px;
        }

        button[type="submit"] {
          font-size: 18px;
          padding: 8px 16px;
        }

        .radion-btns,
        .radion-btn {
          display: flex;
        }
      }

      /* radio buttons */
      input[type="radio"][name="moderator-experience"],
      input[type="radio"][name="contribution"] {
        appearance: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        outline: none;
        transition: border-color 0.3s ease-in-out;
        margin-right: 5px;
      }

      input[type="radio"][name="moderator-experience"]:checked,
      input[type="radio"][name="contribution"]:checked {
        border-color: #023047;
      }

      label[for="moderator-experience-yes"],
      label[for="moderator-experience-no"],
      label[for="contribution-yes"],
      label[for="contribution-no"] {
        display: block;
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: #023047;
        margin-bottom: 10px;
      }

      input[type="radio"][name="moderator-experience"],
      input[type="radio"][name="contribution"] {
        width: 16px;
        height: 16px;
      }

      @media (max-width: 600px) {
        form {
          max-width: 90%;
          margin: 0 auto;
          padding: 10px;
        }

        input[type="text"],
        input[type="email"],
        textarea {
          padding: 5px;
          font-size: 16px;
        }

        textarea {
          height: 100px;
        }

        button[type="submit"] {
          font-size: 18px;
          padding: 8px 16px;
        }

        /* radio buttons */
        input[type="radio"][name="moderator-experience"],
        input[type="radio"][name="contribution"] {
          appearance: none;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          border: 2px solid #ccc;
          outline: none;
          transition: border-color 0.3s ease-in-out;
          margin-right: 5px;
        }

        input[type="radio"][name="moderator-experience"]:checked,
        input[type="radio"][name="contribution"]:checked {
          border-color: #023047;
        }

        label[for="moderator-experience-yes"],
        label[for="moderator-experience-no"],
        label[for="contribution-yes"],
        label[for="contribution-no"] {
          display: inline-block;
          font-family: Arial, sans-serif;
          font-size: 16px;
          color: #023047;
          margin-bottom: 10px;
          margin-right: 10px;
        }

        input[type="radio"][name="moderator-experience"],
        input[type="radio"][name="contribution"] {
          width: 16px;
          height: 16px;
        }
      }
      /* adjust styles for smaller screens */
      @media (max-width: 600px) {
        /* radio buttons */
        label[for="moderator-experience-yes"],
        label[for="moderator-experience-no"],
        label[for="contribution-yes"],
        label[for="contribution-no"],
        input[type="radio"][name="moderator-experience"],
        input[type="radio"][name="contribution"],
        input[type="text"],
        input[type="email"] {
          font-size: 20px;
          line-height: 30px;
          margin-bottom: 10px;
        }
        input[type="radio"][name="moderator-experience"],
        input[type="radio"][name="contribution"] {
          appearance: none;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          border: 2px solid #ccc;
          outline: none;
          transition: border-color 0.3s ease-in-out;
          margin-right: 5px;
        }

        input[type="radio"][name="moderator-experience"]:checked,
        input[type="radio"][name="contribution"]:checked {
          border-color: #023047;
        }

        label[for="moderator-experience-yes"],
        label[for="moderator-experience-no"],
        label[for="contribution-yes"],
        label[for="contribution-no"] {
          display: block;
          font-family: Arial, sans-serif;
          font-size: 16px;
          color: #023047;
          margin-bottom: 10px;
        }

        input[type="radio"][name="moderator-experience"],
        input[type="radio"][name="contribution"] {
          width: 16px;
          height: 16px;
        }

        /* answer fields */
        .answer {
          display: block;
          margin-bottom: 20px;
          font-weight: bold;
          font-family: Arial, sans-serif;
          color: #023047;
        }

        .answer input[type="text"] {
          width: 100%;
          padding: 10px;
          border-radius: 5px;
          border: 3px solid #8ecae6;
          box-sizing: border-box;
          margin-bottom: 10px;
          font-size: 16px;
          font-family: Arial, sans-serif;
          color: #023047;
        }

        .answer textarea {
          width: 100%;
          height: 100px;
          padding: 10px;
          border-radius: 5px;
          border: 3px solid #8ecae6;
          box-sizing: border-box;
          margin-bottom: 20px;
          font-size: 16px;
          font-family: Arial, sans-serif;
          color: #023047;
        }
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <h1 id="mod-text">Mod Application Questions</h1>
    <form id="mod-application-form">
      <label for="excitement"
        >1. What makes you excited to become a part of our staff team?</label
      ><br />
      <textarea id="excitement" name="excitement" required></textarea
      ><br /><br />

      <label for="time-commitment"
        >2. How much time can you dedicate to our server on a regular
        basis?</label
      ><br />
      <input
        type="text"
        id="time-commitment"
        name="time-commitment"
        required
      /><br /><br />

      <label for="messages-commitment"
        >3. How many messages can you commit to writing each day as a staff
        member?</label
      ><br />
      <input
        type="text"
        id="messages-commitment"
        name="messages-commitment"
        required
      /><br /><br />

      <label for="rule-breaking-action"
        >4. If you come across a member who is breaking our rules, what actions
        would you take?</label
      ><br />
      <textarea
        id="rule-breaking-action"
        name="rule-breaking-action"
        required
      ></textarea
      ><br /><br />

      <label for="moderator-experience"
        >5. Have you had any previous experience as a moderator on other
        servers?</label
      ><br />
      <div class="radion-btns">
        <div class="radion-btn">
          <input
            type="radio"
            id="moderator-experience-yes"
            name="moderator-experience"
            value="yes"
            required
          />
          <label for="moderator-experience-yes">Yes</label><br />
        </div>
        <div class="radion-btns">
          <input
            type="radio"
            id="moderator-experience-no"
            name="moderator-experience"
            value="no"
            required
          />
          <label for="moderator-experience-no">No</label>
        </div>
      </div>

      <br /><br />

      <label for="largest-membership"
        >6. What is the largest number of members you've moderated on previous
        servers?</label
      ><br />
      <input
        type="text"
        id="largest-membership"
        name="largest-membership"
        required
      /><br /><br />

      <label for="typing-speed"
        >7. What is your typing speed (in words per minute)?</label
      ><br />
      <input
        type="text"
        id="typing-speed"
        name="typing-speed"
        required
      /><br /><br />

      <label for="staff-role-removal"
        >8. If your staff role is taken away due to inactivity or any other
        reason, how would you react?</label
      ><br />
      <textarea
        id="staff-role-removal"
        name="staff-role-removal"
        required
      ></textarea
      ><br /><br />

      <label for="contribution"
        >9. Are you willing to contribute your owo/bot coins to support events
        and activities on our server?</label
      ><br />
      <div class="radion-btns">
        <div class="radion-btn">
          <input
            type="radio"
            id="contribution-yes"
            name="contribution"
            value="yes"
            required
          />
          <label for="contribution-yes">Yes</label>
        </div>
        <div class="radion-btn">
          <input
            type="radio"
            id="contribution-no"
            name="contribution"
            value="no"
            required
          />
          <label for="contribution-no">No</label>
        </div>
      </div>
      <br />

      <input
        style="
          background-color: #008cba;
          color: #00ffee;
          padding: 30px 275px;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 16px;
        "
        type="submit"
        value="Submit"
      />
    </form>
    <script>
      document
        .getElementById("mod-application-form")
        .addEventListener("submit", function (event) {
          event.preventDefault(); // prevent the default form submission
          // get the form data and format it as a string
          const formData = new FormData(event.target);
          let formString = "";
          for (const [name, value] of formData.entries()) {
            formString += `${name}: ${value}n`;
          }
          // send the form data as an email
          const emailBody = encodeURIComponent(formString);
          const emailLink = `mailto:[email protected]?subject=Mod%20Application&body=${emailBody}`;
          window.location.href = emailLink;
        });
    </script>
  </body>
</html>

        .radion-btns,
        .radion-btn {
          display: flex;
        }

 <div class="radion-btns">
        <div class="radion-btn">
          <input
            type="radio"
            id="moderator-experience-yes"
            name="moderator-experience"
            value="yes"
            required
          />
          <label for="moderator-experience-yes">Yes</label><br />
        </div>
        <div class="radion-btns">
          <input
            type="radio"
            id="moderator-experience-no"
            name="moderator-experience"
            value="no"
            required
          />
          <label for="moderator-experience-no">No</label>
        </div>
      </div>

Please signup or login to give your own answer.

Click here to cancel reply.

how to make form responsive (yes and no label and answer is not responsive) – Html

Here is my Html code and css code

Answers