Elemento output em formulários HTML - @Curso em Vídeo HTML5 e CSS3

[@bonekazz-8441]

acho incrivel o cuidado que o Guanabara tem de explicar o porquê de tudo, dxar bem entendível e ensinar como aplicar. Quando vejo vídeos de pessoas mais experientes criando projetos HTML percebo vários erros simples, mas importantes, que o Guanabra ensinou bem direitinho ksksks

[@renatoorosco]

Por sorte estou aprendendo de início logo o Guanabara.

[@_Victor-Lourenco]

O ** se trata de um elemento de saída, utilizado somente para fins de exibição. É um elemento no qual um processo programado pode injetar os resultados de um cálculo ou o resultado de uma ação do usuário por exemplo. Por ser um elemento de saída, isso significa que: Quando utilizado, a tag de formulário output deve estar associada a um script. O resultado gerado por esse script, como um número por exemplo, deve ser renderizado no elemento output. Segue um exemplo de código HTML usando o output (contém um script simples também): Teste - output Digite o primeiro número: Digite o segundo número: Resultado da soma: No exemplo de código acima, nós criamos um sistema simples que tem como função somar os números introduzidos no primeiro e no segundo campo, sendo que o resultado dessa soma é exibido no elemento output. Nesse exemplo, nós temos dois elementos de entrada para números (inputs tipo number) e logo abaixo deles há uma tag de formulário "output". Basicamente, dentro dos inputs que recebem os números, temos o atributo *"oninput"* com um script em JS que faz esse cálculo de somatória e exibe o resultado no elemento de saída output (os scripts são idênticos em ambos os atributos oninput dos campos). *Nota:* De forma resumida, o atributo "oninput" contido nas caixas de entrada numéricas é utilizado para executar uma *ação* quando o usuário digita algo no controle ou altera o valor do campo. Nesse caso, o nosso script de soma está contido nesses atributos como valor deles... Dessa forma, qualquer alteração nos campos numéricos fará a ação do script de soma ser disparada. Lembre-se que o intuito aqui não é explicar como o código do script funciona, e sim mostrar como o elemento output trabalha. Observe no exemplo que foi atribuído ao elemento de saída (output) um id nomeado como "resultado". Já no script, foi especificado que o número resultante da somatória seria exibido nesse output... Só foi possível fazer isso porque o output foi justamente *identificado* com esse id. Dessa forma, sempre que você usar o elemento output, é indicado configurá-lo com um "id" ou "name"... Mas quando usar id ou name no output? Atribuir um id ou name para o elemento é útil quando você quer acessá-lo usando JavaScript (ou outra linguagem) para atualizar seu valor. Se você quiser acessar um elemento específico usando JavaScript, é geralmente mais fácil e mais eficiente fazê-lo pelo seu id. Por outro lado, se você quiser acessar *vários* elementos que compartilham o mesmo atributo name (sendo que no id não existe essa possibilidade visto que ele é único), pode ser mais fácil fazê-lo pelo name. Portanto, se o seu script trabalha utilizando apenas um elemento output, use o id para identificá-lo... Já se esse script trabalha usando vários componentes output ao mesmo tempo, opte pelo name. (Também não é problema usar o id e o name ao mesmo tempo em um output, tudo vai depender da _necessidade da sua aplicação)._ Perceba que no nosso exemplo o output também possui uma label... Não é algo obrigatório, mas é perfeitamente possível e recomendado atribuir uma label a um output, visto que ele é considerado um elemento "rotulável"... Sendo que podemos estabelecer o vínculo entre a label e o componente output normalmente também. *Atenção:* Em componentes de entrada para formulários (inputs) usamos o name e id para _identificar o campo_ no servidor, criar vínculos com labels e etc... Já no elemento output, nós só usamos esses atributos de identificação para conseguir *associar* o elemento de saída com um script (com labels também no caso dos id's), e não para enviar dados identificados para o back-end. Isso se deve porque o valor do elemento *NÃO* é enviado para o servidor quando um formulário é enviado/submetido. É possível enviar para o servidor aquilo que é renderizado no elemento de saída output, mas fazemos isso com configurações adicionais no script e utilizando um outro elemento input especial que é feito para isso e fica oculto (hidden). *Obs.:* O elemento é uma opção para exibir o resultado de um cálculo ou ação do usuário, mas não é a única opção. Você poderia usar outros elementos HTML para exibir o resultado de um script, como por exemplo: , ou ... A escolha do elemento apropriado depende do contexto e do design do seu site ou aplicativo. Porém, usando o elemento output, deixamos o nosso código HTML com o máximo de semântica possível. *Atributos da tag de formulário output:* *for:* O atributo "for" aplicado no elemento especifica a *relação* entre o resultado do cálculo (ou o resultado de uma ação do usuário) e os *ELEMENTOS USADOS* nesse cálculo. O valor do atributo "for" deve ser uma lista de "id's" dos elementos usados no cálculo separados por espaços, indicando que esses elementos contribuíram com valores de entrada para (ou de outra forma afetaram) o cálculo. Portando, quando você estiver trabalhando com o elemento de saída , use o atributo "for" para indicar quais são os _componentes de entrada_ *envolvidos no resultado* que está sendo renderizado dentro dele. Observe que o atributo "for" no elemento tem uma função puramente semântica e não afeta o comportamento do elemento . Você pode omiti-lo se quiser, mas incluí-lo pode tornar seu código mais fácil de entender. Especificar a relação entre o resultado do cálculo e os elementos usados no cálculo ajuda a tornar o código mais legível e autoexplicativo... Assim como foi feito no nosso exemplo ( *for="n1 n2"* ).

[@maricolauto]

você sabe me dizer o porque não tem o modúlo 5/5?

[@leonardobraga271]

@@maricolauto Tem, já está sendo lançado...

[@erikdody]

Começo do curso as aulas pegavam meio milhão de views, já essas chegam em apenas 20 mil views, é profundo o conhecimento que já adquiri até essa aula atual, o caminho é árduo, não é atoa que muitos ficaram pelo caminho, só agradecer pelo conteúdo prestado pelo guanabara aqui de forma gratuita e tão bem feito, me ensinando programação do zero

[@kaiquenunesl]

É isso, milhares ficam pelo caminho infelizmente!!

[@luizasantos6614]

html nao e programaçao

[@fallthred]

de todos os cursos gratuitos, ainda não achei um melhor que esses do curso em vídeo

[@wedersoneuripedesdasilva1097]

Nem dos cursos pagos! Estou pagando um aí (não vou citar o nome) e abandonei pra fazer o Curso em Vídeo.

[@renatoorosco]

@@wedersoneuripedesdasilva1097 Bom saber!

[@Guiiwoo]

@@wedersoneuripedesdasilva1097 ue por que nao fala o nome? certamente ajudaria o próximo a não investir em tal curso

[@leonardobraga271]

Pagos também...

[@epifanio_jaime]

Obrigado professor por partilhar conhecimento com a gente isso não tem preço e vai impactar as nossas futuras gerações

[@vilhalva100]

No começo me embananei com output. Ele não estava calculando os valores. Mas bastou eu trocar o "for" pelo "id", tudo funcionou normal ✌

[@AlcantaraAline]

Curso maravilhoso!! Professor Guanabara é simplesmente fantástico. Muito Obrigada por esse curso incrível! :)

[@wiktenalves3991]

To quase terminando o modulo 3 de HTML e CSS, to curtindo muito o curso. não vejo a hora de chegar nos ultimos vídeos lançados.

[@convenienciadigital1129]

Esse curso e o mais massa do mundo gostei demais guanabara

[@franciscohydglan5159]

Eu fiz sem JS, coloquei esse código "oninput="idade.innerHTML = 2023 - Number(ano.value)" " no input do number e funcionou :D

[@joaoJJ86]

vai funcionar enquanto for 2023

[@elrobert20]

Estou fazendo o curso de algoritmo, slk esse professor é um dos melhores que tem em

[@renatoorosco]

Como vai o progresso?

[@cassioqueirozpereira8447]

Obrigado, Gustavo!

[@FranciscoChitombi-xe6kg]

2024 ainda com qualidade. Que Deus te abençoe.

[@welitoncoutinho4921]

Quando sai o módulo 5? do curso estou amado e queria saber

[@leandrohenrique6042]

Começou semana passada se não me engano

[@PatinMe]

finalizando o capitulo! a explicação do guanabara é incrivel, espero muito um curso completão de .Lua

[@carmunzera]

Agora vou rever nas aulas de JavaScript o que eu posso melhorar lá. Baita aula!

[@renatoorosco]

Como vai o progresso com o JS?

[@carmunzera]

@@renatoorosco Agora estou quase chegando no React, fazendo freeCodeCamp, muito bom

[@renatoorosco]

@@carmunzera Que demais hein, não vejo a hora de começar a aprender JS. Mas me sinto meio intimidado ainda...creio que vou fazer um curso de algoritimos e lógica primeiro. Foi dificil no começo pra você?

[@carmunzera]

@@renatoorosco Com certeza não é fácil mas o segredo é não parar. Sim, lógica é o começo. Inglês também é muito importante. Só vai 🖖

[@renatoorosco]

@@carmunzeraValeu! Voce fez o curso de JS com o Guanabara depois partiu do freeCodeCamp?

[@semente.criativa]

Estou amando as aulas de html e css professor, eu espero que tenha o módulo 5 pra continuar os estudos.

[@hein_criptando]

ainda estamos esperando ahaha

[@PedroHenriqueRodrigues-vr7jh]

@@hein_criptando Irmão, você sabe se tem alguma notícia do módulo 5? Vi no especial de Natal que os planos era pra que saísse em Janeiro de 2023 e até agora nada

[@hein_criptando]

@@PedroHenriqueRodrigues-vr7jh então cara, pelo que sei o modulo 5 ja ta gravado, mas infelizmente não tenho data de previsão de postagem

[@fxmagic66]

@@hein_criptando módulo 5 chegou com tudo irmão, já tem mais de 5 aulas!

[@jorgebarbosajfsb8665]

Wow, não sabia dessa tag output

[@renatoorosco]

Grato por mais essa super aula, Gafanhotossauro :)

[@jackripper8723]

Seus vídeos são tão bons! que eu desisti de estudar em outras plataformas, inclusive, graduações.

[@rakrox2365]

Muito Obrigado por esse conteúdo muito bom

[@CAPRISTO2008]

top! Parabéns pela didática professor!

[@DiogoAntonny]

O legal é que podemos trocar o Output por uma div qualquer, porém deixamos sempre o nosso código em HTML com o máximo de semântica possível !

[@AS_Souza]

Eu percebi isso tbm, basta colocar o id correto, que não importa se é um , , , ou "qualquer" outra tag.

[@amagami1008]

Justamente porque é uma linguagem de marcação

[@lucasvilasboas7326]

Depois vou fazer o de JAVA SCRIPT tambem !!! obrigado professor !

[@alberyreis2075]

Curso bem completo e detalhado1

[@marcusribeiro5759]

Mto bom! Obrigado mestre!

[@marvin1290]

aula maravilhosa!!

[@toddynho_0139]

Muito bom

[@nonly1906]

Dica: Da para aprender lógica de programação por JavaScript

[@renanmacho]

esse vai ser meu próximo curso que quero fazer depois de terminar o de HTML.

[@matheusoliveira-vk6bm]

Ótimo vídeo como sempre

[@thaysprado15]

gatinho a mimir lá trás 😍

[@tiago.sampa_]

📝 MATERIAL DE APOIO *Output:* - Não envia dados, apenas mostra algum tipo de resultado na tela. Ex: Número 1: Número 2: Soma: 0 (Valor inicial "0", depois será mostrado a soma entre o Número 1 e o Número 2)

[@Familyhayzn]

obrigado segundo professor, rsrsrs

[@brun0hBacana]

Obrigado amigo, estava quebrando cabeça com isso, na hora que fui perceber estava errando por conta de erro bobo, agradeço o suporte.

[@komai-2706]

Amando JavaScript.

[@italo6483]

The best!

[@filipecapanegra]

Top 👍👍👍

[@alexjunio7497]

Muito bom!

[@ex_script7091]

Nice!

[@glaskario4836]

Muito obrigado 😊

[@samueldantas5317]

Boa aula!

[@flamengosrn6874]

Primeira vez aqui vamos ver rs

[@denisdesousaborges1139]

caramba, O Guanabara gravou esse video do modulo 4 a dois anos atrás vey. deve ser bastante trabalhoso ter que editar video por video até chegar desse jeito que está. olha o time que levou.

[@renatoorosco]

Também notei isso. Acho que ele faz muitos cursos e ainda dá aulas presenciais e demora mesmo.

[@PatsFerrer]

Eu pausei o video antes de ele mostrar como era o da idade e tals.. fiz igual o q ele mostrou antes e deu certo auhsuahsua Em que ano você nasceu? fiz isso só pra ver se conseguiria sozinha mesmo.. óbvio que o dele é melhor pq o meu só pega o 2023 uhaushausha mas foi bom saber que pensei da forma certa, mesmo sem saber javascript

[@antonioryan2683]

Pra quem não consegui fazer, vai uma solução mais fácil que a do professor: Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@Familyhayzn]

Obrigado meu garfanhoto rei

[@guilhermegomes4659]

OBRIGADO!

[@donniewayne2038]

eu fiz alem de soma; multiplicação e divisão kkkkkkkk mt bom

[@periclesperesoficial]

Não vejo a hora de aprender javascript, muito foda.

[@magnunmoreira4267]

#guanabara. Dica. Sinto falta de uma aula sobre #display. Não sei se já está por vim essa aula mais se não fica dica.

[@guilhermesantos3301]

Se não me engano vai ser no módulo 5

[@magnunmoreira4267]

Tomara. É o de muitos se enrola pra criar layout pra site

[@Cozacsv]

IMPORTANTE 17/08/2023 O comando nos dois números da conflito, então coloca em apenas um deles que para com o conflito na soma. Lembrando que ele só vai somar quando o numero do comando for executado. Uma outra forma de solucionar isso seria criando uma pagina de Java Script e colocando o código pra rodar dentro dela e depois chamando a função de soma no HTML mas como é um curso de iniciante VOCE, não sabe fazer isso então aceite a gambiarra de ter o código em apenas um dos dois números que vai funcionar.

[@ygor8387]

tava morrendo pq n tava entendendo pq meu código n dava certo, só depois eu vi que o meu f de FullYear tava minúsculo...

[@MityRiver]

Por algum motivo meu botão de limpar não funciona nesse primeiro codigo

[@alexandrerayol9711]

Uma duvida? Quando você executa JS direto no documento HTML, não é necessário capturar o elemento pelo id? Exemplo: document.getElementById(''iidade').value, no exemplo do final do vídeo ele colocou o id direto e usou o innnerHTML.

[@viniciusamorim72]

Idade: Ano de nascimento: 0

[@DiogoAntonny]

é tipo isso mesmo Vinicius e também tem como você pegar o ano atual direto no Java Script da uma olhada nas aulas do Guanabara ;)

[@viniciusamorim72]

@@DiogoAntonny Vou fazer isso. Muito obrigado

[@MatheusPrandato]

O problema disso é que você precisaria atualizar seu código toda vez que virar o ano. Eu não fiz função como o Guanabara passou, eu fiz no JavaScript apenas "let atual = new Date().getFullYear()" e ai lá no oninput eu coloquei "iidade.innnerHTML = Number(atual) - Number(iano.value)"

[@viniciusamorim72]

@@MatheusPrandato Muito bom, vou fazer assim tamém.

[@umalienigenaqualquer]

O linkedin e o Twitter do curso em vídeo foram abandonados?

[@AS_Souza]

Na parte de soma, não tem como fazer o output puxar os valores dos inputs, ao invés de fazer os inputs enviar os valores para o output? (Não sei se deu para entender o que quero dizer. Eu tenho um conhecimento bem superficial de programação, então não sei se estou falando besteira, mas acho estranho ter de fazer fazer os input enviar os seu valores ao invés de o output puxar os valores.)

[@Matheus-ny7yt]

adeus formulários, finalmente

[@moacircardoso9203]

Muito bo. O vídeo, mas é um pena que não posso aproveita-lo , pois no celular falta o zum.

[@vitorshapeoff]

Aula muito boa. O professor tá parado no tempo kk tá em 2020 ainda..

[@giovanesouza1544]

Todas as aulas estão disponíveis no site do curso em vídeo há um bom tempo. Agora é que ele está disponibilizando aqui. Você consegue ter acesso de primeira mão a todas as aulas por lá.

[@iuryannarumma4798]

@@giovanesouza1544 Po acho q não em. Eu sou apoiador e aqui ta mais atualizado q lá.

[@iuryannarumma4798]

@@giovanesouza1544 Ainda nem saiu o módulo 5 lá no site

[@giovanesouza1544]

@@iuryannarumma4798 Você é apoiador?

[@iuryannarumma4798]

@@giovanesouza1544 Sou

[@DaviLeal9]

o meu sempre baixa o arquivo php inves de mostrar na página alguem sabe o porque?

[@ronnychack]

QUEDAHORA HEAHEHA

[@vanilsonsousa1236]

O último formulário não funcionou no meu. O de mais alguém também?

[@layanalobo6772]

O meu também, você conseguiu? Já refiz pra ver se tinha deixado passar algo mas ainda assim não consegui.

[@layanalobo6772]

Descobrir o porquê do meu não está funcionando. No meu caso, foi os parênteses (), depois do getFullYear, ficando: new Date().getFullYear() Só percebi o erro depois que passei o código para o caderno.

[@antonioryan2683]

Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@victorcardoso1627]

Aqui não funcionou, mesmo colando nos dois campos o oninput, alguém passando por isso?

[@italocrisara]

Tenta tirar os espaços tudo do código dentro do oninput == oninput="isoma.innerHTML=Number(n1.value)+Number(n2.value)"

[@igubennett]

o meu não funcionou também

[@antonioryan2683]

Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@lucasxavier4333]

Pera ai guanabara, voce tem 42 Anos???😱😱 Jurava que voce tinha uns 35 no maximo. Ta conservado hein professor 😂😂

[@luizasantos6614]

caramba guanabira vai fazer ou tem 46 anos... parece mais novo

[@fabianolima14]

O que seria aquele cadastro.php?

[@RafaelMachado-kg9zd]

O arquivo para onde os dados estão sendo enviados quando vc clica no input(ou button) submit. Nesse caso é só um arquivo externo chamado "cadastro.php" que o guanabara criou pra evitar receber uma mensagem de erro sempre que enviava os dados. Não interfere nas aulas

[@victxl]

o meu oninput não ta funcionando alguem sabe?

[@tudoemalgunsminutos]

O meu também não funcionou

[@layanalobo6772]

Descobrir o porquê do meu não está funcionando. No meu caso, foi os parênteses (), depois do getFullYear, ficando: new Date().getFullYear() Só percebi o erro depois que passei o código para o caderno.

[@mdom5assessoria14]

o meu n funcionou tb

[@MatheusMachado-gx4rm]

formulário acabou amém

[@berserk_jp]

formularios >>>>>>>> tabelas

[@pedrowfps1538]

Com crtz mano

[@witchzinho8106]

Meu visual code não pego o elemento output. :(

[@antonioryan2683]

Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@Umgolbege]

tem q usar " out" somente

[@aripaulino007]

Como faz pra enviar os dados do formulário pra um e-mail?

[@jeanoliveira4832]

Utiliza o google forms, ou aprende JS e banco de dados.

[@osvaldecirviana]

até quando vai esse curso ?

[@leilasousa8015]

São 5 módulos

[@joabesousamoreira9473]

Alguém me ajuda por favor! Eu não estou conseguindo fazer o exercício. O meu output não tá funcionando, alguém me explica por favor :'(

[@antonioryan2683]

Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@daianesampaio8172]

Que medo do JavaScript . Socorro Deus! 🤣🤣🤣

[@renatoorosco]

Também tenho...mas quero começar a domar essa fera do JavaScript depois desse curso 😅😁

[@MBLGBTQI]

eu fiquei foi animado kkk

[@igubennett]

No meu não funcionou.

[@igubennett]

o último funcionou, o meus primeiros que não, parece que o output não está funcionando.

[@antonioryan2683]

Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@zBaoyyyPvP]

oninput não funcionou aqui :(

[@antonioryan2683]

Exemplo de Formulário Em que ano você nasceu? Sua idade é: 0 let ano_atual = new Date().getFullYear();

[@emanuellk7513]

Número 1: Número 2: Soma: 0

[@bitinho8804]

mobile or desktop

[@na_panfletos_e_cartoes]

pra desenvolver? pesquise sobre o método: mobile first

[@Coisinhasparacaes]

Mais alguém que deu NAN como resposta no formulário 10???

[@Cozacsv]

IMPORTANTE 17/08/2023 O comando nos dois números da conflito, então coloca em apenas um deles que para com o conflito na soma. Lembrando que ele só vai somar quando o numero do comando for executado. Uma outra forma de solucionar isso seria criando uma pagina de Java Script e colocando o código pra rodar dentro dela e depois chamando a função de soma no HTML mas como é um curso de iniciante VOCE, não sabe fazer isso então aceite a gambiarra de ter o código em apenas um dos dois números que vai funcionar.

[@Umgolbege]

pessoal que o ultimo output não funcionou provavelmente é porque colocou minusculo a letra F do getFullYear ! tem que ser F e Y maiusculos ! function calcIdade() { let atual = new Date().getFullYear () iidade.innerHTML = Number(atual) - Number(iano.value) }