neste artigo, aprenderemos como fazer um formulário de inscrição responsivo em HTML e CSS. Também veremos como adicionar validação de senha simples usando javascript.
para qualquer tipo de site, um formulário de inscrição é essencial. Os clientes terão uma maneira fácil de aprender mais sobre sua organização se você tiver um formulário de inscrição em seu site. Mais importante ainda, você está permitindo que sua empresa tenha acesso ao tipo certo de assinantes e seus dados (com a permissão deles, é claro).
o código para este modelo de formulário de inscrição é simples e fácil de entender. Para nossa conveniência, incluímos o código de estilo e javascript dentro do arquivo HTML principal. usamos o formulário HTML para fornecer uma estrutura básica ao formulário de inscrição. Tentamos criar um design neumórfico para este formulário.
para a validação de senha, usamos correspondência de padrões regex usando javascript. Para ler mais sobre isso, visite-Expressões Regulares. Para este design específico, definimos o padrão de senha de forma que ele seja alfanumérico com 8-15 caracteres. Se a senha inserida pelo Usuário não seguir o padrão, a borda do campo de entrada da senha mudará para vermelho e, se corresponder, ficará verde. Semelhante é para Confirmar senha também. Além disso, o formulário também verifica se a senha inserida no campo de entrada Confirmar senha corresponde à senha inserida anteriormente ou não.
a seguir está o código-fonte para o formulário de inscrição HTML. Recomendamos que você assista ao vídeo incorporado abaixo junto com o código.
código:
você pode baixar o código HTML do formulário de inscrição neste link.
Leia também:
- como fazer uma página de Login transparente responsiva em HTML e CSS ?
- como fazer um modelo de página de contato responsivo usando HTML e CSS?
- como fazer um formulário de login básico e um formulário de registro usando HTML e CSS?
- como fazer Responsive 404 página não encontrada em HTML e CSS?