Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - FORMULÁRIO DE CADASTRO HTML E CSS

#Formulario #Form #TelaDeCadastro #Css3 #Html5 00:00 - INTRODUÇÃO 00:15 - INÍCIO HTML 00:20 - CRIANDO CORPO(BODY) DO HTML 01:09 - CRIANDO UMA LABEL HTML 01:20 - CRIANDO UM INPUT HTML 03:30 - COMO FAZER UM INPUT TYPE RADIO E ESCOLHER UMA OPÇÃO 05:18 - COMO FAZER UMA SELEÇÃO PARA ESCOLHER O ESTADO 05:38 - COMO FAZER UM SELECT PARA ESCOLHER ESTADO DO BRASIL 06:00 - COMO FAZER PARA MOSTRAR NA CAIXA DE SELEÇÃO 06:24 - COMO USAR O (OPTGROUP) PARA IDENTIFICAR AS REGIÕES DOS ESTADOS 07:33 - COMO FAZER O (OPTION) DENTRO (SELECT) PARA ESCOLHER O ESTADO 14:12 - COMO FAZER BOTÃO ENVIAR - SUBMIT 14:27 - COMO CRIAR BOTÃO VOLTAR - BUTTON 15:16 - COMO O NAVEGADOR DEVE COMPORTAR COM MARGIM E ESPAÇO 15:43 - COMO COLOCAR IMAGEM FUNDO NA PÁGINA HTML 16:50 - ESTILIZANDO A DIV 17:24 - COMO CENTRALIZAR DIV NO MEIO PÁGINA 18:15 - COMO COLOCAR COR H1 18:30 - CRIANDO BORDAS E TAMANHO PARA O INPUT E SELECT 19:05 - APRENDA ESTILIZAR O BOTÃO SUBMIT 20:13 - APRENDA A FAZER O EFEITO HOVER PARA O BOTÃO SUBMIT 21:23 - COMO COLOCAR CALENDÁRIO PARA ESCOLHER DATA DE NASCIMENTO - HTML 📚 Muito Obrigado por Assistir! 📌Saiba Mais https://www.youtube.com/c/WebOnlineDesenvolve 📌 https://github.com/WebOnlineDesenvolve https://github.com/WebOnlineDesenvolve/formulario.git Nesse vídeo você vai aprender como fazer um formulário para cadastrar os dados do cliente e enviar para cadastrar no Banco de Dados. Nos dados pessoais vamos utilizar vários campos de entrada, que no html são os input de um tipo especifico para inserir cada entrada de dados. Na opção data de nascimento vamos utilizar o tipo (date) que nos dar a opção de escolher a data, mês e ano do cliente. Para a escolha do sexo utilizamos o (input do tipo radio)para três opções: Feminino , Masculino e Outros, pois só podemos escolher uma opção. Para endereço vou utilizar Cep, Cidade, Bairro , Rua e número, todos do tipo texto. Na opção Estado vamos utilizar o (select, optgroup e o option) para escolher a Região e estado do cliente. Com dois botões um é o submit para enviar os dados do cliente para um sistema gerenciador de banco de dados e o outro é um botão para voltar ao início da tela. |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Os Mais Vendidos na Amazon em Computadores e Informática: 🔎 https://amzn.to/3nWnCbr Mais Vendidos em Games e Consoles: 🔎 https://amzn.to/3ufq8ed Mais Vendidos em Dispositivos Amazon e Acessórios: 🔎 https://amzn.to/3EEfulQ Mais Vendidos em Apps e Jogos: 🔎 https://amzn.to/39whbU9 Notebook: 🔎 https://amzn.to/3EJk5TK Pcs: https://amzn.to/3zrgaas Estilo: No corpo da página utilizei as propriedades do background para imagem, cor, tamanho e movimento . E uma font-family para definir qual família de fonte vou usar. Coloquei uma imagem de fundo na página fixa com uma propriedade( background-attachment: fixed) é utilizada para definir o que acontecerá com a imagem de fundo quando da interação com a barra de rolagem, se ela ficará fixa, se ela se moverá junto com o movimento de scroll, entre outras opções. Para que a imagem não se repita várias vezes utilizei o ( background-repeat: no-repeat) e adicionei uma cor caso a imagem não funcione ela monstra a cor de fundo. O Tamanho e largura da imagem com (background-size). Na div , inputs e botões coloquei bordas arredondadas. Cores nas bordas, no h1 e nos botões. ✨IDE: ( Integrated Development Environment )Microsoft Visual Studio. ✨IDE: ( Integrated Development Environment ) Visual Studio Code. EXTENSÕES VISUAL STUDIO CODE: LIVE SERVER: Carrega a página automaticamente. BEAUTIFY : Padroniza a formatação do código COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. ✨Software Editor de videos: Shotcut. ✨Software para gravar a tela do computador: OBS Studio. Google Fontes: https://fonts.google.com/ ⭐ Biblioteca JavaScript https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js Fontes de ícones 🔎https://fontawesome.com/v5.15/icons?d=gallery&p=2 Ambiente de Desenvolvimento: codepen.io Música: Meet & Fun! - Ofshane Imagem de Gerdb Altmann por Pixabay https://pixabay.com/pt/photos/empreendedor-id%C3%A9ia-compet%C3%AAncia-1340649/ Estados Brasileiros por Regiões: 🔎 https://escolakids.uol.com.br/geografia/os-estados-brasileiros.htm Tabelas de cores: 🔎 https://www.flextool.com.br/tabela_cores.html 🔎 https://www.w3schools.com/default.asp