Nexhan/build-a-survey-form.markdown

## build-a-survey-form.markdown

      
    Raw
  

              build-a-survey-form.markdown
            
          
    Build a survey Form

My first responsive web designing project
A Pen by Manzil Mudbari on CodePen.
License.

  
## index.html
<body>
  <main>
    <header>
      <h1 id="title">Form to practicipate in soccer cup.</h1>
      <p id="description"><em> Fill out the form and submit before deadline</em></p>
    </header>

    <fieldset>
      <form id="survey-form" action="/my-handling-form-page" method="post">
<!-----------------------------personal details------------------------- -->
        <div>
          <label id="name-label" for="name">Name:</label>
          <input type="name" required
                 id="name" name="user_name"
                 placeholder="Enter your name here."/></div>
        <div>
          <label id="email-label" for="emial">E-mail:</label>
          <input type="email" required
                 id="emial"
                 name="user_email"
                 placeholder="Enter your e-mail here"/></div>
            <div>
              <label id="address-label" for="address">Address:</label>
              <input type="address" required
                     id="address"
                     name="user_address"
                     placeholder="Your recent address"/>
              <div>
                <label id="number-label" for="age">Age:</label>
                <input type="number"
                       id="number"
                       name="user_number"
                       placeholder="Enter your age" min="18" max="145"/>
    </div>
          </div>
            <div>
        <p> Which position best suites you:</p>
          <select id="dropdown" required>
            <option disabled selected value>Select your position.</option>
            <option> Forward</option>
            <option> Mildfield</option>
            <option> Defense </option>
            <option> Goal Kepper </option>
              </select>
            </div>
       </fieldset>

 <!-----------------radio buttons--------------- -->
          <fieldset>

          <div>
            <p>Gender:</p>
            <label>
              <input
                     name= "user-info"
                     class= "input-radio"
                     type="radio"
                     value= "Male"/>Male</label>
            <label>
            <input
                     name= "user-info"
                     class="input-radio"
                     type="radio"
                     value="Female"/>Female</label>
            </div>
            <div>
              <p>Which field you prefer the most.</p>
              <select id="dropdown">
                <option> 5 VS 5 </option>
                <option> 7 VS 7 </option>
                <option> 11 VS 11 </option>
              </select>
            </div>
      </fieldset>

<!--------------checkboces--------------- -->
      <fieldset>
        <legend>Just a simple servey for fan following:</legend>
        <p>Which is your best player</p>
        <div>
          <label>
          <input
                 name= "player-name"
                 class= "fan-info"
                 type="checkbox"/>Cristiano ronaldo</label>
        </div>
        <div>
          <label>
            <input
                   name= "player-name"
                   class= "fan-info"
                   type="checkbox"/> Messi</label>
        </div>
        <div>
          <label>
            <p>tick over your here if your are a fan of other player</p>
            <input
                   name= "player-name"
                   class= "fan-info"
                   type="checkbox"/> other</label>
        </div>
        <div>
          <label id="other-player">Name:</label>
          <input
                 type="text"
                 id="text"
                 placeholder="Enter the name of the player you like"/>
        </div>
      </fieldset>

<!-------------------upload photo---------------- -->
      <fieldset>
        <p>Upload your photo:
        <button> Attach photo </button>
        </P>
    </fieldset>


<!-------------- text area---------------- -->
    <div>
      </p> Anything you like to tell about yourself.</p>
  <textarea
            id="more-info"
            name="text"
            class="text_area"
            placeholder="Enter your comment here....">
            </textarea>
  </div>
    <div>
      <button
              id="submit"
              class="Submit-button"
              name= "Submit">Submit</button>
    </div>
<div>
  <marquee>deadline:Before july24</marquee>
</div>

</form>
</main>
</body>


## style.css
body{
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: white;
    background-image: linear-gradient(
      150deg,
      rgba(80, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://futhead.cursecdn.com/static/uploads/news/fifa-18-ronaldo-cover-art-final-new.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

header{
  text-align: center;
  color: white;
}

p{
  font-size: 1.5rem;
}

#submit{
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: #00FFFF;
  cursor: pointer;
}

.text_area{
  width: 100%;
	height: 120px;
	border: 3px;
	padding: 10px;
  background: #00FFFF;
}

#survey-form{
  text-align: center;
}
	<body>
	<main>
	<header>
	<h1 id="title">Form to practicipate in soccer cup.</h1>
	<p id="description"><em> Fill out the form and submit before deadline</em></p>
	</header>

	<fieldset>
	<form id="survey-form" action="/my-handling-form-page" method="post">
	<!-----------------------------personal details------------------------- -->
	<div>
	<label id="name-label" for="name">Name:</label>
	<input type="name" required
	id="name" name="user_name"
	placeholder="Enter your name here."/></div>
	<div>
	<label id="email-label" for="emial">E-mail:</label>
	<input type="email" required
	id="emial"
	name="user_email"
	placeholder="Enter your e-mail here"/></div>
	<div>
	<label id="address-label" for="address">Address:</label>
	<input type="address" required
	id="address"
	name="user_address"
	placeholder="Your recent address"/>
	<div>
	<label id="number-label" for="age">Age:</label>
	<input type="number"
	id="number"
	name="user_number"
	placeholder="Enter your age" min="18" max="145"/>
	</div>
	</div>
	<div>
	<p> Which position best suites you:</p>
	<select id="dropdown" required>
	<option disabled selected value>Select your position.</option>
	<option> Forward</option>
	<option> Mildfield</option>
	<option> Defense </option>
	<option> Goal Kepper </option>
	</select>
	</div>
	</fieldset>

	<!-----------------radio buttons--------------- -->
	<fieldset>

	<div>
	<p>Gender:</p>
	<label>
	<input
	name= "user-info"
	class= "input-radio"
	type="radio"
	value= "Male"/>Male</label>
	<label>
	<input
	name= "user-info"
	class="input-radio"
	type="radio"
	value="Female"/>Female</label>
	</div>
	<div>
	<p>Which field you prefer the most.</p>
	<select id="dropdown">
	<option> 5 VS 5 </option>
	<option> 7 VS 7 </option>
	<option> 11 VS 11 </option>
	</select>
	</div>
	</fieldset>

	<!--------------checkboces--------------- -->
	<fieldset>
	<legend>Just a simple servey for fan following:</legend>
	<p>Which is your best player</p>
	<div>
	<label>
	<input
	name= "player-name"
	class= "fan-info"
	type="checkbox"/>Cristiano ronaldo</label>
	</div>
	<div>
	<label>
	<input
	name= "player-name"
	class= "fan-info"
	type="checkbox"/> Messi</label>
	</div>
	<div>
	<label>
	<p>tick over your here if your are a fan of other player</p>
	<input
	name= "player-name"
	class= "fan-info"
	type="checkbox"/> other</label>
	</div>
	<div>
	<label id="other-player">Name:</label>
	<input
	type="text"
	id="text"
	placeholder="Enter the name of the player you like"/>
	</div>
	</fieldset>

	<!-------------------upload photo---------------- -->
	<fieldset>
	<p>Upload your photo:
	<button> Attach photo </button>
	</P>
	</fieldset>


	<!-------------- text area---------------- -->
	<div>
	</p> Anything you like to tell about yourself.</p>
	<textarea
	id="more-info"
	name="text"
	class="text_area"
	placeholder="Enter your comment here....">
	</textarea>
	</div>
	<div>
	<button
	id="submit"
	class="Submit-button"
	name= "Submit">Submit</button>
	</div>
	<div>
	<marquee>deadline:Before july24</marquee>
	</div>

	</form>
	</main>
	</body>
	body{
	font-family: 'PT Sans', sans-serif;
	font-weight: 400;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: white;
	background-image: linear-gradient(
	150deg,
	rgba(80, 58, 158, 0.8),
	rgba(136, 136, 206, 0.7)
	),
	url(https://futhead.cursecdn.com/static/uploads/news/fifa-18-ronaldo-cover-art-final-new.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}

	header{
	text-align: center;
	color: white;
	}

	p{
	font-size: 1.5rem;
	}

	#submit{
	display: block;
	width: 100%;
	padding: 0.75rem;
	background: #00FFFF;
	cursor: pointer;
	}

	.text_area{
	width: 100%;
	height: 120px;
	border: 3px;
	padding: 10px;
	background: #00FFFF;
	}

	#survey-form{
	text-align: center;
	}