Formular in Mehreren Tabs.

[auchmalwer]

Hallo Leute,

ich bin gerade dabei einen Dienstplan zu programmieren und möchte jetzt für die eingabe neuer Dienste ein Formular, das auf 3 Tabs aufgeteilt wird. Nur bekomme ich das nicht so ganz hin. Das formular an sich funktioniert wunderbar nur krieg ich es nicht hin dieses auf die tabs aufzuteilen. vll kann mir ja hier jemand helfen.

Hier der Code, die einzelnen tabs haben noch nicht die richtigen daten drinnen aber mir gehts jetzt einmal um die aufteilung.

<div>

  <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#daten" aria-controls="home" role="tab" data-toggle="tab">Daten</a></li>
        <li role="presentation"><a href="#teilnehmer" aria-controls="profile" role="tab" data-toggle="tab">Teilnehmer</a></li>
        <li role="presentation"><a href="#material" aria-controls="messages" role="tab" data-toggle="tab">Material</a></li>
    </ul>

  <!-- Persönliche Daten-->
  <div class="tab-content">
        <form action="?save=neudienst" method="post" class="form-horizontal">
    <div role="tabpanel" class="tab-pane active" id="daten">
        <br>
            <div class="form-group">
                <label for="inputTitel" class="col-sm-2 control-label">Titel</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputTitel" name="titel" type="text" value="" required>
                </div>
            </div>
            
            <div class="form-group">
                <label for="inputDatum" class="col-sm-2 control-label">Datum</label>
                <div class="col-sm-10">
<!--                    <input class="form-control" id="inputNachname" name="nachname" type="date" > value="<?php //echo htmlentities($user['nachname']); ?>"required>-->
                    <!-- link calendar resources -->
                    <link rel="stylesheet" type="text/css" href="tcal.css" />
                    <script type="text/javascript" src="tcal.js"></script>
                    <!-- add class="tcal" to your input field -->
                    <div><input class="tcal" id="inputDatum" name="datum" type="text"  value=""></div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="inputtimestart" class="col-sm-2 control-label">Beginnzeit</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputtimestart" name="timestart" type="text" value="" required>
                </div>
            </div>
            
            <div class="form-group">
                <label for="inputtimeend" class="col-sm-2 control-label">Endzeit</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputtimeend" name="timeend" type="text" value="" required>
                </div>
            </div>
            
            <div class="form-group">
                <label for="inputbeschreibung" class="col-sm-2 control-label">Beschreibung</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputbeschreibung" name="beschreibung" type="text" value="">
                </div>
            </div>
    </div>
    
    <!-- Änderung der E-Mail-Adresse -->
    <div role="tabpanel" class="tab-pane" id="teilnehmer">
        <br>
            <div class="form-group">
                <label for="inputPasswort" class="col-sm-2 control-label">Passwort</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputPasswort" name="passwort" type="password">
                </div>
            </div>
            
            <div class="form-group">
                <label for="inputEmail" class="col-sm-2 control-label">E-Mail</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputEmail" name="email" type="email" value="">
                </div>
            </div>
            
            
            <div class="form-group">
                <label for="inputEmail2" class="col-sm-2 control-label">E-Mail (wiederholen)</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputEmail2" name="email2" type="email">
                </div>
            </div>
    </div>
    
    <!-- Änderung des Passworts -->
    <div role="tabpanel" class="tab-pane" id="material">
        <br>
            <div class="form-group">
                <label for="inputPasswort" class="col-sm-2 control-label">Altes Passwort</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputPasswort" name="passwortAlt" type="password">
                </div>
            </div>
            
            <div class="form-group">
                <label for="inputPasswortNeu" class="col-sm-2 control-label">Neues Passwort</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputPasswortNeu" name="passwortNeu" type="password">
                </div>
            </div>
            
            
            <div class="form-group">
                <label for="inputPasswortNeu2" class="col-sm-2 control-label">Neues Passwort (wiederholen)</label>
                <div class="col-sm-10">
                    <input class="form-control" id="inputPasswortNeu2" name="passwortNeu2" type="password">
                </div>
            </div>
    </div>
  </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">Speichern</button>
                </div>
            </div>
</div>


</div>

Danke im Vorraus
Stefan

 

[Cheffchen]

Hallo,

krieg ich es nicht hin

ist natürlich eine super Fehlerbeschreibung ;o).

Was denn genau, der Code selber sieht doch ganz gut, 3er Tab menu und 3 Tabs.
Liegt deine frage vielleicht eher am css?
Da wäre ein Online Test besser um zu schauen was wann wo gemacht.

Cheffchen

 

[B3nnoX]

Dein form tag muss vor <div class="tab-content"> kommen.