Curso de HTML 5 - Inputs e Formulários em HTML (Aula 08)

o tiranossauro de hoje do curso de HTML5 nós vamos trabalhar com formulários em HTML eu sou Rocha Santos e bora pro vídeo Então como sempre né nossa página básica aqui só com as tags básicas e a tag mim aqui onde a gente vai gerar o nosso formulário Tá então não de hoje foi aprender o básico da criação não formar e o tipos de input né tipos de informações Você pode adicionar um formulário como você envia nas fôrmas que você envia o seu formulário E aí no final das aulas você vai estar pronto para formar Hoje

qualquer tipo seja para formar de contato formulário para lide por largos para sei lá qualquer formada que você precisa em primeiro você vai tá pronto para criar a tag para formulário é a tag form tá então você abra tem que ser a tag form e fecha até informe aqui e aí ele vai colocar todos os conteúdos relacionados nosso armário dentro dele tá e tu tem que há dentro dele mesmo Pior que em submeter este formulário basicamente vem cá para falar tudo que tá dentro desse formulário mesmo se independente de quantos Campos forem e vai submeter

isso para algum lugar a gente vai ver detalhes isso o cliente que tipo tudo que tiver dentro do formado mesmo e submetidos beleza OK então vou criar um pouquinho aqui só para quem separa o conteúdo principal são visualizar melhor aqui tá E aí ele vai ter mais primeiro nossa primeira Tec relacionada ao formulário tá aí nós comer até consegue lei botar por que que eu tenho a tag levo porque eu botei todos os Campos Sales serkan para colocar nome telefone aí meio check Box seja o que for e todos esses impulsos que a gente vai

colocar ele ele tem que ter um preciso de um texto para indicado o que que ele é né e é legal o legal do do laser que ele também ele fica meio que associado ao teu in food quer ver deixa eu te falar aqui o input do tipo de texto tá então que eu tenho a tag input o site dela é text fazer do tipo texto Então aqui se você clicar aqui você pode ver que eu posso estar qualquer tipo de texto tá eu criei um AD para ele chamada de texto esse dia é bacana

é o único é bom você criar Sempre Teu agir e o nome para poder diferenciar dos outros Campos se faz para você pegar o que vocês comerciais formulário ele vai vai retornar para vocês resultado com baú Oi Rita e viajar inscrito você também pode buscar ele via e ouvia nome tá então eu geralmente eu sempre coloco aqui aí de aí do do texto e o nome para ele aqui que seria o nosso name tá E aí qualquer diferença de você ter o Label e usar o forte relacionando com a ide do impulso você tá usando

é porque assim ó seu clica aqui ele vai levar para poder digitar mas eu clicar aqui no meio também também leva direto aqui para digitar Tá e isso é legal quando se informar o grande Porque Você clicou no texto já vai direto estão sempre lembro for Wide do input você tá utilizando E você que vai criar um input tá e em HTML mas temos diversos tipos de input eu vou criar alguns deles aqui para vocês não vão criar todos os vou criar Ou pelo menos os mais utilizados beleza tão que é mais um aqui você

para todos eles por diz porque fica mais fácil da gente ver aqui vamos ver aqui uma Label e o input password tá então essa forma Lego for aí de pé Sword Porque como a senha Type dele é do tipo peço or coloquei a Deep é porque ele tem um é diferenciado a quem sabe até esse formulário e o fora do levou tá apontando para esse dia aqui também e a diferença dotexe por perto hoje é basicamente que a gente faz aqui tá muito utilizado por gente faz formados login por exemplo para cadastro naquele a usuário

e tal que você tem colocar uma senha para você tem aqui o texto ser esses nomes sei lá e a senha seria uma senha de usuário aqui embaixo Beleza então eu já fica fechado ali já já fica escondido né criptografado o resultado do texto que tá dentro dessa desse Campo né Desse input do tipo pastor OK então que é o próximo aqui tipo data tá então nós temos aqui queria uma Label é de dentes tá e coloquei aqui como data e eu vou ganhar um tiro um input do tipo date tá e basicamente ele é

um fumar de data mesmo ele vai trazer para você Que dia mês e ano baseado na configuração do seu computador e aí você consegue escolher aqui na caixinha de texto o tipo né o uma data para você colocar e o legal você utilizar esses formatos aqui por exemplo Tipo desde se tiver configurado certinho em alguns aparelhos celular não eu tinha de data mesmo igual do celular mesmo gesto do sistema do celular né e vencer essa caixinha que a gente veio aqui na parte HTML foi legal que já funciona tanto para web quanto para mobile tá

tem um campo data a essa lei ou do tipo data formato cara para todos eles é basicamente a mesma coisa tá a gente queria leva coloca o for Wide parece que ele vai estar relacionado esse leite então se eu clicar aqui você pode ver que já vai direto para lá na senha já vai direto aqui para senha no texto já vai direto aqui para o texto tá sempre usar dentro do fórum onde que eu tô utilizando e dentro input sempre o tipo dele o Edi e o nome beleza é de faltar a gente viu nas

aulas anteriores como você baixar arquivos A mas também existe um tipo de input que aonde você vai subir arquivos então se você vir aqui você pode ver se ele vai abrir uma pasta aqui do meu Windows E aí eu posso escolher um aquilo que eu quiser fazer o quê load tá só que só o selecionar o arquivo aqui não vai fazer isso dia automaticamente para o servidor tá eu preciso programar e isso via JavaScript tá a para que a hora que eu submeter se formaram esse arquivo vai e não é a lembra que o HTML

é só parte da casca né só fazendo a estrutura do nosso site tá para que ele funcione para que ele tem ações como subir arquivo e aqui e se formaram ser transmitido por um servidor a gente tem que botar um Java scripts no meio aí beleza então é isso é do tipo arquivo Vamos para o próximo aqui o próximo que eu tenho que um leigo de e-mail tá eu lembro e-mail que você vê aqui ele não tá tá igualzinho de texto tá não tá mudando nada A grande diferença dele aqui você usando o formado tipo

e-mail e facilita na hora que você for fazer ele validação dele lá para validar seu e-mail de verdade tal via web você pode fazer isso via JavaScript isso você utilizar de certinho fica bem configurado para o seu para o celular não estiver configurado certinho para rodar em celular você consegue também a hora que você clicar ali ele já monta aqui alguns teclados por exemplo já bota uma arroba@gmail.com a roupa alguma coisa e tal já prepara o teclado do tipo e-mail para que você escreva que foi quando você tinha ditando fique mais fácil digitar tá essa

grande diferença do texto do e-mail ok e a gente tem também alguns formação um pouco e nesse aqui nós estamos colocando informação né digitando geralmente informação aqui dentro né E aí a gente tem os cheques são check Box Radio Button sabe a diferença entre dois é bem simples para vamos fazer aqui alguns exemplos de checkbox primeiro eu vou deixar aqui 3 XBox tá mesma forma leigo é igualzinha não muda nada a diferença aqui no nosso input aqui eu tenho Type que ele do tipo de leque Box Wide como qualquer os outros o meio como eu

coloquei para os outros A grande diferença que o que acontece aqui vai dele sempre vai ser diferente para saber qual foi o dia que eu selecionei tá e o nome vai ser igual porque ele vai saber que ambos os checkbox tão emocionado ao mesmo contexto tá então por exemplo se eu quiser achar quase iguais programação Você conhece a primeira existe assistiu ao a colocar todas as línguas ele e hora que você marcar todos vocês submeter este formulário ele vai trazer peloide mas vai estar relacionado e cheque seriam uma de único para todas essas opções tá

E aí eu posso aqui por exemplo selecionados vou colocar mais o terceiro aqui para aquele que certinho pelo caso Thiago boxer meu coloca e os valores né os meses que eu coloco na lei Boo né e assim o check Box você pode selecionar mais de um como eu falei para o exemplo de negócio programação HTML CSS JavaScript Python e Java se Sharp pega te enfim quantas linguagens fosse poderia ser encerrar todos que eu conheço Tá além disso eu tenho que eu Onde eu posso adicionar um só que ao meio-dia o Button tá check Box arranjo

ele fica quadradinho aqui tá e o rei eu vou colocar ter uma dica aqui também a diferença dele que input deles chama rádio E aí ele vai trazer que Redondo eu consigo selecionar ele aqui também tá E esse processo bastante é mesmo tipo que eu tipo rádio o AD e o velho tá agora tem dois vezes o botão aqui só que se tentar ficar nos dois aqui os dois podem ser selecionadas por quê Porque eles não estão sendo especificados de um mesmo item tá eles estão sendo o Edi deles são diferentes tá o nome deles

ainda não está especificado Então eu tenho que fazer aqui eu tenho contar uma igual deles a forma que a gente fez aqui no cheque para relacionar todos esses três cheques a gente tem que fazer para o rádio que você colocar aqui o e direito no reino nome dos e você pode ver que agora quando o selecione desmarca o outro vai deixar o selecionar uma opção apenas tá eu posso colocar mais um aqui também e ele vai fazer a mesma coisa para os três tá check Box eu posso ensinar quando eu quiser e o rádio botão

aqui se eu fizer ele dentro do mesmo nem todos estiverem dentro mesmo nem eu posso selecionar apenas um Ponto Além disso tem um outro campo de texto que na verdade ele não é um inputs mas a gente chama ele de teste teste reta que é onde eu posso editar várias várias linhas de conteúdo essa aqui esse campo texto geralmente usa para nome sobrenome telefone a informação menor você acreditar um texto maior sei lá escrever um e-mail um parágrafo na criança não ter grande nós usamos até que se ergue que podem induzir de múltiplas linhas tá

e do jeito que está configurado aqui eu posso esticar aumentar o tamanho dele tá isso aqui é tudo configurado via parâmetro aqui ou via CSS eu posso bloquear isso também tá a mais além disso eu tenho algumas opções aqui que é por exemplo aqui aqui o dia que eles são cinco linhas quando eu coloco Rose dentro da Tec O que é esse campo que vai ter cinco linhas mas ele não está presa há cinco linhas tá então você pode ver que eu botei cinco linhas mais apertar entre vai colocar uma cesta linha só que ele

coloca aqui o scroll Então cinco linhas é o tamanho dele mais dele não fica preso a essa quantidade de linhas tá bom E aí da mesma forma da Rose eu tenho colos aqui então que eu tenho 50 colunas tá e o que que acontece ele a 50 colunas limita o tamanho da minha linha tá então quando eu passar de 50 colunas ele vai quebrar ali na verdade ou mentira gente vai jogar para baixo tá vendo fazer o efe então por exemplo aqui botar aqui 0123456789 se você eu tenho dez itens um colocar 10 20 30

40 e 50 Ok chegou no máximo Agora vou colocar mais alguma coisa já vai para baixo Beleza então eu posso usar o Rose e o colo para colocar linhas e colunas dentro do meu conteúdo dentro uma teste é ver tá eu posso também fazer isso via CSS Tá mas como eu já falei se acesso a gente vai ver no curso específico de CSS e vai ver cada um desses itens em detalhe Ok vamos para o Olá aqui é o nosso submit o que que é o summit summit um botão que vai enviar esse formulário então

o que que vai acontecer a gente vai preencher esse como a hora que você clicar no botão enviar ele vai pegar todos os dados para nós preenchermos você vai ver algum lugar seja para uma função JavaScript ou seja para redirecionar para um servidor tá E aí como que eu faço para saber para onde que ele tá mandando só porque até agora não vou ter nenhuma informação relacionada isso tá e para que eu possa fazer meu curso enviado Existem duas portas tá eu posso o botar aqui dentro do meu forme uma Action dizendo para onde ele

vai estar por exemplo aqui eu quero que ele envie todas as informações para a their post e o Léo tá então deixa eu mostrar pra vocês como isso funciona deixa abrir o formulário aqui ó qui ó como você vir aqui tá mandando para ati post e o Léo beleza então preencher aqui com alguma informação senha logo lá ok ok ok em viagens por mar aqui opa olha só já vale do e-mail aqui para mim pelo navegador gmail.com com nós vamos colocar aqui marcar esse cara aqui esse cara aqui vamos ver o formulário você pode aqui

que ele enviou para essa o relógio é que ele não existe ainda tá então como ela não existe foi 404 Mas você pode ver aqui ó que ele trouxe aqui dentro para mim como esse esse informaram que veio foi do tipo agrex então ele vai mandar essas informações no cabeçalho do menu da minha URL tá então como você pode ver aqui ó vamos voltar lá a minha ex Olha aí Poxoréu tá então vai pegar o meu caminho aqui ati Poxoréu e vai colocar todos os campos todos os dias então selecionei aqui e vai passar as

informações dentro do meu formulário aqui dentro do gadget tá lembrando e se não for Mário Gatti deste post Eu já falei sobre isso como funciona o protocolo http tá tem ver exclusivos no canal sobre esse assunto tá então se você não viu Recomendo muito você veja que é bem importante para quem está trabalhando com a ele entendeu Como funciona o protocolo http tá essa mãe que são Jet porque que ela é que eu sei também que são grande porque eu sei que deixou do form ele Eliete tá eu posso passar ele fazer que escolhe seja

um post eu posso tá eu preciso passar o atributo específico para isso E aí qualquer diferença do Jet no posto nuguette ele vai mandar aqui no cabeçalho da minha URL tava colocasse interrogação e todas as informações no formulário e vai passar junto tá essa é melhor forma de você fazer isso por exemplo a formação de senha tá visível aqui ó além disso dependendo tamanho e o formulário posso tornar posso estourar o limite do tamanho do Mel RN o início no cabeçalho da URL tá então geralmente a gente faz a gente faz informar a gente fazer

ele com o post foi bem pacote e coloca no blog da requisição então aqui ele vai aparecer ia algo dessa forma aqui só que dentro do body da requisição tá da da e que são fp&a tá todas as informações do formulário tá lembrando se você não tá entendendo que eu tô falando com bode regra de requisição http Assista o vídeo de protocolo http que ele é bem importante explicar todos esses detalhes beleza outros aqui esse é um formato que eu posso fazer outro formato eu posso fazer ao invés de eu mandar direto para um RL

como foi aqui eu posso fazer um código JavaScript vou deixar comentário aqui só pra não estragar umas formulário e essa seria aqui às vezes o ex o uso on submit Ou seja quando eu submeter ele vai a executar minha são JS aqui e aí o diz é o formulário então o dizem vai mudar todo o conteúdo formulário como parâmetro para essa função JavaScript Tá eu vou mostrar para vocês como funciona isso mas lá para frente tá mas por enquanto você precisa entender porque você pode fazer o formulário de duas formas tá você pode mandar ele

ouvia at onda uma ação vai carregar uma nova URL onde vai passar esses dados via URL por requisição http esse Jet o post tá ou você pode fazer no onsubmit aqui passar ele para uma função de escrita e essa função JavaScript vai tratar isso é legal você fazer aqui a função Jesus porque às vezes você quer validar um campo aqui sei lá por exemplo a senha você quer que assim a tenha no mínimo 6 caractéres só que é validar isso viajando escrito você consegue fazer isso além de fazer no servidor tá o ideal é que

você faça dos dois lados você quiser só no jogo script usando Tipo desabilitado posso lá no S12 mexer nessa função em alterar e submeter os dados não vai dando a função e os servidores serão contratados vai salvar os dados daquele jeito e isso é só no servidor é ruim porque toda vez que eu mandar ele vai fazer uma ligação dos Servidores vai consumir recursos do Servidor às vezes não poderia fazer navegadores navegadores tá consumindo recursos do cliente é muito melhor que você consumir o recurso do cliente o navegador do cliente que está consumindo as informação

noite todas as requisições que os clientes mandarem sejam feitas do Servidor para você fazer isso tá tem mais algumas coisas que eu quero mostrar pra vocês aqui querendo uma delas é o botão aqui Você Porta me lembro do teu input colocar um tipo Button E aí o onclick dele Pode ir direto para uma função JavaScript um comando já expliquei isso causa que eu tô passando direto no comando justificar um alerta Oi aqui deixa eu mostrar pra vocês aqui tá esse aqui eu tenho que ver na nossa página aqui e aí em shows culpa eu vou

salvar aqui e agora saber que tem um botão que hora que eu clicar está fazendo um alérgica tá vendo Alerta oi ele vai simplesmente abrir uma poupança e vim aqui para mim dizendo Oi tá na mesma forma poderia ao inveja fazer o submit deste formulário poderia passar aqui aquela função que eu passei aqui também sabe essa função onde eu passei minha ação Jr diz aqui se eu passasse ela aqui dentro do Meio input também funcionaria tá passando o dia se passar de todo o conteúdo na verdade é Horizonte Passaria o form ele passar todo o

conteúdo formulário E aí eu consegui a tratar isso via JavaScript também ok alegria tem mais uma opção aqui que é a o input reset está aqui também é um botão e bastante serve para fazer o reset no formulário mesmo ele limpa tudo informações tão pode que eu tenho várias informações marcadas aqui então selecionei uma data seu clicar no limpar aqui que seria um input do site R7 ele apaga tudo para mim eu posso como começar o formulário de novo beleza E agora voltando aqui só pra gente finalizar a relação do Jet post aqui para que

a gente possa mandar ele via post aqui existe um parâmetro chamado Messi Olá aqui é o tipo do passar pode ser dalog DF o pouso que vamo dar ele para puxa e aí vocês vão ver como ele ficou a agora tá carregar nós fomos aqui ó temos eles aqui agora ele tá com um post umas cinco aqui para recarregar com os informação Eu salvei E aí agora se submeter este formulário você vai ver que ele vai para aquela url que eu passei é só aqui ó como eu falei ele não tá mais a informação não

tá mais aqui no cabeçalho da minha refeição não tá minha URL tá não tá crie stream que a gente chama tá ele tá no bode tá no corpo da requisição http tá então a informação estão sendo enviadas só não estão visíveis a essa forma mais segura de você mandar eu tava quase esquecendo de um dos nos tipos mais importantes que a gente utiliza além dos formulários aqui deixa eu achar um espaço para ele aqui nós vamos criar ele aqui por exemplo um card depois do é do nosso Chery deixa eu criar uma dívida aqui eu

quase esqueci esse que é o select tá vamo colocar aqui um select ficou com um novo para ele se ele cão tá que é literalmente uma caixa de seleção tá E aí a gente vai fechar ele aqui dentro dela que nós colocamos as opções aqui ó e aí dentro negócio opção aqui também eu preciso colocar na mesma forma que eu tenho usar e diz aqui para separar o rádio tá eu tenho uma forma de separar qual que foi o valor que eu selecionei aqui para minha option E aí nesse caso eu uso velho tá então

vai ser o velho HTML Esse vai ser o volante foi enviado para o nosso Vinícius né o nosso formulário vai ser enviado com esse dado não contexto que você colocou aqui se assim que fazer um texto grande por essa um teste múltiplas linhas ou coisas desse gênero aqui tá E aí eu posso lhe chamar aqui uma opção também eu selecionei ele aqui o HTML a hora que eu por exemplo javscript ser diferente aqui nesse clipe e estava escrito que estão diferente aqui a hora que eu clicasse no summit não ia ter seu script nessa opção

para seleção ele e o valor JS só tá que é o valor qual seria o valor dessa dessa seleção Ok quase que se dele mais no final lembrei ele aqui a vocês a primeira também fazer não só os textos Mas também como enviar arquivos uma caixa maior você pode colocar um parágrafo no texto maior rádio botão check Box caixa de seleção E aí algumas formas você trabalhar seu fumar seja para enviar via botão fazer o sublimite do fórum e limpar o formulário também beleza e se você tiver qualquer dúvida acesse Nossa plataforma pelo link aqui

na descrição tá nesse momento para trocar amanhã até dois meses mas já vai ser lançado a qualquer momento desse vídeo de hoje é isso aí abraço pessoal até o próximo vídeo e tchau