Survey Form - Build a Survey Form

HTML-CSS
1

Hey so baisicaly i was wanting to know how do you make the additional comments section / textarea section the same vw width as the bottom border lines? i have completed the project and just wanted to continue to test and learn the basics but couldnt figure out how to change the length of the textarea. I know i could use row and col but this isnt adjusted to different vw right?

<!-- file: index.html -->
<!DOCTYPE hmtl>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
  </head>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Please fill out the survey form :)</p>
<!-- form -->
<form id="survey-form">
<fieldset>
<label id="name-label"> Fill in your name
  <input id="name" type="text" placeholder="Name" required/>
  </label>

<label id="email-label">Fill in your email
<input id="email" type="email" placeholder="Email" required/>
</label>

<label id="number-label">Fill in your age
  <input id="number" type="number" min="18" max="150" placeholder="Age" required/>
  </label>
</fieldset>
<fieldset>
<select id="dropdown">
  <option>Select Gender</option>
  <option>Female</option>
  <option>Male</option>
</select>
</fieldset>
<fieldset>
  <label> Favourite color
<input type="radio" value="1" name="Favourite-color"> Blue</input>
<input type="radio" value="2" name="Favourite-color"> Red</input>
<input type="radio" value="3" name="Favourite-color"> Green</input>
<input type="radio" value="4" name="Favourite-color"> Orange </input>
  </label>
</fieldset>
<fieldset>
<label>Favourite season
<input class="inline" type="checkbox" value="1">Summer</input>
<input class="inline" type="checkbox" value="2">Winter</input>
<input class="inline" type="checkbox" value="3">Autumm</input>
<input  type="checkbox" value="4" class="inline" >Spring</input>
  </label>
</fieldset>
<fieldset>

<label class="ac"> Additonal Comments</label>

  <textarea  placeholder="Comments" rows="3" cols="30" ></textarea>

     <label>
</fieldset>
<input type="submit" value="Submit" />

</form>


</body>
  </html>

/* file: styles.css */
body{
  width: 100%;
  margin: 0;
  background: linear-gradient(black, rgb(82, 82, 82), rgb(145, 142, 142));
  color: #f5f6f7;
  font-family: Palatino ;
  font-size: 16px;
}

h1, p{
  text-align: center;
  margin: 0.5rem auto;
}

form{
  width: 60vwl;
  max-width: 500px;
  min-width: 300px;
  margin: auto;
  padding: 2em;
}

fieldset{
  padding: 1.5em 0;
  border: none;
  border-bottom: 3px solid #e5e3d9;
}

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

input, textare, select{
  width: 100%;
}

.ac{
  text-align: auto;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  min-width: 300px;
}

fieldset:last-of-type{
border-bottom: none;
}


textare {
  width: ;
  min-height: 2em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

You have a typo in your textarea selector. After fixing that you can add 100% to the width property.

As an aside. The input element does not take content which means it does not use a closing tag. There is only one tag <input> and no closing tag </input>

4

Thanks so much that worked

1 Like
5

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