Agora que você colocou as mensagens no html, se você não fez isso, veja esse clicando nesse link: https://coderprice.blogspot.com/2021/08/sistema-de-cadastro-parte-313.html
Agora é a parte de colocar estilo nas mensagens lá no css, você vai modificar 6 elementos div, label e o img da verificação do campo vazio e caractere inválido(que é a mensagem de "error") e o warning de caracteres necessários para a senha , que criamos lá no html
.errorIconImage
{
margin-top:1px;
margin-left:5px;
height:30px;
}
Esse atributos vai modificar o elemento da imagem de "error", a "margin-top" vai criar um espaçamento de 1 pixel entre o topo e o próprio elemento, o "margin-left" vai criar um espaçamento de 5 pixel entre o lado e o próprio elemento e height vai fazer a altura da imagem ser de 30 pixel
.fieldErrrorMessage
{
position:absolute;
margin-top:10px;
margin-left:5px;
color:#ff0000;
font-weight: bold;
}
Agora vamos modificar as labels, Primeiro vamos colocar o atributo "position" em absolute para poder posicionar o label para cima sem altera a posição da imagem, por padrão a posição dos elementos é definido de acordo com a criação dos elementos(static), ou seja, se você criar um elemento por exemplo
<div>
<label>a</label>
<label>b</label>
</div>
A posição do elemento b vai ser embaixo do elemento a, e não conseguindo manipular o elemento b com atributo "margin-top", mas se colocar no css você coloca a "position:absolute" no label b, a posição do elemento label b vai ser o mesmo que o elemento <div>, podendo manipular sem alterar a posição do label a.
Depois vamos posicionar usando margin-top 10 px e margin-left para 5, para o texto ficar do lado da imagem e depois vamos colocar a cor do text em vermelho para indicar que tem algo errado no campo, usando "color:#ff0000" e depois colocamos o texto em negrito com o atributo "font-weight: bold;"
.errorMessage
{
margin-top:1px;
display:none;
}
e aqui que é a div, que é parte principal, iremos colocar 2 atributos, o margin-top para fazer um espaçamento de 1 pixel entre os campos e a mensagem, e depois iremos colocar o display dele em none, para ele não aparecer, até que você deixe um campo vazio ou digite algum símbolo inválido, que vamos manipular isso no javascript.
E agora iremos fazer quase a mesma coisa com os outros 3 elementos que é o "Warning", mas desta vez no ".fieldWarningMessage" ao invés de colocar a cor da fonte de vermelho(#ff0000), iremos colocar a cor da fonte de amarelo(#ffff00) para indicar que é um aviso e no display do ".WarningMessage" iremos colocar o display block, para ele sumir quando digitar o número caracteres necessários que também iremos fazer no javascript
.warningIconImage
{
margin-top:1px;
margin-left:5px;
height:30px;
}
.fieldWarningMessage
{
position:absolute;
margin-top:10px;
margin-left:5px;
color:#ffff00;
font-weight: bold;
}
.WarningMessage
{
margin-top:1px;
display:block;
}
Para finalizar, vai no "#registerForm", altere o "height:280px" para "height:100%", isso vai fazer o formulário ficar responsivo(compatível todas resoluções), assim quando você adicionar qualquer elemento dentro dessa div, o formulário irá ajusta o tamanho automaticamente
E no final o código vai ficar assim
Pronto você agora colocou estilo nas mensagens e completou a parte(2/3) do sistema de cadastro parte 3
Comentários
Postar um comentário