+ <div id="menu">
+ <h1>CharmBypass</h1>
+ <p><strong>got that <em>transit equity</em></strong></p>
+
+ <ol>
+ <li>
+ <a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introducing_charmbypass.xhtml">
+ Introduction
+ </a>
+ </li>
+ </ol>
+
+ <form>
+ <fieldset>
+ <legend>Local Bus, Light Rail, or Metro</legend>
+ <div>
+ <label for="code1">
+ Daily security code (optional):
+ </label>
+ <input id="code1"
+ name="code"
+ type="text"
+ size="2"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]*" />
+ </div>
+ <input type="hidden" name="servicename" value="BaltimoreLink" />
+ <input type="submit" name="go" value="Generate 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"
+ size="2"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]*" />
+ </div>
+
+ <p>
+ Zone<sup>†</sup>:
+ </p>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone1"
+ value="Zone 1" />
+ <label for="zone1">Zone 1</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone2"
+ value="Zone 2" />
+ <label for="zone2">Zone 2</label>
+ </div>
+ <div>
+ <input type="radio" required checked
+ name="zone"
+ id="zone3"
+ value="Zone 3" />
+ <label for="zone3">Zone 3</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone4"
+ value="Zone 4" />
+ <label for="zone4">Zone 4</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone5"
+ value="Zone 5" />
+ <label for="zone5">Zone 5</label>
+ </div>
+
+ <input type="submit" name="go" value="Generate Ticket" />
+
+ <p>
+ <sup>†</sup>
+ On the MTA's PDF schedule for your route
+ </p>
+ </fieldset>
+ </form>
+ <form>
+ <fieldset>
+ <legend>MARC Train</legend>
+
+ <div>
+ <label for="code3">
+ Daily security code (optional):
+ </label>
+ <input id="code3"
+ name="code"
+ type="text"
+ size="2"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]*" />
+ </div>
+
+ <p>Origin:</p>
+ <div>
+ <input type="radio" required checked
+ name="origin"
+ id="origin1"
+ value="BAL" />
+ <label for="origin1">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin2"
+ value="BCA" />
+ <label for="origin2">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin3"
+ value="BWE" />
+ <label for="origin3">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin4"
+ value="BWI" />
+ <label for="origin4">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin5"
+ value="CPK" />
+ <label for="origin5">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin6"
+ value="SEB" />
+ <label for="origin6">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin7"
+ value="WAS" />
+ <label for="origin7">Washington D.C.</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin8"
+ value="WBL" />
+ <label for="origin8">West Baltimore (Penn Line)</label>
+ </div>
+
+ <p>Destination:</p>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination1"
+ value="BAL" />
+ <label for="destination1">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination2"
+ value="BCA" />
+ <label for="destination2">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination3"
+ value="BWE" />
+ <label for="destination3">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination4"
+ value="BWI" />
+ <label for="destination4">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination5"
+ value="CPK" />
+ <label for="destination5">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination6"
+ value="SEB" />
+ <label for="destination6">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required checked
+ name="destination"
+ id="destination7"
+ value="WAS" />
+ <label for="destination7">Washington D.C.</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination8"
+ value="WBL" />
+ <label for="destination8">West Baltimore (Penn Line)</label>
+ </div>
+
+ <p id="marc-form-errors">OK</p>
+
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="MARC Train" />
+ <input type="submit"
+ name="go"
+ id="marc-submit"
+ value="Generate Ticket" />
+ </fieldset>
+ </form>
+ </div>
+