Task 4 - Styling Forms

The form.html code is given below, define styles in head section such that the form should look as per attached form.png. Do not use 'br' element. Try to use minimum styles to achieve the required interface, use all type of selectors i.e. element name, class and id. Style help image is also attached. The form-help.png shall help you deciding what specific style to apply on different page elements.

<!doctype html>

<html>
<head>

 <style>
  /* define all styles here */ 
 </style>

</head>

<body>
<div id="container">
 <h1> Student Registration Form </h1>
 
 <form method="GET" action="register.jsp">
 
  <div class="userinput">
   <label> First Name  </label> 
   <input type="text" name="firstName" value="" /> 
  </div>
  
  <div class="userinput">
   <label> Last Name  </label> 
   <input type="text" name="lastName" value="" />
  </div>
  
  <div class="userinput">
   <label> Email </label>   
   <input type="text" name="email" value="" />
  </div>
  
  <div class="userinput">
   <label> Gender </label>
   <input type="radio" name="gender" value="m"/> Male
   <input type="radio" name="gender" value="f" /> Female    
  </div>
  
  <div class="userinput">
   <label> Choose Subjects </label>    
   <input type="checkbox" name="subject" value="OOP"/> OOP 
   <input type="checkbox" name="subject" value="DB" checked/> Database 
   <input type="checkbox" name="subject" value="Web"/> Web Technologies 
   <input type="checkbox" name="subject" value="Android"/> Android Dev. 
  </div>
  
  <div class="userinput">
   <label>Comments </label>
   <textarea name="comments" rows="7" cols="40">Description comes here...</textarea> 
  </div>
  
  <div class="userinput">
   <label>City </label>
   <select name="city">
    <option value="1">Lahore</option>
    <option value="2">Karachi</option>
    <option value="3">Islamabad </option>
   </select>
  </div>
  
  <div style="text-align:center">
   <input type="reset" class="sampleBtn"/>
   <input type="submit" class="sampleBtn"/>   
  </div>
  
 </form>
 
 </div>
 
</body>

</html>
Add styles such that the form shall look like this:


Here is guideline for you to decide what style properties you need to apply.



_____________________

After above form, please create as-is webpage that shall look like a facebook login form.




Comments

Post a Comment