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

💥#Html #Css #Formulario #FrontEnd #CascadingStyleSheets #HypertextPreprocessor #LinguagemMarcaçãoHipeTexto Minutagem 00:00 - INTRODUÇÃO 00:19 - Cabeçalho HTML5 00:30 - como fazer uma div no corpo html 00:37 - Criando formulário com o método POST 00:51 - Como criar uma TAG H1 01:16 - Criando uma label para o formulário 01:53 - como fazer um input tipo texto 03:18 - como criar uma seleção para escolha do gênero 03:35 - Como criar uma opção (option e select) 04:44 - Como fazer uma label para idade 04:57 - Como fazer um input do tipo número 06:02 - Como fazer um input type submit 06:16 - Como fazer um input type button 06:55 - como estilizar sua página usando css 07:00 -Reset dos valores de espaçamento 07:25 - Como fazer imagem de fundo com background-image 07:39 - Estilizando a div 09:10 - Estilizando a tag H1 com CSS 09:31 - Estilizando botão submit 10:11 - Estilizando botão 10:19 - Como deixar as bordas invisível no formulário No corpo do HTML vamos iniciar com uma div para inserir os dados do nosso formulário e os seus inputs. Depois vamos criar um form com o método Post, Com um tag h1 identificamos o form e uma label para identificar cada entrada de dados nos inputs. Nesse formulário será seis label para cada entrada , o tipo texto para nome, email, rg e cpf. Também temos seleção que vamos utilizar o select e o option para escolher a opção do gênero. No input number que colocamos na opção idade determina que apenas dados numéricos podem ser inseridos pela pessoa usuária da aplicação. Também adicionamos o valor mínimo e o máximo permitido pelo campo. Criamos dois botões um do tipo submit, que fará com que o usuário envie os dados digitados nas caixas sejam inserido no banco de dados e com segurança, pois o método escolhido é o post que usa o encapsulamento desse dados. O outro é o button pois o usuário pode retornar a tela inicial. Estilizando a página com CSS: Iniciamos com reset de valores de espaçamento, depois no corpo do página coloquei uma imagem de fundo com posição de melhor visibilidade. Na div coloquei largura, altura, adicionei uma cor de fundo, borda arredondadas com cor, alinhamento de texto e centralizada. Na caixa de entrada vamos adicionar uma borda e tamanho nos dois botões um do tipo submit e o outro button, adicionamos o cursor pointer para o usuário identificar o ponteiro do mouse. Software para gravar a tela do computador: OBS Studio. ############################################ 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 ############################################# 🎵 Música : Sunny Travel - Nico Staf 💥 IDE: ( Integrated Development Environment )Microsoft Visual Studio. 💥 IDE: ( Integrated Development Environment )Microsoft 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. ⭐ Biblioteca JavaScrit 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 https://fontawesome.com/ 📌HTML E CSS: https://www.w3schools.com/default.asp 📌Tabelas de cores: https://www.flextool.com.br/tabela_cores.html 📌Imagem para baixar: https://pixabay.com/pt/ 📌Site para criar Thumbnails: https://www.canva.com/