FORMULÁRIOS COM HTML e CSS!

Olá eu sou a Rafaela galerinha sejam bem-vindos a mais um vídeo aqui do canal e hoje eu vou mostrar para vocês como montar uma página HTML e CSS para formulário Então vamos lá eu já tô aqui com visual Studio code aberto é o editor porque eu já tomei familiarizada eu vou deixar o link na descrição pra vocês baixarem se vocês quiserem se vocês poderão usar o Notepad + + também que é um que eu sempre usei na faculdade ou outro editor que vocês prefiram a primeira coisa que eu vou fazer aqui ele tá com arquivo sem título sem nada eu vou salvar como e vou achar aqui a minha pasta eu cria uma pasta para fazer esse projetinho então eu aconselho vocês também criarem na frente acho que vocês precisam criar eu vou colocar como formulário formulário. HTML então ele já vai ficar a extensão de html que vai sair que a gente vai usar a primeira e aqui no visual code é escrever HTML 2. 5 e da entre e ele já vai criar uma estrutura básica do HTML para a gente poder partir daqui se você não tiver usando esse editor você pode simplesmente escrever o que tá aqui também eu vou falar o que a cada coisa por exemplo aqui o Dark Side vai dizer que o tipo do documento ele HTML também eles podem falar qual é a versão HTML Lang vai ser a linguagem que eu HTML vai estar aqui na parte do Red Rose vermelha dividido em duas partes né como eu já tinha explicado no vídeo anterior eu posso deixar um vídeo aqui em cima para vocês verem se vocês quiserem uma região grande de html é essa parte do Red a partir do cabeçalho onde tem aquelas informações que vão ser sobre o arquivo sobre o documento Então os metas nessas tem quiser traz elas são os mercados esse metadado aqui por exemplo o TS traço 8 é para entrar na linguagem unicode né que aquela linguagem mais universal dos com Oi e essa segunda aqui que Advil forte vai ser para quando a gente for usar navegadores de dispositivo móvel então ele já vem com uma configuração Zinha padrão então eu vou deixar bem quieto o tá então ele vai ser o título da página só que não vai ser aquele título tipo vai aparece é grande lá na frente ele vai aparecer na verdade na nossa água agora a gente condensado navegador lá na água vai tá escrito o nome do título da página então eu vou colocar aqui cadastro com o nosso tipo e por enquanto eu vou deixar assim o head aqui no bar e a primeira coisa que eu vou fazer vai ser criar uma tag div e essa tag dica ela veio que dividir uma parte do código então para colocar coisas dentro dessa tag de pode contar os alimentos a gente como se fosse uma caixa mesmo assim essa diva eu vou usar para colocar o título e subtítulo da página que vai aparecer grande de verdade então o título eu vou usar a tag H1 que é de grande prioridade da letra e ela vai ficar bem grande e o título vai ser cadastro de 10 embaixo vou usar a tag Cat tag de parágrafo e a pessoa complete suas informa ções alta o meu teclado tem que ficar incomodando do inglês para o português beleza aqui eu vou dar um BR para pular de linha agora a gente vai criar o formulário em si então ele já vai começar com a tag form com a gente conte vai começar o formular e a primeira tags formulário eu vou colocar o fio de 7 que ele vai ser separar um campo Assim na verdade eu vou juntar dois Campos dentro desse filme de sete ele vai ser um agrupador de Campo Se cada um deles ele terá sua própria Diva então eu vou fazer aqui a minha primeira dia e no canto ele vai ser composto por duas tags e a primeira nesse a Label nada mais é do que explicação do Campo né quando o campo é nome tá escrito ali nome então esse nome é o líder eu eu vou colocar aqui nome dentro da tag e embaixo eu vou colocar um input que vai sair entrada de valor no impulso eu vou colocar de alguns atributos dentro dele então primeiros meses Vai serotype que vai ser é o tipo do campo que vai ser de texto o nome do campo que vai ser nome não nem me que vai ser o nome e os de dele que também vai ser nome fechando aqui a diva e vamos para a próxima que vai ser de sobrenome Tão dentro da Diva a gente vai colocar outro level que vai ser o sobrenome e aqui embaixo do Nível A gente vai colocar o nosso input on o tipo dele vai ser sexy de novo que vai ser um campo de texto o nome dele vai ser sobrenome e eu e desde vai ser sobrenome também então fechou o fio de sete eu vou criar agora uma nova div porque eu vou separar né primeiro coloquei os dois Campos juntos nome sobrenome Agora eu quero fazer o campo de e-mail então vou fazer uma div só para esse campo de e-mail abrindo aqui a diva eu vou colocar Label que vai ser e-mail aqui embaixo vou colocar o input novamente e o tipo dele dessa vez não vai ser mais teste vai ser e-mail porque sim existe um tipo e-mail já definido no HTML é bom a gente usar porque ele já faz a verificação quando a gente escreve o nosso formulário dando exemplo quando a pessoa vai lá e entra com o e-mail que não existe tipo sem arroba por exemplo de adeptos do Meio até@ele já faz essa verificação lá na página mesmo então é bem legal a gente colocar os tipos certos aqui no input os nome também vai ser e-mail e o e de o povo mostrar aqui para vocês como que está Dá um contra o s para salvar e vou dar uma festa aqui da página Nossa gente coisa horrível né eles vão ver como vai ficar esse HTML gente tem o CSS resolver depois eu vou mostrar os com vocês para vocês entenderem a diferença como vocês podem ver aqui o fio de sete e fica com essa caixa Juntando os dois Campos é que eu criei então o fio desperte dentro dele tem a dívida do nome é divido o sobrenome e tem o e-mail que eu coloquei em baixo o cadastro de deve eu coloquei um H1 queria tinha falado que ficam tipo bem grande e como substituamos é a tag p&d parágrafo Então é isso aqui mesmo a gente fez né É só estrutura da página agora essa dívida que que eu quero fazer com ela eu quero fazer um radiobutton que que é um radiobutton são aqueles botõezinhos que a gente tem várias escolhas tipo não é é usado muito para quando a gente quer falar o nosso gênero né então tem os gêneros E aí você seleciona com aquela aqueles botões bolinhas Então é isso que eu vou fazer aqui só que não gosta de Jesus primeira coisa que eu vou colocar aqui vai ser horrível além de uau vou colocar qual vai ser a pergunta e no caso vai ser de qual lado da aplicação ai meu deus do céu estrelado você desenvolve deixasse aí agora a gente vai colocar as opções dos Reis e o batons eu vou colocar dentro da tag Label mesmo e ele não ser feitos com as tag input porém o site dela assim como da última vez os taip era e-mail aqui ele vai ser rádio e nem eu falei frente outra Honey eu coloquei como deve web e o véu que vai ser o valor dessa opção né para cada opção a gente vai fazer um bico diferente então parece opção e vou colocar front-end e a escrever o que eu quero que apareça na opção né isso tudo aqui de ficar dentro da tag é interno para aplicação entender e esse aqui que eu escrevo fora é realmente que vai aparecer na página aí você chora e meu eu vou colocar outra agora com outra opção é o dentro da Lei eu coloco um novo input o site dele vai ser freio o name vai ser o nome vai ser deve o ego o valor dele vai ser Dark and Snap na página e vai aparecer como dar quente e o último né mas não menos importante a gente vai colocar kiwi input no type Oi viu e deve web e o valor dele vai ser vos aqui então vamos ver como está ficando de um contra o s aqui e olha que legal gente aqui A gente vai poder escolher a gente quer eu vou até aqui ó eu vou deixar um check-in o sexo e aí quando a gente for a carregar aqui a página ele já vai vir selecionado em no primeiro botãozinho vai ficar de sendo acionado nenhum fechamos aqui as opções de desenvolvimento frontback eu vou criar uma nova div a dividir agora ela vai servir para selecionar prioridade então deixa as opções Júnior pleno e Sênior E aí a pessoa vê selecionar que nem corrente selecione o estado sabe tipo que a gente coloca ele tem aquela lista de coisas enfim Master isso aí que a gente vai fazer agora então dentro da diva eu vou colocar uma Label com o título de senioridade para pessoa saber que ela tem que escolher pra fazer essa listinha que a gente vai escolher a gente vai usar o select e option a gente vai fazer o select que vai ser o campo né que a gente vai clicar ali para ser leite né para fazer a seleção e os options você cada opção que a gente vai colocar ele na lista Então vamos lá select eu vou colocar o id dele de senioridade e vamos começar com as opções a primeira vez e Júnior a segunda vai ser pleno EA terceira bom então eu vou salvar e mostrar aqui para vocês como que vai ficar aqui você vai poder se achar com opção você deseja você pode pegar aqui o pleno Senhor o que for a única coisa que eu quero aqui agora é criar uma opção que não vai estar habilitado porque aí quando a gente for selecionar aqui como eu mostrei ele já tá selecionado sério não é o Júnior que seja eu quero deixar uma uma opção não selecionada que vai sofre está escrito selecione então é que eu vou criar uma nova option e eu vou colocar aqui select ser porque vai está selecionado Esse é desabou porque eu quero que ele não esteja ativado e o valor eu vou colocar sem valor porque ele não vai ser equivalente a nada se ele tivesse mencionado então eu vou escrever aqui se escolha.

. . Acho que eu vou escrever selecione Então o próximo Campo aqui do nosso formulário vai ser o Xbox que que é o check Box na verdade você vai são aqueles Campos que são quadradinhos que você vai selecionando várias opções Tipo o que a gente vai fazer aqui por exemplo é a pessoa vai selecionar quais tecnologias não conhece tipo HTML JavaScript e CSS o que seja eu vou colocar que vocês vão entender melhor quando eu mostrar para isso eu vou criar um novo fio de 7 que nem eu tinha criado lá em cima e dentro dele eu vou colocar uma div eu vou criar uma Label aqui para colocar tipo a pergunta que vai ser que no caso é ser selecione as tecnologias que utiliza vou pular duas linhas aqui e eu vou colocar cada um dos Xbox então cada um deles vai ser um input que eu vou colocar aqui o primeiro input que vai ser do tipo tinha Xbox e o e dele vai ser tecnologia um que é o que vai caracterizar eles tecnologia um o nome também vai ser tecnologia um e o valor vai ser HTML para mostrar ele na página e coloca o novo lhe deu e escrever HTML e se lembrou ele vai ser para o valor tecnologia um né para saber que que isso aí tá indicando né que vai ser o valor HTML do input depois eu vou colocar um novo input que vai ser do tipo Xbox novamente assim como todos os próximos Eu acho que eu vou correr um pouco aqui o vídeo e já vou mostrar para vocês o que que eu tão pronto gente eu coloquei aqui algumas tecnologias no total todas com o seu embute e com o seu Label Lembrando que o input tem os próprios Aids o próprio nome o próprio valor e aqui eu vou mostrar para vocês contra o s como ficou então aqui ó a gente vai poder selecionar HTML java script pega fé e por último último Campo que eu quero fazer aqui nesse formulário vai ser um campo de área de texto Então a gente vai escrever um texto maior né a gente não precisa necessariamente só escrever um texto também de um nome para isso eu vou colocar aqui uma div é uma linha vou criar um nível onde eu vou colocar aqui conte um pouco da sua experiência experiência que eu vou entrar com uma tag que se chama ser a rir eu acho que eu já vou fazer um estilo dentro dessa própria tag mesmo então é primeiro eu vou colocar o número de linhas que ela vai ter e aqui dentro de Style eu vou fazer o que eu faria no CSS que vai ser o widget de 26 cm Amy é uma outra unidade de medida além de fixa o cê vai ser experiência e o nome também e eu vou fechar que a minha tag de táxi era para enviar o formulário a gente vai criar só um botãozinho que vai ser com a tag Branca o tipo dele vai ser sabe MIT que é no tipo de botão que envie o formulário e o vai escrever nele concluído e é isso gente essa aqui é a estrutura básica da nossa página ou até recarregar aqui olha só isso se tiver mulher tem um campo maior Zinho para poder caber mais texto que que é o botão concluído que vai enviar vai fazer o submit do nosso formulário porém não é aí que eu vou parar o vídeo né Gente eu vou fazer o CSS dessa página também E para isso eu vou arrumar algumas coisas que faltaram dentro das nossas Peças São principalmente os de né Você viu que eu coloquei o ideia algumas delas mas me dele também vai servir para a gente colocar o CSS então aqui por exemplo a primeira coisa que eu vou colocar a ideia vai estar aqui no H1 que vai ser lembra o nosso título bem grande da página então o E desde o nosso H1 vai ser tipo é que em baixo no parágrafo eu vou colocar o exercício subtítulo Alegre de das pernas a gente tem pode definir classes pastéis né de vão poder estar presente em várias delas o e de no caso ele só pode estar presente em uma mas a classe A gente pode usar em várias então aqui no fio de sete eu vou colocar classe grupo que ele vai agrupar assim como eu vou colocar no fio de sete aqui e também vai ter a mesma classe que nem eu falei Pode tem mais de um elemento já as dívidas eu vou colocar uma classe chamada campo eu vou colocar todas elas que elas vão ter a mesma utilização basicamente aqui no impulso eu já tinha colocado o ID do nome eu vou colocar também no Label aquele forte eu falei que vai vai mostrar para onde ele está indicando que vai ser para o nome eu vou fazer isso nas outras também então fora que vai ser sobrenomes e esse aqui vai ser pro e-mail e uma coisa que eu acho que eu vou colocar aqui para vocês verem é o tal do Rick Fire não vou escrever aqui no campo do nome por exemplo Claire significa aqui simplesmente a pessoa não vai poder enviar o formulário esse campo não tiver preenchido então ele é obrigatório vou colocar isso para esses três o nome sobrenome e-mail outra coisa também que eu posso fazer aqui é colocar a tag strong dentro em volta do nome E aí com ênfase em bem legal vou fazer isso nos outros Campos também vou colocar a verdade em todos os Label os títulos da página e Pronto coloquei aqui gente ó vocês podem ver em volta de todos os leigos que são os títulos das perguntas aqui nacionalidade eu também vou colocar um forte no leilão para indicar de onde ele tá vindo que precisa de senioridade e eu vou criar uma classe para o botão que vai ser só ele que vai usar então eu posso vai ser chamada de botão e por enquanto a isso agora a gente vai criar de novo arquivo para fazer todos SS eu vou colocar aqui encontrou ele que dizer que automaticamente aqui um arquivo do lado eu vou salvar e como formular.

CSS e eu tenho que salvar ele gente dentro da mesma pasta que tá o arquivo de html Então o meu aqui diretamente tava nessa pastas formulário e eu estou salvando o meu novo arquivo CSS e essa mesma pasta porque senão eles não vão fazer o livro falando em link já vou fazer aqui a ligação entre as páginas Não adianta só estar na mesma pasta a gente tem que escrever aqui no nosso documento HTML Qual é o sucesso que a gente vai puxar Então a gente vai colocar aqui a tag link Réu que vai ser relação com Style sheet o tipo do documento que a gente vai relacionar text CSS e o HF que vai estar referência vai ser o nosso formulário CSS aquele já completa direto de almoço para gente mas eu só vocês escreverem o nome do documento que vocês criaram o CSS que tá dentro da mesma página e eu vou dar um media screen aqui na CSS Eu já queria fazer uma deusa leite eu vou colocar aqui um vídeo de CSS que eu fiz para vocês gente para vocês entenderem bem o básico que que a cada coisa e como que funciona os eleitores na importante que vocês assistam para poder pegar aqui na parte da gente desenvolver eu vou começar a a primeira vou colocar um asterisco pá eu vou colocar o asterisco vou abrir as chaves para indicar o que que eu vou colocar de propriedade dentro deles o asterisco se vocês vão se lembram ele seleciona todos os elementos da página HTML e nem vou colocar um morde 0 e 1 pad 10 também eu vou colocar aqui agora o nosso ID título para quem não lembro ideia eu coloquei aqui no H um acidente título é para gente selecionar a igreja de coloca o hashtag Antes aqui no CSS ou vai deixar para a gente colocar as nossas propriedades e valores e eu vou colocar o Font Family que vai ser a fonte câncer if a cor e vai ser uma que eu fiz aqui deixa eu pegar minha coelhinha eu não sei e os códigos todos de colar essa cor ela é meio roxo bem escuro Achei bem legal na verdade essa página tá ficando bem hoje à tarde a gente eu achei muito linda margin-left que vai ser a margem relação ao lado esquerdo 7 por cento e agora eu vou pegar o ID subtítulo que é que ele é elemento de parágrafo que eu tinha mostrado para você está embaixo legal ele também vai ter a mesma font-family Oppa e também vai ser a mesma fonte perna licor EA margem dele que vai ser diferente que vai ser dez porcento agora o fio de 7 que é o elemento que a gente já tinha lá feito né são tags fieldsets que a gente tem eu vou colocar border 0 no bode que vai pegar na verdade todos os elementos que estão dentro da tag Body né que é todo o HTML todo o corpo dele eu vou colocar um background-color f0s 8ss font-family também vai ser o Sam ser font-size que é o tamanho da letra ser um M como eu já disse é uma unidade de medida a cor vai ser 59 429 de Margem Leste em relação a 36 por cento a margem top que vai ser a margem de cima para baixo dois por cento vai ficar um pouquinho abaixo buscar bem lá grudada no t I just fine Counter agora eu vou colocar para todas as caixinhas de três correntes tiver uma bordinha Então vai ser o border-radius vou colocar no input input no select text here an innovation in bom então é seu bota rãs 15 pixels agora para selecionar quase a gente vai colocar o ponto no começo né que nem uma igreja de coco hashtag na costa de Coloca o ponto eu tô selecionando aqui as costas com campo e eu vou colocar um nerd margem embora um 1 m é uma margem a parte de baixo ver se com ele agora eu vou pegar a clássica campo e que tenha a tag Label e nela vou colocar mar de ir embora de 0. 2 m a cor vai ser de 59 429 de e o display vai sem um Block vou pegar agora alimento fieldset. Grupo é classe.

Câmbio que também é precoce e vou colocar um float left e a margem direita Martin wight de 1 m agora vou pegar a classe Campo os elementos input que tem o atributo do tipo texto vou pegar também da classe Campo o input e tem ao ar eu vou pegar pelo meio da classe Campo o select e na calça e Campo o text here Vou colocar aqui um ted de 0. 2 m uma borda de um pixel de de um pixel Solid da cor 59 429 de uma sombra que eu acho que fica um efeito muito legal os dois pixels 2 pixels 2 pixels EA cor vai ser um RGB de 000 10. 2 né para quem não sabe se outra forma de escrever a corna tem aquela que é o mal se não me engano tirar o código os números da hashtag srgb que vai levar em consideração vermelho Opá verde azul e o display vez em ok aqui pegando a classe campo eu vou pegar o select option né os dois as duas 10 o select e os options e vou dar hunted rite de um ele e agora vou pegar as classes campo e eu vou usar uma pelo Costa é o Focus que aquele recheio deve tá em evidência na corrente selecionar ele eu vou mostrar agora o que que vai acontecer quando a gente deixa essa na minha TV desse então é o elemento input por exemplo usa a opção do clássico folk também vão pegar outro lançamento da classe Campo que vai ser o select e vai tá com a pista do Corsa EFI poucas e o text área é Campo text área fofocas opaque se você já o fundo vai ficar dessa cura e 0 e 0 S8 e por fim O nossos a nossa classe botão que na verdade ela usa lá no nosso batom eu vou colocar um font-size de um ponto 2 cm um background 59 429 de lua cheia um borda de zero são paralisaram uma margem moram que a margem de baixo de 1 m a curva s s s s s que não pretendiam francão Ted de 02 dmm06 a Box eram novamente que vence a sombra da Caixa eu vou colocar de 2 pixels dos pixels do Espírito seus RGB hd15 00000002 agora que eu percebi que eu coloquei um aqui gente agora a sombra do texto vai ser um o Pixel Gun Pixel Gun Pixel Gun Pixel RGB a zero zero zero zero.

15 a posição position Absolute absoluta Então vai ser na parte de cima noventa porcento na parte da esquerda cinquenta por cento a margem voado direito vai ser menos cinquenta por cento e transforme translate -30% né -50% Outra pessoal do classe que a gente tem também que é muito usada é a Rover então eu vou pegar aqui a classe botão e usar o Rover que não vontade se quando a gente usa ela né na verdade ela aparece esse estilo que a gente vai definir aqui ele vai aparecer quando a gente passar o mouse por cima e quando ele passar o mouse por cima do nosso botão vai acontecer isso aqui que é o background vai ficar vai ficar a cbss eu achei lindinha essa cor a sombra da Caixa vai ser 72 px2 pxpx RGB a 0 0 0 0.