BTS Form✨ - First form

Code Feedback
1

Hello everyone

I made a question form about BTS and I would like to know your opinions. :laughing:

Screenshot 2023-12-07 15.57.28
Screenshot 2023-12-07 15.57.281920×1080 144 KB

2

It’s hard to give code feedback without the code! :slight_smile:

3

sorry, the code is here

<html>
  <head>
    <meta charset="UTF-8">
    <title>✨BTS Form✨</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    
      <div class="title">
        <h1 id="title">BTS Form‧₊˚✩彡💿</h1>
      </div>
        <br>
    <form id="survey-form" >
      <div class="body">
        <h3><p id="description">This is a BTS question form</p></h3>
          <label for="name" id="name-label">Enter your name: 
            <input type="text" id="name" name="text" required placeholder="Enter your name" />
          </label>
            
          <label id="email-label">Enter your Email: 
            <input type="email" id="email" name="email" required placeholder="Enter your email" />
          </label>
            
          <label for="number" id="number-label">Enter your years: 
            <input id="number" type="number" min="5" max="100" placeholder="Enter your years" />
          </label>
            <br>
            <br>
          <label for="dropdown">Where do you know BTS from?: 
             <select id="dropdown">
               <option>---</option>
               <option>Friends</option>
               <option>concerts</option>
               <option>music</option>
               <option>other</option>
             </select>
          </label>

          <label>
            <p>It's true that Jimin's favorite color is yellow.</p>
            <input type="radio" class="inline" value="true" name="true" style="background-color: black;" />yes
            <input type="radio" class="inline" value="false" name="false" style="background-color: black;" />no
            <p>What color does "v" like?</p>
            <input type="radio" class="inline" value="true" name="true" style="background-color: black;" />brown
            <input type="radio" class="inline" value="false" name="false" style="background-color: black;" />purple
          </label>

          <label>
            <p>Which BTS member do you like the most?</p>
            <input type="checkbox" value="suga"><p>suga</p>
            <input type="checkbox" value="jimin"><p>jimin</p>
          </label>

          <label for="message">Send a message to BTS:
          <textarea id="message" rows="3" cols="15" placeholder="I love you jimin..."></textarea>
        </label>

        <button type="submit" id="submit"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
  <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
</svg></button>
      </div>
    </form>
  </body>
</html>

   background-image: url(https://www.xtrafondos.com/wallpapers/vertical/patron-de-cuadros-negros-7987.jpg);
    font-family: sans-serif;
    padding: 50px;

}

.title {
    background-color: black;
    padding: 5px;
    border-radius: 10px;
    color: #bb99ff;
    text-align: center;
}

.body {
    background-color: #bb99ff;
    opacity: 0.5;
    width: 500px;
    height: 900px;
    border-radius: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

input {
    color: #99bbff;
    background-color: black;
    opacity: none;
    width: 150px;
    border-radius: 10px;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  min-height: 2em;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

select, option, input[type="radio"], input[type="chackbox"] {
  background-color: black;
  color: white;
}
1 Like
4

Hi, In My Opinion Its Great.
Good that you implemented what you love in your learning process. This way it will be more Fun :ok_hand:

1 Like
5

Thank you very much for your opinion, I appreciate it very much. :smile:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.