Anteriormente aprendemos a criar uma página html com texto se mexendo, se você não viu, aqui o link:https://coderprice.blogspot.com/2021/07/aprendendo-o-basico-de-html.html
Baseado naquele tutorial, hoje vamos criar uma página um sistema de cadastro e para não ficar muito grande, iremos dividir esse tutorial em 4 partes.
Primeira parte do html vai ser a criação do formulário com campo login, email e senha
Segunda parte do css que vai ser a parte do design.
Terceira parte vai ser do javascript, que vai ser a parte que verifica se o campo está vazio ou se digitou algum caractere inválido.
E a Quarta parte vai ser a parte do php e mysql, será a parte que guardará as contas registradas em um banco de dados.
Dito isso, vamos agora para a criação do formulário, primeiro você vai abrir o Notepad++ e escrever as tag necessárias, assim:
Depois, dentro da tag body, você vai colocar a tag "<form>", essa tag é muito importante para criar o formulário com campo de login e senha, é nele que você vai colocar para redirecionar para outra página quando você apertar no botão com atributo "action" e colocar o nome do arquivo .php(vou falar disso na quarta parte) entre as "".
*Se tiver em uma pasta vai ficar assim: <form action="pasta/aquivo.php">
*Vou deixar vazio por enquanto
Depois de criar o formulário, você vai usar a tag "<input>", essa tag é responsável por criar o campo de login, senha e email, para fazer isso você vai ter que especificar usando o atributo "type"
*No campo de usuário vou colocar o tipo: "text"
*No campo de Senha vou colocar o tipo: "Password"
*E no campo email vou colocar o tipo: "Email"
O tipo text "<input type="text">" vai criar um campo de texto normal
O tipo password "<input type="password">" vai criar um campo de senha e vai mostrar um "x" ou mostrar bolinhas no lugar do texto
O tipo email <input type="email"> vai criar um campo de email e vai alertar quando escrever qualquer coisa que não estiver no formato email
E vamos criar um botão com o atributo do input com tipo "submit", o "submit" é um botão com a função de envio, quando clickar no botão, ele vai enviar as informações dos campos para uma página de servidor que é especificado no atributo "action" do formulário.
Depois vamos adicionar o atributo "value" escrito "Criar a conta", o atributo "value" vai definir o valor do objeto input, no caso aqui vai ser para colocar o texo no botão.
<input type="submit" value="Criar conta">
E por fim, vou colocar o atributo "placeholder" nos campos de login, senha e email, esse atributo é parecido com atributo value que coloquei no botão, só que é bem mais prático para quem vai digitar, porque não vai precisar apagar o texto para poder digitar o login, senha e email
<input type="text" placeholder="Digite o seu login">
<input type="password" placeholder="Digite o sua senha">
<input type="email" placeholder="Digite seu email">
*Esse atributo "placeholder" é do html 5
E no final vai ficar assim
É só salvar o arquivo .html no final e pronto você fez um formulário, a primeira parte concluída
Comentários
Postar um comentário