Task 4 - Styling Forms

Updated on: Mar. 4, 2024

This is Lab Task to practice basic CSS properties.

Save below code in form.html file and define CSS styles in head section such that the form shall look as per attached image i.e. form.png. Do not use 'br' tag for spacing but use margins etc. Try to keep the code size minumum to create required user interface (UI), so use selectors most effectively to achieve this target. Style guideline image is also attached i.e. form-help.png, please use it to decide what CSS properties shall be applied on which 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 (form.png):

Here is guideline for you to decide what style properties you need to apply. (form-help.png)


_____________________

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


Comments

Post a Comment