Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
rafaelikira

Como fazer uma tela de opções para escolher dois tipos diferentes de formulário?

Perguntado por rafaelikira

Pergunta

rafaelikira    0

rafaelikira
Postado

Preciso fazer o seguinte: tenho dois formulários criados. O que eu preciso é fazer com que meus botões 'radio', ao ser selecionado, mostre apenas um dos formulários.

Segue abaixo meu código. 

<!-- Início do Formulário -->
		<div class="container text-left" style="margin-top:50px;">
				
			<!-- Radio Button Option -->
			<div class="container text-left shadow-lg p-3 mb-5 bg-white rounded" style="margin-top:20px;">
				<div class="container text-left" style="margin-top:20px;">
					<div class="alert alert-success" role="alert">
						<h4 class="alert-heading"> Selecione uma opção </h4>
						<hr>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
								<label class="form-check-label" for="inlineRadio1"> Aluno </label>
						</div>

						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
								<label class="form-check-label" for="inlineRadio2"> Professor </label>
						</div>
					</div>
				</div>
			</div>
			<!-- END: Radio Button Option -->


										<!-- PROFESSOR  -->
<!-- =============================================================================================================================== -->
			<div class="shadow-lg p-3 mb-5 bg-white rounded" id="professor">
				<form name="formCadProf" id="cadProf" method="post" action="cadastrar.php">
					
					<div class="alert alert-success" role="alert">
						<h4 class="alert-heading"> Professor </h4>
						<p> Insira as informações nos campos abaixo.</p>
						<hr>
						<p class="mb-0"> Todas as informações neste campo são obrigatórias. </p>
					</div>

					<!-- Div da linha onde vai estar os campos 'nome' e 'sobrenome' -->
					<div class="form-row form-group">
						<div class="col-sm-4">
							<label for="nome"> Nome: </label>
							<input type="text" class="form-control" name="nome-orien" required="">
						</div>

						<div class="col-sm-8">
							<label for="sobrenome"> Sobrenome: </label>
							<input type="text" class="form-control" name="s-nome-orien" required="">
						</div>
					</div>
					<!-- Fim da DIV nome/sobrenome -->

					<div class="form-group">
						<label for="cpf"> CPF: </label>
						<input type="text" class="form-control" name="cpf-orien" placeholder="Somente números" required="">
					</div>

					<div class="form-group">
						<label for="n-registro"> Numero de Registro: </label>
						<input type="text" class="form-control" name="n-reg-orien" required="">
					</div>

					<!-- Dados acadêmicos -->
					<p class="lead text-center" style="padding-top:50px;"> Dados acadêmicos </p>

					<div class="form-row">
						<div class="col-sm-8" style="padding-top:12px;">
							<label for="graduacao"> Nível de Graduação: </label>
							<input type="text" class="form-control" name="grad-orien" required="">
						</div>

						<!--  -->
						<div class="col-sm-4" style="padding-top:12px;">
							<label for="atuacao"> Área de Atuação: </label>
							<input type="text" class="form-control" name="at-orien" required="">
						</div>
					</div>

					<!-- Dados para Login -->
					<p class="lead text-center" style="padding-top:50px;"> Dados para login </p>

					<div class="form-group" style="padding-top:12px;">
						<label for="nome"> E-mail </label>
						<input type="email" class="form-control" name="email-orien" placeholder="exemplo@exemplo.com" required="">
					</div>

					<div class="form-group">
						<label for="nome"> Senha </label>
						<input type="password" class="form-control" name="senha-orien" placeholder="****" required="">
					</div>

					<p> Caro usuário, verifique todas as informações inseridas e clique em Cadastrar </p>

					<button type="submit" class="btn btn-primary"> Cadastrar </button>
				</form>
			</div>
											<!-- FIM DO PROFESSOR -->
<!-- =============================================================================================================================== -->

			</br>

											<!-- ALUNO -->
<!-- =============================================================================================================================== -->
			<div class="shadow-lg p-3 mb-5 bg-white rounded" id="aluno">
				<form name="formCadAluno" id="cadAluno" method="post" action="cadastrar.php">
					
					<div class="alert alert-success" role="alert">
						<h4 class="alert-heading"> Aluno </h4>
						<p> Insira as informações nos campos abaixo.</p>
						<hr>
						<p class="mb-0"> Todas as informações neste campo são obrigatórias. </p>
					</div>

					<!-- Div da linha onde vai estar os campos 'nome' e 'sobrenome' -->
					<div class="form-row form-group">
						<div class="col-sm-4">
							<label for="nome"> Nome: </label>
							<input type="text" class="form-control" name="nome-aluno" required="">
						</div>

						<div class="col-sm-8">
							<label for="sobrenome"> Sobrenome: </label>
							<input type="text" class="form-control" name="s-nome-aluno" required="">
						</div>
					</div>
					<!-- Fim da DIV nome/sobrenome -->

					<div class="form-group">
						<label for="cpf"> CPF: </label>
						<input type="text" class="form-control" name="cpf-aluno" placeholder="Somente números" required="">
					</div>

					<div class="form-group">
						<label for="n-registro"> SIAPE: </label>
						<input type="text" class="form-control" name="siape-aluno" required="">
					</div>

					<!-- Dados acadêmicos -->
					<p class="lead text-center" style="padding-top:50px;"> Dados acadêmicos </p>

					<div class="form-row">
						<div class="col-sm-8" style="padding-top:12px;">
							<label for="graduacao"> Curso: </label>
							<input type="text" class="form-control" name="curso-aluno" required="">
						</div>

						<div class="col-sm-4" style="padding-top:12px;">
							<label for="atuacao"> Período: </label>
							<select class="form-control"> 
								<option> 1 </option>
								<option> 2 </option>
								<option> 3 </option>
								<option> 4 </option>
								<option> 5 </option>
								<option> 6 </option>
								<option> 7 </option>
								<option> 8 </option>
								<option> 9 </option>
								<option> 10 </option>
							</select>
						</div>
					</div>

					<!-- Dados para Login -->
					<p class="lead text-center" style="padding-top:50px;"> Dados para login </p>

					<div class="form-group" style="padding-top:12px;">
						<label for="nome"> E-mail </label>
						<input type="email" class="form-control" name="email-aluno" placeholder="exemplo@exemplo.com" required="">
					</div>

					<div class="form-group">
						<label for="nome"> Senha </label>
						<input type="password" class="form-control" name="senha-aluno" placeholder="****" required="">
					</div>

					<p> Caro usuário, verifique todas as informações inseridas e clique em Cadastrar </p>

					<button type="submit" class="btn btn-primary"> Cadastrar </button>
				</form>
			</div>

											<!-- FIM DO ALUNO -->
<!-- =============================================================================================================================== -->

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

1 resposta a esta questão

Recommended Posts

Ir para lista de Perguntas Perguntas e respostas rápidas

  • Conteúdo Similar

    • luiz monteiro
      Evitar que o navegador limpe os campos de input quando a guia perde o foco
      Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • daemon
      gerar sitemap.xml
      Por daemon
      Tenho um site com mais de 50.000 notícias, queria gerar um sitemap.xml.

      Existe algo gratuito ? O site foi desenvolvido do zero.
    • daemon
      gerar sitemap.xml
      Por daemon
      Tenho um site com mais de 50.000 notícias, queria gerar um sitemap.xml.

      Existe algo gratuito ? O site foi desenvolvido do zero.
    • belann
      Navbar no Nextjs
      Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito