Question

An example of a health form with the following requirements:

1. Create a meaningful form for your application, for example, a health monitoring app

2. Edit CSS for your application. The page must be styled with at least 10 CSS styles

This is using Visual Studio to use reactive form application

Answer 1

For HTML-

<div class="container">
  <form action="page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname"placeholder="Your name">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname"placeholder="Your last name">

    <label for="Doctor">Doctor</label>
    <select id="Doctor" name="Doctor">
      <option value="Dermatology">dermatology</option>
      <option value="Internal medicine">internal medicine</option>
      <option value="Opthamalogy">opthamalogy</option>
    </select>

    <label for="subject">Description</label>
    <textarea id="subject" name="subject" placeholder="Write your illness description" style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>

For css-

input[type=text], select, textarea {

  width: 100%;

  padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

margin-top: 6px;

  margin-bottom: 16px;

  resize: vertical

}

input[type=submit] {

  background-color: #4CAF50;

  color: white;

  padding: 12px 20px;

  border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

.container {

  border-radius: 5px;

  background-color: #f2f2f2;

  padding: 20px;

}