HTML and CSS Reference
In-Depth Information
3.15 Example: Sample Form
Problem
You want to present a user with an appointment scheduling form, for example, for
scheduling a doctor's appointment.
Solution
<!DOCTYPE html>
<html>
<head>
<title>Appointment Scheduler</title>
</head>
<body>
<h1>Appointment Scheduler</h1>
<form>
<fieldset>
<legend>Personal Information</legend>
<p><label>Name <input type="text" name="name" required></label></p>
<p><label>Telephone number <input type="tel" name="phone" required
pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}" title="North American format:
XXX-XXX-XXXX"></label></p>
<p><label>E-mail address <input type="email" name="email"></label></p>
<p><label>Date of birth <input type="date" name="dob"></label></p>
</fieldset>
<fieldset>
<legend>Appointment Request</legend>
<p><label for="reason">What is the reason for your visit?</label>
<datalist id="reasons">
<select name="reason">
<option>Annual physical</option>
<option>Cold or flu symptoms</option>
<option>Blood test</option>
<option>Post-operative</option>
<option>Other</option>
</select>
If other, please specify:
</datalist>
<input id="reason" name="reason" list="reasons"></p>
<p><label>Current pain level <input type="range" name="pain" min="0"
max="10" step=".5" value="5" title="0 is no pain, 10 is worst pain
imaginable"></label></p>
<p><label>Preferred date <input type="date" name="date" required
min="2011-03-15" max="2012-03-14"></label></p>
<p><label>Preferred time <input type="time" name="time" required
min="08:00" max="18:00" step="1:00"></label></p>
</fieldset>
