<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Formulario</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_nombre">Nombres</label> <div class="col-md-4"> <input id="id_nombre" name="id_nombre" type="text" placeholder="Ingrese sus Nombres" class="form-control input-md" required=""> <span class="help-block">Ej: Juan Antonio</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_apellido">Apellidos</label> <div class="col-md-4"> <input id="id_apellido" name="id_apellido" type="text" placeholder="Ingrese sus Apellidos" class="form-control input-md" required=""> <span class="help-block">Ej: Gomez Padilla</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_identidad">No. Identidad</label> <div class="col-md-5"> <input id="id_identidad" name="id_identidad" type="text" placeholder="Ingrese su Numero de Identidad" class="form-control input-md" required=""> <span class="help-block">Ej: 0801-1999-09099</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_fechan">Fecha de Nacimiento</label> <div class="col-md-4"> <input id="id_fechan" name="id_fechan" type="date" placeholder="Ingrese Su Edad" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="generos">Genero</label> <div class="col-md-4"> <div class="radio"> <label for="generos-0"> <input type="radio" name="generos" id="generos-0" value="hombre" checked="checked"> Hombre </label> </div> <div class="radio"> <label for="generos-1"> <input type="radio" name="generos" id="generos-1" value="mujer"> Mujer </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_email">Correo Electronico</label> <div class="col-md-4"> <input id="id_email" name="id_email" type="email" placeholder="Ingrese Su Correo Electronico" class="form-control input-md"> <span class="help-block">Ej: Ejejemplo@yahoo.com</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_cel">Celular/Telefono</label> <div class="col-md-4"> <input id="id_cel" name="id_cel" type="tel" placeholder="Ingrese Su Teléfono o Celular" class="form-control input-md"> <span class="help-block">Ej: 3333-3333</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="id_institucion">Institución</label> <div class="col-md-6"> <input id="id_institucion" name="id_institucion" type="text" placeholder="Ingrese la Institución que Representa" class="form-control input-md"> <span class="help-block">Ej: Secretaria de Educación</span> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="id_pais">Pais</label> <div class="col-md-4"> <select id="id_pais" name="id_pais" class="form-control"> <option value="1">Honduras</option> <option value="2">España</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="id_departamento">Departamento</label> <div class="col-md-4"> <select id="id_departamento" name="id_departamento" class="form-control"> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="id_comunidad">Comunidad</label> <div class="col-md-4"> <select id="id_comunidad" name="id_comunidad" class="form-control"> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="id_participante">Participante</label> <div class="col-md-4"> <select id="id_participante" name="id_participante" class="form-control"> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="id_etnia">Etnia</label> <div class="col-md-4"> <select id="id_etnia" name="id_etnia" class="form-control"> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Text Input</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"> <span class="help-block">help</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Text Input</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"> <span class="help-block">help</span> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="id_aceptar"></label> <div class="col-md-8"> <button id="id_aceptar" name="id_aceptar" class="btn btn-success">Aceptar y Enviar</button> <button id="id_cancelar" name="id_cancelar" class="btn btn-danger">Cancelar</button> </div> </div> </fieldset> </form> </div>