Ir ao conteúdo
  • Cadastre-se

Código para confirmação de senha em HTML


Posts recomendados

Boa noite galera, estou criando uma página em HTML que tem um formulário onde o usuário preenche os devidos campos e um desses campos é o password, só que eu queria que ele digitasse duas vezes para confirmar, mas infelizmente não sei como fazer isso, por favor me ajudem.

Código HTML

 

<form action="action.php" method="post">
		<p>Nome de Usuário: <input type="text" name="nome" size="20" maxlength="16"/></p>
		<p>Senha: <input type="password" name="senha" size="20" maxlength="16"/></p> 
		<p>Confirmar senha: <input type="password" name="senha2" size="20" maxlength="16"/></p> 
		<p><input type="submit"/></p>		
</form>

 

Link para o comentário
Compartilhar em outros sites

15 horas atrás, Jefter Rocha disse:

<form action="action.php" method="post"> <p>Nome de Usuário: <input type="text" name="nome" size="20" maxlength="16"/></p> <p>Senha: <input type="password" name="senha" size="20" maxlength="16"/></p> <p>Confirmar senha: <input type="password" name="senha2" size="20" maxlength="16"/></p> <p><input type="submit"/></p> </form>

 

Em teoria é esse código mesmo, você só precisa colocar os dois campos como obrigatórios com o atributo required. E caso queira, fazer uma validação javascript para ver se as duas senhas estão iguais (no código abaixo eu usei o jquery):

 

<form action="action.php" method="post"> 
  <p>Nome de Usuário: <input type="text" id="inputNome" name="nome" size="20" maxlength="16" required='true'/></p> 
  <p>Senha: <input type="password" name="senha" id="inputSenha" size="20" maxlength="16" required='true'/></p> 
  <p>Confirmar senha: <input type="password" name="senha2" id="inputSenha2" size="20" maxlength="16" required='true'/></p> 
  <p><input type="submit" id="inputSubmit"/></p> 
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
	$("#inputSubmit").click(function(){
      var senha = $("#inputSenha").val();
      var senha2 = $("#inputSenha2").val();
      if(senha != senha2){
        event.preventDefault();
      	alert("As senhas não são iguais!");
      }
    });
  });
</script>

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@JonathanMMachado Valeu! se não for incomodo gostaria tambem de saber como atribuir uma cor para radiobuttons, digo, tenho 16 radiobuttons(16 cores) para o usuário selecionar, queria que ao invés do nome "Preto" "Azul' "Verde", fosse a cor ao lado do button(ou o próprio) o código ta mais ou menos assim:

<input type="radio" name="preto" id="preto_input"/>
<input type="radio" name="azul" id="azul_input"/> 
<input type="radio" name="verde" id="verde_input"/> 
<input type="radio" name="verde_agua" id="verde_agua_input"/> 
<input type="radio" name="vermelho" id="vermelho_input"/>
<input type="radio" name="roxo" id="roxo_input"/> 
<input type="radio" name="amarelo" id="amarelo_input"/> 
<input type="radio" name="branco" id="branco_input"/> 
<input type="radio" name="cinza" id="cinza_input"/> 
<input type="radio" name="azul_claro" id="azul_claro_input"/>
<input type="radio" name="verde_claro" id="verde_claro_input"/> 
<input type="radio" name="vermelho_claro" id="vermelho_claro_input"/> 
<input type="radio" name="verde_agua_claro" id="verde_agua_claro_input"/> 
<input type="radio" name="lilas" id="lilas_input"/> 
<input type="radio" name="amarelo_claro" id="amarelo_claro_input"/>
<input type="radio" name="branco_brilhante" id="branco_brilhante_input"/>

 

Link para o comentário
Compartilhar em outros sites

14 minutos atrás, Jefter Rocha disse:

@JonathanMMachado Valeu! se não for incomodo gostaria tambem de saber como atribuir uma cor para radiobuttons, digo, tenho 16 radiobuttons(16 cores) para o usuário selecionar, queria que ao invés do nome "Preto" "Azul' "Verde", fosse a cor ao lado do button(ou o próprio) o código ta mais ou menos assim:


<input type="radio" name="preto" id="preto_input"/>
<input type="radio" name="azul" id="azul_input"/> 
<input type="radio" name="verde" id="verde_input"/> 
<input type="radio" name="verde_agua" id="verde_agua_input"/> 
<input type="radio" name="vermelho" id="vermelho_input"/>
<input type="radio" name="roxo" id="roxo_input"/> 
<input type="radio" name="amarelo" id="amarelo_input"/> 
<input type="radio" name="branco" id="branco_input"/> 
<input type="radio" name="cinza" id="cinza_input"/> 
<input type="radio" name="azul_claro" id="azul_claro_input"/>
<input type="radio" name="verde_claro" id="verde_claro_input"/> 
<input type="radio" name="vermelho_claro" id="vermelho_claro_input"/> 
<input type="radio" name="verde_agua_claro" id="verde_agua_claro_input"/> 
<input type="radio" name="lilas" id="lilas_input"/> 
<input type="radio" name="amarelo_claro" id="amarelo_claro_input"/>
<input type="radio" name="branco_brilhante" id="branco_brilhante_input"/>

 

 

Se a sua intenção é que o usuário selecione uma cor para alguma coisa, utilize input color.

E mais uma coisa, se você utiliza radio button, quer que o usuário selecione apenas uma das opções, para isso o name de todos os radios button tem que ser iguais.

Mas respondendo sua pergunta, dá sim:

 

<style>
  .bubble{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: inline-block;
  }

  .bubble-sm{
    width: 20px!important;
    height: 20px!important;
  }
</style>
<p><input type="radio" name="color" value="blue" /><div class="bubble bubble-sm" style="background-color: blue"></div></p>
<p><input type="radio" name="color" value="red" /><div class="bubble bubble-sm" style="background-color: red"></div></p>
<p><input type="radio" name="color" value="orange" /><div class="bubble bubble-sm" style="background-color: orange"></div></p>

Seria mais ou menos isso (vai ficar um circulo ao lado de cada input)

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...