<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Form Name</legend> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="mentally">How are you feeling mentally?</label> <div class="col-md-4"> <div class="radio"> <label for="mentally-0"> <input type="radio" name="mentally" id="mentally-0" value="worse" checked="checked"> Worse than usual </label> </div> <div class="radio"> <label for="mentally-1"> <input type="radio" name="mentally" id="mentally-1" value="same"> Same as usual </label> </div> <div class="radio"> <label for="mentally-2"> <input type="radio" name="mentally" id="mentally-2" value="better"> Better than usual </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="mentallyhow">In what way?</label> <div class="col-md-4"> <textarea class="form-control" id="mentallyhow" name="mentallyhow">Tell us how you are feeling mentally</textarea> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="breathing">How breathless are you?</label> <div class="col-md-4"> <div class="radio"> <label for="breathing-0"> <input type="radio" name="breathing" id="breathing-0" value="worse" checked="checked"> Worse than usual </label> </div> <div class="radio"> <label for="breathing-1"> <input type="radio" name="breathing" id="breathing-1" value="same"> Same as usual </label> </div> <div class="radio"> <label for="breathing-2"> <input type="radio" name="breathing" id="breathing-2" value="better"> Better than usual </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="spit">How much sputum are you bringing up?</label> <div class="col-md-4"> <div class="radio"> <label for="spit-0"> <input type="radio" name="spit" id="spit-0" value="less-fine" checked="checked"> Less than usual (and I feel fine) </label> </div> <div class="radio"> <label for="spit-1"> <input type="radio" name="spit" id="spit-1" value="less-bad"> Less than usual (I wish I could clear more) </label> </div> <div class="radio"> <label for="spit-2"> <input type="radio" name="spit" id="spit-2" value="same"> Same as usual </label> </div> <div class="radio"> <label for="spit-3"> <input type="radio" name="spit" id="spit-3" value="more-bad"> More than usual (I think something's wrong) </label> </div> <div class="radio"> <label for="spit-4"> <input type="radio" name="spit" id="spit-4" value="more-good"> More than usual (which is what I want) </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="cough">How is your cough?</label> <div class="col-md-4"> <div class="radio"> <label for="cough-0"> <input type="radio" name="cough" id="cough-0" value="worse" checked="checked"> Worse than usual </label> </div> <div class="radio"> <label for="cough-1"> <input type="radio" name="cough" id="cough-1" value="same"> Same as usual </label> </div> <div class="radio"> <label for="cough-2"> <input type="radio" name="cough" id="cough-2" value="better"> Better than usual </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="bowels">How are your bowels?</label> <div class="col-md-4"> <div class="radio"> <label for="bowels-0"> <input type="radio" name="bowels" id="bowels-0" value="fine" checked="checked"> Fine thanks </label> </div> <div class="radio"> <label for="bowels-1"> <input type="radio" name="bowels" id="bowels-1" value="tricky"> Bit tricky </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="backup">Do you have a 14 day course of your backup antibiotics at home?</label> <div class="col-md-4"> <div class="radio"> <label for="backup-0"> <input type="radio" name="backup" id="backup-0" value="1" checked="checked"> No, I need some </label> </div> <div class="radio"> <label for="backup-1"> <input type="radio" name="backup" id="backup-1" value="2"> Yes, I have them at home </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="anythingelse">Anything else?</label> <div class="col-md-4"> <textarea class="form-control" id="anythingelse" name="anythingelse">Anything else you want to tell us</textarea> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="send"></label> <div class="col-md-4"> <button id="send" name="send" class="btn btn-primary">Send this information to BACFC</button> </div> </div> </fieldset> </form>