Place tabs inside a form

Question

I have an html document with tabs. That’s ok. Now, inside one of these tabs, I have a form, where I put my controls. I could not put, inside this form more tabs, so that would have a documanto and inside it two tabs and inside these tabs, but controls on Forms or not.

The div tabs-2 is already a tab, which is part of the main tab. Inside this tab, I have a form and inside it some controls. What I’m looking for is to put two more tabs inside that form that’s inside a tab. That is the intention, that is, the question that I do not know why led downvote. The subtab is that are the new tabs to be inside the main tab. The position of tabs should be at the bottom of the page.

<div id="tabs-2">
   <form class="form-horizontal" role="form">

       <div id="subtabs">
           <li><a href="#tabs-11">EventosPDV</a></li>
           <li><a href="#tabs-21">Minhas Tarefas</a></li>
       </div>

      <div class="form-group">
        <label for="txtCnpj" class="col-md-2 control-label">CNPJ:</label>
        <div class="col-md-4">
          <input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
        </div>
          <label for="imgStatus" class="col-md-2 control-label">Status:</label>
          <div class="col-md-2">
              <img src="~/Images/Certo.png" class="img-responsive col-md-4 control-label" id="imgStatus"/>
        </div>
      </div>

       <div class="form-group">
        <label for="lblRazao" class="col-md-2 control-label">Razão Social:</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
        </div>
      </div>

       <div class="form-group">
        <label for="lblIdEvento" class="col-md-2 control-label">ID Evento:</label>
        <div class="col-md-2">
          <input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
        </div>
      </div>

       <div class="form-group">
        <label for="lblDescricao" class="col-md-2 control-label">Descrição:</label>
        <div class="col-md-3">
          <textarea class="form-control" id="txtDescricao" placeholder="Digite uma descrição" rows="4"></textarea>
        </div>
           <label for="lblTipoEvento" class="col-md-2 control-label">Tipo Evento:</label>
        <div class="col-md-3">
          <select class="form-control" name="ddlTipoEvento" id="ddlTipoEvento" >
              <option selected="selected" value="0"></option>
                <option value="2">Acesso Remoto</option>
                <option value="8">Agendamento de Visita Técnica</option>
                <option value="6">Alteração de Cadastro</option>
                <option value="9">Ativar PDV</option>
                <option value="4">Contato Comercial</option>
                <option value="11">Contato Técnico</option>
                <option value="10">Inativar PDV</option>
                <option value="15">Instalação Extrator Cod. Interno</option>
                <option value="16">Processo 2</option>
                <option value="14">Processo Interno PDV</option>
                <option value="12">Sem Intervenção Técnica</option>
                <option value="1">Visita Técnica</option>
          </select>
        </div>
      </div>

       <div class="form-group">
        <label for="lblAcao" class="col-md-2 control-label">Ação:</label>
        <div class="col-md-3">
          <select class="form-control" id="ddlAcao" >
              <option selected="selected" value="0"></option>
                <option value="2">Acesso Remoto</option>
                <option value="8">Agendamento de Visita Técnica</option>
                <option value="6">Alteração de Cadastro</option>
                <option value="9">Ativar PDV</option>
                <option value="4">Contato Comercial</option>
                <option value="11">Contato Técnico</option>
                <option value="10">Inativar PDV</option>
                <option value="15">Instalação Extrator Cod. Interno</option>
                <option value="16">Processo 2</option>
                <option value="14">Processo Interno PDV</option>
                <option value="12">Sem Intervenção Técnica</option>
                <option value="1">Visita Técnica</option>
          </select>
        </div>
        <label for="lblUsuario" class="col-md-2 control-label">Usuário:</label>
        <div class="col-md-3">
          <select class="form-control" id="ddlUsuario" >
              <option selected="selected" value="0"></option>

          </select>
        </div>
      </div>

       <div class="form-group">
           <label for="lblUsuario" class="col-md-2 control-label">Usuário:</label>
            <div class="col-md-3">
              <input type="text" class="datepicker"/>
            </div>
           <button type="button" class="btn btn-success">Finalizar</button>
        </div>       

       <div id="tabs-11">
       </div>

       <div id="tabs-21">
       </div>

   </form>
  </div>

Answer 1

Solved. I created a jquery function for another set of tabs:

$(function () {
    $("#subtabs").tabs();
});

And then I put my html that will create the tabs in the position where I want the tabs. That worked.

<div id="subtabs"style="border:none">
           <ul>
               <li><a href="#tabs-11">EventosPDV</a></li>
               <li><a href="#tabs-21">Minhas Tarefas</a></li>
           </ul>
......
</div>