0
私はブートストラップには新しく、疑問があります。複数のタブパネルでフォームのフィールドを分割し、動的タブを使用して1つのフォームとしてフォームを送信できるように、タブパネルをフォーム内に配置することは可能ですか？一例として、私は以下のコードを持っています。フォーム内のタブパネル
<div class="content-wrapper">
<section class="content">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#aba1" role="tab" data-toggle="tab">Dados Pessoais</a></li>
<li role="presentation"><a href="#aba2" role="tab" data-toggle="tab">Dados Médicos</a></li>
</ul>
<div class="tab-content">
<form role="form">
<!-- text input -->
<div role="tabpanel" class="tab-pane active" id="aba1">
<div class="box-header with-border">
<h3 class="box-title col-md-12">Dados Pessoais</h3>
</div>
<!-- /.box-header -->
<div class="form-row">
<div class="form-group col-md-6">
<label>Nome do Paciente</label>
<input type="text" class="form-control" placeholder="Nome" required="true">
</div>
<div class="form-group col-md-3">
<label>CPF</label>
<input type="number" class="form-control" placeholder="CPF">
</div>
<div class="form-group col-md-3">
<label>RG</label>
<input type="number" class="form-control" placeholder="RG">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label>Data de Nascimento</label>
<input type="date" class="form-control" placeholder="Data de Nascimento">
</div>
<div class="form-group col-md-2">
<label>Sexo</label>
<select class="form-control">
<option>Masculino</option>
<option>Feminino</option>
</select>
</div>
<div class="form-group col-md-2">
<label>Estado Civil</label>
<select class="form-control">
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
</select>
</div>
<div class="form-group col-md-6">
<label>Nome do Cônjuge</label>
<input type="text" class="form-control" placeholder="Nome do Cônjuge">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Endereço</label>
<input type="text" class="form-control" placeholder="Endereço">
</div>
<div class="form-group col-md-3">
<label>Bairro</label>
<input type="text" class="form-control" placeholder="Bairro">
</div>
<div class="form-group col-md-3">
<label>Cidade</label>
<input type="text" class="form-control" placeholder="Cidade">
</div>
<div class="form-group col-md-2">
<label>CEP</label>
<input type="text" class="form-control" placeholder="CEP">
</div>
</div>
</div>
<!-- /.tabpanel 1 -->
<div role="tabpanel" class="tab-pane" id="aba2">
<div class="box-header with-border">
<h3 class="box-title col-md-12">Dados Médicos</h3>
</div>
<!-- /.box-header -->
<div class="form-row">
<div class="form-group col-md-6">
<label>Nome do Paciente</label>
<input type="text" class="form-control" placeholder="Nome">
</div>
<div class="form-group col-md-3">
<label>CPF</label>
<input type="number" class="form-control" placeholder="CPF">
</div>
<div class="form-group col-md-3">
<label>RG</label>
<input type="number" class="form-control" placeholder="RG">
</div>
</div>
</div>
<!-- /.tabpanel 2 -->
<div class="row">
<!-- left column -->
<div class="col">
<!-- general form elements -->
<div class="box box-warning">
<div class="form-row">
<div class="btn-group-left" role="group">
<button type="button" class="btn btn-primary">Anterior</button>
<button type="button" class="btn btn-primary">Próximo</button>
</div>
<div class="btn-group-right" role="group">
<button type="button" class="btn btn-danger">Cancelar</button>
<button type="submit" class="btn btn-success">Cadastrar</button>
<input type="button" class="btn btn-success" value="Cadastrar">
</div>
</div>
</div>
</div>
<!--/.box box-warning -->
</div>
<!--/.col -->
</div>
<!--/.row -->
</form>
</div>
<!--/.tab-content -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->私は2つのtabpanelsを持つようにしたいので、私は、ダイナミックタブを使用することができますが、私は一つの形として、すべてのフィールドを提出する必要があります。可能です？私はこのテーマについて調査しましたが、jQueryを使用してシリアル化すれば、さまざまなフォームを1つだけ送信できると言っている少数の読者を読んだことがあります。この場合、有効な代替手段ですか？
PS：私はここでもStackoverflowで新しくなっています。私の質問をしている間違いがある場合は、私に教えてください。私はブラジリアンであり、私はテストの役割を果たすアプリケーションを作ろうとしているので、フィールドの名前はポルトガル語です。名前が理解困難な場合は、私に知らせてください、私はそれを翻訳することができます。