design a basic patient registrtion form. This form should utilize all of the major form elements we've covered including text boxes, check boxes, radio buttons, select lists, and text areas. At least one of each of these should be utilized on the form and feel free to use others. It also should include sections to input: Patient Information - Name, Address, Phone numbers, Alergies Family Histroy - Space for at least three relatives, how they are related, and at lease two medical conditions per person Prescription History - Name of medication, dosage, how frequently it is taken, etc. Medical History - Space to enter previous medical conditions including when the condition first appeared, and whether it is an ongoing problem This form should then submit to a php page that will process the information and display it formatted as a 'medical chart'. Information about the patient should be placed at the top with some sort of separator to segment it from the rest of the information. Note: You may make use of bootstrap and other CSS libraries for parts of your design, but the HTML layout should be your own work.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Formicon-Flat Forms Pack</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="icons/styles.css">
<link rel="stylesheet" href="css/bootstrap-custom.css">
<link rel="stylesheet" href="css/registration-form.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Register Form -->
<div class="form-wrapper"> <!-- Form-wrapper only for positioning -->
<form action="#non" method="post" class="fcorn-register container">
<p class="register-info">Note: All fields are required.</p>
<div class="row">
<p class="col-md-6"><input type="text" placeholder="First Name" required></p>
<p class="col-md-6"><input type="text" placeholder="Last Name" required></p>
</div>
<p><input type="email" placeholder="Email Address" required>
<span class="extern-type">We'll keep this private.</span>
</p>
<p><input type="password" placeholder="Password" required>
<span class="extern-type">Atleast 8 characters long.</span>
</p>
<p><input type="password" placeholder="Verify Password" required></p>
<div class="row">
<p class="col-md-4"><input type="text" placeholder="Date (dd)" required></p>
<p class="col-md-4"><input type="text" placeholder="Month (mm)" required></p>
<p class="col-md-4"><input type="text" placeholder="Year (yyyy)" required></p>
<p class="col-md-12"><input type="text" placeholder="Membership code"><span class="extern-type">Enter your membership code, if you do not have one, leave it blank.</span></p>
</div>
<div class="row">
<p class="col-md-6 city-wrap">
<select>
<option value="0" selected disabled>City</option>
<option value="1">San José</option>
</select>
</p>
<p class="col-md-6 country-wrap">
<!-- Add more country name -->
<select>
<option value="0" selected disabled>Country</option>
<option value="1">U.S. Only</option>
<option value="2">Outside U.S.</option>
</select>
</p>
<div>
<p class="col-xs-12"><form action="upload.php" method="post" enctype="multipart/form-data">
Upload your personal photo:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit" required>
</p>
</div>
<br/>
<p class="register-toggle">
<label for="register-agree" class="toggle-label" data-on="YES" data-off="NO">
<input type="checkbox" id="register-agree" class="toggle-input">
<span class="toggle-handle"></span>
</label>
<span class="info">Do you agree to the <a href="#">terms and conditions?</a></span>
</p>
<p class="register-submit"><input type="submit" value="Register Now"></p>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.placeholder.min.js"></script>
<script type="text/javascript">
$('input, textarea').placeholder();
</script>
<![endif]-->
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
