Task 4 - Styling Forms

In form.html page (html code given below), define styles in head section such that the form should look as per attached image 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.  Use form-help.png for styling details.

<!doctype html>


  /* define all styles here */ 


<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 class="userinput">
   <label> Last Name  </label> 
   <input type="text" name="lastName" value="" />
  <div class="userinput">
   <label> Email </label>   
   <input type="text" name="email" value="" />
  <div class="userinput">
   <label> Gender </label>
   <input type="radio" name="gender" value="m"/> Male
   <input type="radio" name="gender" value="f" /> Female    
  <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 class="userinput">
   <label>Comments </label>
   <textarea name="comments" rows="7" cols="40">Description comes here...</textarea> 
  <div class="userinput">
   <label>City </label>
   <select name="city">
    <option value="1">Lahore</option>
    <option value="2">Karachi</option>
    <option value="3">Islamabad </option>
  <div style="text-align:center">
   <input type="reset" class="sampleBtn"/>
   <input type="submit" class="sampleBtn"/>   


Add styles such that the form shall look like this:

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


Popular posts from this blog

Task 12 - Create Java Program with MySQL Database Connectivity

Java Interfaces and Exception Handling - Practice Problem with Solution

Task 16 - Javafx Program to Create, Retrieve, Update and Delete records with Database