+ <div id="menu">
+ <h1>CharmBypass</h1>
+ <h2>doing transit equity whether they like it or not</h2>
+
+ <p>
+ <em>Hint:</em> If you think the driver or fare inspector will
+ actually check it, the daily security code is the same on a
+ $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train
+ ticket. It's also the same on your friend's phone, or for
+ anyone else in Maryland that day.
+ </p>
+
+ <form>
+ <fieldset>
+ <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+ <div>
+ <label for="code1">
+ Daily security code (optional):
+ </label>
+ <input id="code1"
+ name="code"
+ type="text"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]+" />
+ </div>
+ <input type="hidden" name="servicename" value="BaltimoreLink" />
+ <input type="submit" name="go" value="Get Ticket" />
+ </fieldset>
+ </form>
+ <form>
+ <fieldset>
+ <legend>Commuter Bus</legend>
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="Commuter Bus" />
+
+ <div>
+ <label for="code2">
+ Daily security code (optional):
+ </label>
+ <input id="code2"
+ name="code"
+ type="text"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]+" />
+ </div>
+
+ <h3>Zone</h3>
+ <div>
+ <input required type="radio" id="zone1" name="zone" value="Zone 1" />
+ <label for="zone1">Zone 1</label>
+ </div>
+ <div>
+ <input required type="radio" id="zone2" name="zone" value="Zone 2" />
+ <label for="zone2">Zone 2</label>
+ </div>
+ <div>
+ <input required type="radio" id="zone3" name="zone" value="Zone 3" />
+ <label for="zone3">Zone 3</label>
+ </div>
+ <div>
+ <input required type="radio" id="zone4" name="zone" value="Zone 4" />
+ <label for="zone4">Zone 4</label>
+ </div>
+ <div>
+ <input required type="radio" id="zone5" name="zone" value="Zone 5" />
+ <label for="zone5">Zone 5</label>
+ </div>
+
+ <input type="submit" name="go" value="Get Ticket" />
+ </fieldset>
+ </form>
+ <form>
+ <fieldset>
+ <legend>MARC Train</legend>
+
+ <div>
+ <label for="code3">
+ Daily security code (optional):
+ </label>
+ <input id="code3"
+ name="code"
+ type="text"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]+" />
+ </div>
+
+ <h3>Origin</h3>
+
+ <div>
+ <input required type="radio" id="origin1" name="origin" value="BAL" />
+ <label for="origin1">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin2" name="origin" value="BCA" />
+ <label for="origin2">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin3" name="origin" value="BWE" />
+ <label for="origin3">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin4" name="origin" value="BWI" />
+ <label for="origin4">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin5" name="origin" value="CPK" />
+ <label for="origin5">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin6" name="origin" value="SEB" />
+ <label for="origin6">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin7" name="origin" value="WAS" />
+ <label for="origin7">Washington D.C.</label>
+ </div>
+ <div>
+ <input required type="radio" id="origin8" name="origin" value="WBL" />
+ <label for="origin8">West Baltimore (Penn Line)</label>
+ </div>
+
+ <h3>Destination</h3>
+ <div>
+ <input required type="radio" id="destination1" name="destination" value="BAL" />
+ <label for="destination1">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination2" name="destination" value="BCA" />
+ <label for="destination2">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination3" name="destination" value="BWE" />
+ <label for="destination3">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination4" name="destination" value="BWI" />
+ <label for="destination4">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination5" name="destination" value="CPK" />
+ <label for="destination5">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination6" name="destination" value="SEB" />
+ <label for="destination6">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination7" name="destination" value="WAS" />
+ <label for="destination7">Washington D.C.</label>
+ </div>
+ <div>
+ <input required type="radio" id="destination8" name="destination" value="WBL" />
+ <label for="destination8">West Baltimore (Penn Line)</label>
+ </div>
+
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="MARC Train" />
+ <input type="submit" name="go" value="Get Ticket" />
+ </fieldset>
+ </form>
+ </div>
+