How to create Appointment form using HTML & CSS | Brothers Study Zone



<!DOCTYPE html>
<html lang="en">
<title>Appointment form</title>
<head>
     <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
     <style>
      .container-fluid{
      background-color: blue;
       
        }

      }
     </style>
      <div class="container-fluid">
      <h2 style="text-align: center;color: white;">Appointment Form</h2>
      <div class="row">
      <div class="col-sm-6">
      <img src="ab2.jpg">
      </div>
         <div class="col-sm6">
     <form>
      <label>
  <div class="form-group">
  <label for="uname">Patients Name:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter name" name="uname" required>
</div>
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
  </div>
  <div class="form-group">
  <label for="uname">Phone Number:</label>
    <input type="number" class="form-control" id="Phone" placeholder="Enter number" name="phone " required>
</div>
<div class="form-group">
<label for ="gender">Sex:</label>
 <input type="radio" id="Male" name="gender" value="Male">
  <label for="other">Male</label>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Female</label> 
</div>
<div class="form-group">
<label for="Specilization">Specilization:</label>
<select id="Specilization">
  <option value="Dentist">Dentist</option>
  <option value="Cardiologist">Cardiologist</option>
  <option value="Neurologist">Neurologist</option>
  <option value="Orthopadist">Orthopedist</option>
   <option value="Gynaecologist">Gynaecologist</option>
    <option value="Orthopadist">Paediatrician</option>
</select> 
</div>
<div class="form-group">
<label for="Choose Hospital">Choose Hospital:</label>
<select> id="Hospital">
  <option value="King Edward Memorial Hospital">King Edward Memorial Hospital</option>
  <option value="Sir Ganga Ram Hospital">Sir Ganga Ram Hospital</option>
  <option value="AIIMS">AIIMS</option>
  <option value="Christian Medical college">Christian Medical college</option>
   <option value="Apollo Hospital">Apollo Hospital</option>
    <option value="Fortist Hospitals">Fortist Hospitals</option>
    <option value="NIMHANS(National Institute of Mental Health and Neuro Sciences)">NIMHANS(National Institute of Mental Health and Neuro Sciences)</option>
    <option value="Tata Memorial Hospital">Tata Memorial Hospital</option>
    <option value="Shankara Nethralaya">Shankara Nethralaya</option>
    <option value="PGIMER(Post Graduate Instituteof Medical Education and Research )">PGIMER(Post Graduate Instituteof Medical Education and Research )</option>
</select>
</div>
  <input type="date" id="birthday" name="birthday">
   <div class="form-group">
<label for ="gender"><h4>Taking Any Medications Currently*:</h4></label>
 <input type="radio" id="Male" name="gender" value="Male">
  <label for="other">Yes</label>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">No</label> 
  <p>If yes,Please List it </p> <hr>
</div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-success">Book Appointment</button>
  </label>
</form> 
      </div>
         </div>
    </div>
     
</body>
Tausif

Hi! My name is TAUSIF AHMAD I have completed B.Tech in Computer Science from Maulana Azad National Urdu University Hyderabad. I am always ready to have new experiences meet new people and learn new things. 1. I am very interested in Frontend Development. 2. I love video editing and graphics designing. 3. I enjoy challenges that enables to grow. 4. I am part time Blogger.

1 Comments

Post a Comment
Previous Post Next Post