<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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>Erfassung der Arbeitsplatzbereiche</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="usr_name">Name</label> <div class="col-md-6"> <input id="usr_name" name="usr_name" placeholder="" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="usr_section">Abteilung</label> <div class="col-md-6"> <input id="usr_section" name="usr_section" placeholder="" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="usr_sector">Bereich</label> <div class="col-md-6"> <input id="usr_sector" name="usr_sector" placeholder="" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="job_title">Tätigkeitsbenennung</label> <div class="col-md-6"> <input id="job_title" name="job_title" placeholder="" class="form-control input-md" type="text"> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="use_ccm">CCM Nutzung</label> <div class="col-md-4"> <label class="checkbox-inline" for="use_ccm-0"> <input name="use_ccm" id="use_ccm-0" value="1" type="checkbox"> Ja </label> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="ccm_text">Wenn Ja für welche Tätigkeiten</label> <div class="col-md-4"> <textarea class="form-control" id="ccm_text" name="ccm_text"></textarea> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="use_office">Office</label> <div class="col-md-4"> <div class="checkbox"> <label for="use_office-0"> <input name="use_office" id="use_office-0" value="Word" type="checkbox"> Word </label> </div> <div class="checkbox"> <label for="use_office-1"> <input name="use_office" id="use_office-1" value="Excel" type="checkbox"> Excel </label> </div> <div class="checkbox"> <label for="use_office-2"> <input name="use_office" id="use_office-2" value="Outlook" type="checkbox"> Outlook </label> </div> <div class="checkbox"> <label for="use_office-3"> <input name="use_office" id="use_office-3" value="Access" type="checkbox"> Access </label> </div> <div class="checkbox"> <label for="use_office-4"> <input name="use_office" id="use_office-4" value="Viso" type="checkbox"> Viso </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="office_text">Wenn Ja für welche Tätigkeiten</label> <div class="col-md-4"> <textarea class="form-control" id="office_text" name="office_text"></textarea> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="use_pdf">PDF</label> <div class="col-md-4"> <div class="checkbox"> <label for="use_pdf-0"> <input name="use_pdf" id="use_pdf-0" value="PDF-Tools 4" type="checkbox"> PDF-Tools 4 </label> </div> <div class="checkbox"> <label for="use_pdf-1"> <input name="use_pdf" id="use_pdf-1" value="PDF Viewer" type="checkbox"> PDF Viewer </label> </div> <div class="checkbox"> <label for="use_pdf-2"> <input name="use_pdf" id="use_pdf-2" value="Adobe DC" type="checkbox"> Adobe DC </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="use_pdf">Wenn Ja für welche Tätigkeiten</label> <div class="col-md-4"> <textarea class="form-control" id="use_pdf" name="use_pdf"></textarea> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="use_other">Weitere Digitale Tools</label> <div class="col-md-4"> <label class="checkbox-inline" for="use_other-0"> <input name="use_other" id="use_other-0" value="1" type="checkbox"> Ja </label> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="use_other_tools">Wenn Ja für welche Tätigkeiten</label> <div class="col-md-4"> <textarea class="form-control" id="use_other_tools" name="use_other_tools"></textarea> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id">Double Button</label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-success">Good Button</button> <button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button> </div> </div> </fieldset> </form>