Formulário de Cadastro RESPONSIVO (Responsive Registration Form) | HTML e CSS

oi oi eu sou a Lari e nesse dia mostrar como que eu fiz esse formulário de cadastro usando HTML e CSS ele é um formulário responsivo ou seja ele se adapta a diversos tamanhos de tela conforme a gente diminui o aumento ele se adapta bom então vamos para o vídeo para aprender como é que faz eu vou começar abrindo o visual Studio code eu vou vir aqui em arquivo Abrir pasta e eu vou criar aqui uma nova pasta essa pasta eu vou chamar de formulário de cadastro e depois de criar a pasta é só selecionar ela agora com a nossa pasta já criada eu vou começar a preparar o ambiente eu vou criar uma pasta chamada atriz e dentro dessa pasta eu vou criar outra chamada e MG e outra dentro do a ser chamada CSS dentro da pasta CSS eu vou criar um arquivo chamado de estar e o ponto CSS e fora eu vou criar outro arquivo chamado index. hu ml aqui na pasta e MG eu vou colocar dentro um sbg que é essa imagem que a gente usou aqui essa imagem o período Google nesse site aqui então eu vou deixar esse site aqui na descrição do vídeo é só vocês escolherem a imagem que vocês querem usar para achar imagem que eu usei é só vem aqui Pesquisar pelo nome dela que é shopping e essa primeira imagem aqui para baixar ela é só ficar aqui em da o PSG não se explica aqui vai baixar ela e é só arrastar isso aqui para dentro da pasta e MG agora vou arrastar ela aqui para dentro e aqui vai ter o svg não se assustem com isso aqui esse aqui a gente não vai mexer é só o código do svg que gera aquela imagem e agora a gente vai começar a fazer o nosso HTML eu vou começar a criar na estrutura básica para isso eu clico no ponto de exclamação e um até aqui ele já vai gerar estruturas que a gente vai precisar eu vou começar mudando algumas coisas que nem a linguagem eu vou botar a pt br ou e vou mudar o nome do documento eu vou colocar formulário de cadastro e também eu já vou importar o nosso CSS e para dentro para isso coloque em a tag link e aqui dentro de HF a gente coloca as barras ISS/Style 1. 6 CS porque ele tá dentro da passasse esses dentro da CSS e o arquivo a Style.

CCS agora com a nossa estrutura pronta a gente já vai começar a criar umas formulário a primeira coisa que vou fazer vai ser colocar uma diva e essa div ela vai ter a Class container dentro da Tec container a gente vai separar em outras duas divs que vão ser esses dois quadrados aqui eu tive que vai ter a imagem e a gente vai ter o próprio formulário Então a gente vai começar a criando a primeira div e ela vai ter a Class form1 image e dentro da forma e vede a gente vai ter uma MG uma tag MG e aqui dentro do src vai ser aceites barra e MG e o nosso svg Eu também já vou visualizar o nosso projeto para isso vem aqui clique com o botão direito e vou abrir com live-server para abrir collabserv vocês vão precisar da extensão do live-server mas é só baixar quem extensões então aqui está o nosso projeto e ele já tá com a nossa imagem e a primeira div Já tá pronto e agora eu vou criar a outra dívida e vai ser a própria dívida o formulário então ela vai ser uma div com uma classe e a classe dela vai ser forma dentro da div com a classe form a gente vai ter uma tag que é a própria tag do forma a que eu vou botar uma hashtag porque ele não vai ter nenhuma ação porque pra tem uma ação ele precisa do back-end e isso a gente não vai fazer aqui eu vou criar outra Diva é diva ela vai ter a Class for me render e esse forme header ele vai ter aquele título cá da Oi e aquele botão escrito entrar para isso eu vou criar mais outras duas divs a primeira div vai ter a classe taito e dentro da classe tá e tu vai ter um H1 escrito cadastre eu vou fechar aqui do lado vai ser melhor viver e eu vou querer outra div essa Diva e vai ter a classe login bota dentro da sede vi a gente vai ter um voto a tag botão grandes grossas e segue a gente vai ter um aqui é um link aqui eu também vou falar Cerquilho Porque como a gente ainda não tem o link eu vou deixar assim e eu vou escrever entrar aqui a gente já consegue ver o título e o botão agora fora do form header eu vou criar outra dívida e essa Diva ela vai ter a classe input-group que vai ser todos esses impulsos daqui então a gente criou a primeira Diva que tem o título e o botão entrar e agora a gente vai criar outra Diva que vai incluir todos esses implantes então depois de criança de agora a gente vai querer a outra dívida que vai ter a classe inputbox dentro dessa dividir a gente vai ter um lei bom como esse aqui vai ser o input do primeiro nome eu vou colocar um four first Name e aqui dentro eu vou escrever primeiro nome e agora sim o input e ele vai ser typetext e ele vai ter um e depois chinês ou seja o que que tá acontecendo aqui o leigo a gente colocou for first Name e o e depois name aqui ou seja quando a gente clica que ele já seleciona ele tá vendo Eu também vou colocar o atributo name escrito também fortini e eu também vou colocar o atributo placeholder que vai ser aquele textinho que tem dentro do input nesse aqui o textinho é digite seu primeiro nome e eu também vou acionar outro tributo que é o atributo o recorde no caso ele tá dizendo que esse impulso ele é obrigatório ou seja essa pessoa tentar enviar esse formulário vai vir uma mensagem dizendo que tem que preencher esse input também então nosso primeiro encostar pronto a gente vai ter mais cinco então eu vou copiar e vou fazendo um por um eu vou copiar esse aqui e aqui embaixo só vou trocar algumas coisas ele não vai ser mais forte nele vai ser Leste né aqui vai ser sobrenome aqui também vai ser Latina e nesse aqui também agora eu vou colar mais uma vez esse aqui vai ser o input do e-mail e a gente também já vai mudar o tipo dele que vai ser tipo m eu vou trocar aqui aqui aqui eu posso segurar o conto que ele vai selecionar mais de uma vez Então eu só apago e mudo para e-mail aqui eu esqueci de mudar o placeholder Então a gente vai mudar também vai ser digite seu sobrenome e ver se aqui vai ser digite seu e-mail todos eles vão ser obrigatórios Então eu vou deixar esse atributo aqui eu vou colar mais uma vez e agora vai ser o input do celular então aqui eu vou colocar celular e o tipo dele vai ser tel eu vou mudar a todos esses atributos e vou botar Number e o placeholder dele vai ser dessa forma aqui ó (x 4 x 100 4x eu vou colar mais uma vez a gente tem mais dois ainda a senha e o confirme a senha Então é isso aqui vai ser Type password aqui vai ser senha e esses aqui esse daqui você todo sucesso hoje também o placeholder dele vai ser Digite sua senha eu vou copiar esse aqui porque eu Confirme sua senha é bem parecido com ele então eu vou copiar e colar aqui eu vou escrever Confirme sua senha e o name eu vou mudar a confirme password e esse 5 dias aqui já estão prontos agora a gente vai criar esse post aqui que eu pude de gênero para isso eu vou vir fora dessa divertir depois da divido input-group e eu vou criar outra div eacid vi ela vai ter a classe gênero inputs aqui vai ter outra div com a classe jenerton vai ter um h6e esse h-6 vai está escrito gênero agora a gente vai criar uma div que ela vai agrupar todos os outros importantes Essa div ela vai ter a creche underground e dentro dessa dividir a gente vai criar outras quatro diz então eu vou colocar de vir com a classe gênero input eu vou primeiro criar o input e depois alegou então eu vou colocar input ele vai ser Type rádio e aquela bolinha lá ele vai ter Winder já vai ser assim e-mail E vai ter um name gênero e a gente vai botar a lei bom Force 6 O que é que dentro eu vou escrever ser menino agora eu vou copiar ele e vou colar embaixo e só vou trocar algumas coisas aqui ele vai ser meio e aqui no ele também e aqui vai ser masculino que eu vou colar mais uma vez esse aqui os outros então aqui eu boto o Anderson Aquino ele também e aqui dentro eu vou escrever outras e esse aqui vai se eu prefiro não dizer então aqui eu vou trocar para prefiro não dizer e aqui eu vou colocar comandando ou seja como nenhum então aqui a gente já tem o nosso rede pronto e a gente vai começar a fazer esse botão aqui o botão ele é dentro do form mas ele é fora dessas divas aqui então aqui depois das divs a gente vai criar outra div que vai ter a classe continue o bota Vai ter até de volta e dentro dela vai ter um a parte vou botar a hashtag e o texto dele vai ser continuar E agora nossa HTML Já tá pronto e a gente vai começar a estilizar ele para que eu vejo eu esqueci de trocar o texto e esse aqui é o e-mail Então eu só vou mudar aqui no HTML aqui a gente escreve e-mail Provavelmente você já fizeram isso eu só me esqueci mesmo então agora a gente vai começar a utilizar ele eu vou primeiro começar importando a fonte que a gente vai usar para isso vou vir aqui nesse site o Google fonts eu vou usar a fonte Inter então eu vim aqui vou pesquisar por Inter a gente clica nela e eu vou escolher algumas que estão aqui a gente provavelmente não vai usar tudo mas eu vou selecionar algumas para ter Então vai ser essas aqui e daí que ele que importe e seleciona isso aqui que tá dentro da tag Style mas sem até que estar eu porque não precisa como a gente vai botar no CSS não precisa ter a tag Style agora é só colar aquele link para dentro e a gente vai começar a realmente nosso código eu vou começar a zerando o pé de imagem Então vou colocar pede 10 margens 0 e eu vou colocar também box-sizing border-box e aqui eu também já vou colocar nossa fonte então font-family e Inter e caso o navegador ele não Interprete a fonte Inter o cara também ação serif e com a fonte importada e a margem zerada ele vai ficar assim eu escrevi cadastre-se como a letra minúscula mas eu vou botar a maiúsculo eu só vou mudar aqui e agora a gente vai começar a mexer no bode então eu vou colocar Body eu vou colocar para ele uma largura de 100 porcento para ter a largura da tela toda eu vou colocar uma altura de 100vh também para ter altura da tela toda vou colocar um display Flex um justify-content-center um online tem centro e esse background vai ser de hashtag 00694 de ele vai ficar assim a gente já centralizou os itens agora a gente vai mexer no container que é esse quadrado aqui para isso a gente bota. Container a gente vai colocar para ele uma largura de oitenta por cento e uma altura de 80 VH a gente vai botar também um display Flex e ele vai ter um box-shadow que é aquela sombra vai ser de cinco pics e cinco pixeis pixeis rgba de zero, zero, zero, ponto 211 você não vai ficar assim agora a gente vai mexer separadamente em em uma dessas dias a primeira div que a gente vai mexer vai ser a imagem então a gente coloca forma e traço imagem e ele vai ter uma largura de cinquenta por cento referente ao container então ele vai ter cinquenta por cento e oitenta por cento e ele vai ter também um display flex como alinhar os itens Então vamos colocar o justify-content-center e o alarme aí tem cento e eu vou colocar um background-color para ele #f de heróis A7 D7 e eu vou colocar um pezinho também esse prédio e vai ser de um reino e por enquanto ele vai ficar assim agora a gente vai diminuir um pouco essa imagem para isso a gente bota. Forme e mande e MG e ela vai ter uma largura de 31 então ela vai ficar assim agora a gente vai começar a mexer Nadila e forma que é essa de que tem esses componentes aqui então ponto forme vai ter uma largura de cinquenta por cento também um display Flex um justify-content-center align-items-center também vai ter o Flash Direction colo pra ficar um baixo do outro ao invés de ficar um do lado do outro eu vou colocar também um vasto o branco nele então um background-color de #fff e eu vou botar um pezinho de três reis então ele vai ficar assim agora vou mexer nesses dois aqui eu vou colocar eles um do lado do outro e com espaçamento certo vou colocar.

Forme header e eu vou botar um margem botton de três em um display Flex e um justify-content Space between para ficar com esse espaçamento aqui agora eu vou mexer nesse botão aqui eu vou botar. Login voltou botar um display Flex e um online quem sempre pude ficar bem centralizar Agora vou mexer no botão esse então ponto login botou botou não vai ter borda então eu vou botar border Nando ou background-color de pode ser hashtag 666 FF essa equipe também vai ter um pede ele vai servir 0. 4 reino e um reino vou botar um border radius de cinco pixeis e um cursor Pointer então a princípio ele ficou assim vou colocar um Rover nele também então é só copiar isso aqui e colocar: Rover e ao passar o mouse por cima ele vai trocar de cor então eu vou botar aqui onde color this 6 b63 ffs um faltou hashtag Agora vou mexer no texto que tá dentro do botão então eu também gosto do que em boto boto à e eu vou colocar um text-decoration-line um fonte wait Afonso leite dele vai ser de 500 e eu vou colocar um branco nele então vai ser color fss a princípio ele vai ficar assim agora eu vou fazer esses risquinho aqui que ficou embaixo do texto do cadastro para isso eu vou colocar a ponto forme header H1:: After então contente "vazio display Block vai ter uma largura de cinco hente uma altura de 0.

3 em background color' dele vai ser o mesmo dos outros então esse aqui o margem dele vai ser de 0 e alto vai ter a position Absolute e um border regions de 10 pixeis então ele vai ficar assim agora a gente vai começar a custumizando esses input e eu vou colocar a ponto input-group vou colocar um display Flex também e um Flex wrap it up para ele quebrar e ficar um do lado do outro só que não vai ficar assim agora a gente coloca um justify-content Space between e um pedem de um reino oi e daí por enquanto ele ficou assim mas depois a gente vai editar um pouco mais e daí ele vai mudar Aí vai ficar certo daí agora a gente vai mexer em cada um separadamente então cada um daqueles importantes da isso a gente bota o inputbox e esse em futbox ele também vai ter um display Flex e 17 Direction colo para ficar um embaixo do outro ao invés de ficar um do lado do outro que nem tá a Label e o input e um do lado do outro e aparecer tipo um embaixo e ele também vai ter uma margem botão de um ponto um em para ficar com esse pensamento certo há cinco ele já tá começando a ficar parecido agora a gente vai mexer realmente nesse input aqui então é Bob. Em portbox input esse impulso ele vai ter um Virgem de 0. 6 ren e0 E1 pede de 0.

8 rei e um ponto dois hein não vai ser borda então eu vou botar a borda hernan e ele vai ter um border radius de 10 pixels também e um box-shadow de um Pixel Gun Pixel 66 e hashtag 00 00 00 16 ele vai E aí agora eu vou colocar um Rover e quando clicar Eu quero mudar essa cor que fica em volta aqui daí se eu vou começar a fazendo Rover e para fazer o ver a gente bota inputbox importante: vou ver quando passar o mouse por cima dele eu quero mudar o background dele então eu vou botar background-color que hashtag e 75 então ele fica assim agora a gente vai mudar a cor dessa borda aqui para isso a gente bota a ponta inputbox input: Focus visível e aquela borda ele é um outline então ela vai ser de um pixel Solid e a cor dela vai ser a mesma cor que a gente já tá usando esse aqui então vai ficar assim agora eu vou mudar esse textinho aqui E esse aqui como eles vão ter as mesmas propriedades eu já vão mudar os dois ao mesmo tempo então eu vou botar a ponta inputbox Label, ponto de under Tale h-6 vai ter um font-size de 0. 75 em e um fonte de leite de 600 então fonte wait de 600 e a cor dele vai ser re 10000000 assim agora eu vou mudar esse textinho que fica aqui dentro para isso eu volto. Inputbox input: placeholder e eu vou mudar a cor dele Eu vou colocar um hashtag 6 zeros b e ele vai ficar assim agora a gente vai começar a estilizar esse simples aqui então para isso eu boto o ponto de gênero pedir under traço group vou colocar um display Flex também pra ficar um do lado do outro um justfly.

com to the Space between então Justin vai contém the Space between ele também vai ter um margem top o margem top dele vai ser de 0. 62 ren e ele também vai ter um pede o pé dele e vai ser de zero e zero. 15 em então ele vai ficar assim agora eu vou colocar a ponto de andar input ele também vai ser um display Flex e vai ter um align-items-center agora a gente vai mexendo próprio impulso do dia andar input para dar um espaçamento entre a bolinha e o texto Então para isso eu vou botar a ponto de andar input input o carro margem rite de 0.

35 ren então margem rite de 0. 35 em e agora vou mexer no texto em si então pontos de andar input Label a Label ela vai ter um font-size de 0. 81 reino e um fonte wait que a grossura dela vai ser de 600 e também eu vou mudar a cor para hashtag 60 ser mais e ele vai ficar assim agora a gente vai customizar o botão para customizar o botão eu vou começar colocando o ponto continue o botton botton vou colocar uma largura de 100 porcento para ele ficar com 100 porcento do tamanho eu vou colocar também um margem top para dar uma esse pensamento entre ele e o dealer group eu vou colocar um espaçamento de 2.

5 ren acho que com esse pensamento bom não vai ter borda Então vai ser border não acordei e vai ser a mesma que as outras coisas que a gente tá usando Então você vai criar um de cola desse aqui para aumentar o tamanho dele ele já botão pede sempre 0. 62 em eu também vou arredondar ele então eu boto um border beijos e 5 e 6 e eu vou botar um curso e É para quando passar o mouse por cima aparecia a mãozinha ao invés de se cursor aqui então vai ficar assim agora a gente vai fazer um Rover nele e depois vou dar um texto que tem dentro dele para fazer o Rover é o mesmo esquema aí a mesma cor do outro então é só copiar esse texto aqui colar botar: Rover e eu vou botar o McQueen decore Do mesmo do outro botão também que é essa aqui ó seis b63 fs1 então eu vou ver já tá pronto não vou ver bem Sutil Assim quase não dá para ver e agora eu vou dar o texto quem dentro então para isso a gente bota o ponto continue bota um bota uma copiar ele vou colar eu acho até que eu tinha copiado e eu vou colocar vai ter um teste de Christian o Font size dele vai ser de 0. 93 em e a grossura dele um fonte leite e vai ser de 500 e a cor dele vai ser SSS então o nosso formulário ele tá pronto Ele só não tá responsivo quando a gente diminui ele ele não se comporta da maneira que a gente quer e agora a gente vai deixar ele responsivo para deixar Oi gente bota uma mídia web vai ser essa aqui media screen vai ser and Neck Sweet então a largura máxima de 1.

330 pixeis esse que vai ser aquele primeiro que muda então esse aqui ó a gente vai fazer primeiro esse aqui daí quando diminuir mais um pouco ele vai ficar assim então vamos começar a fazer no primeiro ele não vai ser muita coisa que a gente vai ter que mudar a gente só vai tirar a imagem então a forma image ela vai ter um display no ou seja ela não vai ter mais distante não vai aparecer e o container então pontocom tenia largura dele agora vai ser de cinquenta por cento e o form vai ser de 100 porcento então ele vai ter 100 porcento dos cinquenta por cento Então se a gente inspeciona ele e diminui ele já tá diminuindo corretamente só que agora a gente tem que diminuir quando chegar aqui ó aqui a gente diminui quando chegar aqui ele tem que diminuir de novo a gente vai diminuir de novo então a gente vai botar outra mente a colher Então vai ser@media screen and oh my Sweet agora a rede 1064 fixes então 1000/64 pixeis agora a gente vai mudar algumas outras coisinhas também vai ser um pouco mais complexo do que o outro esse aqui foi bem simples assim jamais um pouquinho mais complexo mas eu vou tentar explicar assim que eu tô fazendo primeiro o contêiner ele vai ter uma largura de noventa porcento ou seja antes de 50 né tinha bastante Borda dos lados assim agora não vai ter tanto vai ter 90 porcento então contendo ele vai ocupar quase toda a tela mas ainda vai ter aquela bordinha do bode em volta então eu vou botar um ponto contêiner e ele vai ter a largura perdi noventa porcento e a altura dele vai ser alto então altura vai ser automática então quando chegar aqui ele vai diminuir e ele vai ter essa escreva aqui ou seja vai ficar um embaixo do outro e vai ter scroll para fazer isso e colocar essa explorou ela vai ser no input grupo que é onde tem esse cinco diz primeira coisa a gente vai colocar um flash Direction: para ficar um embaixo do outro vai ter uma ver sou ipn o Escobar ela vai ser uma ver flor e Conde escrow e vai ter um Flex réptil réptil para não quebrar e quando diminui ele ficou assim só que a gente não definiu para ele uma altura ladrão por isso que ele tá assim então agora a gente vai definir as altura para definir essa altura eu vou colocar um ex Raid de descem então aqui a gente já tem esse pronto só que tá vendo que essa inscreva ela tá muito coladinho aqui eu quero deixar um pouco mais para o lado então para isso eu vou colocar no prédio em raid-5 rei Então pede rite de cinco ren então a escova ela já tá assim agora eu vou ajeitar o espaçamento dele ele tá muito colado aqui então vou botar o margem top de dois sem nele ele é o dia dele importantes então a gente bota ponto de andar importantes e a gente coloca um médico top de 2 em então ele ficou assim agora a gente vai colocar um embaixo do outro ao invés de ser um do lado do outro é isso a gente bota. de under group e a gente coloca o site derrete escola para ficar um gostoso então ele foi e eu só vou dar um espaçamento entre eles porque eles estão muito colados então para isso eu vou botar o margem top de 0. 5 ren ele é o dinheirinho curti então ponto de Andre input vai ter margem top de 0.