Usar Label vai melhorar seus formulários - @Curso em Vídeo HTML5 e CSS3

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ต.ค. 2024

ความคิดเห็น • 99

  • @_Victor-Lourenco
    @_Victor-Lourenco ปีที่แล้ว +42

    Quando vamos preencher um formulário, ao clicarmos em determinadas caixas de texto é possível que o navegador do usuário auxilie da digitação dos dados com o a ferramenta _"autocomplete"_ (preenchimento automático do campo). Quando essa ferramenta é ativada, uma janela com sugestões é exibida para que o usuário possa escolher algum dado... Acontece que em algumas situações pode ser que o autocomplete atrapalhe na visibilidade dos campos, poluindo o nosso formulário.
    Nesses casos, se você quiser é possível desligar o autocomplete... Para fazer isso, dentro da tag de abertura do formulário (), basta adicionar o parâmetro " *autocomplete* " com o valor "off".
    *_PARA ONDE MANDAR OS DADOS DE UM FORMULÁRIO?_*
    Depois que você criar um formulário simples em HTML, é possível preencher os campos e até mesmo clicar no botão "Enviar"... Entretanto os dados simplesmente somem ao clicar no botão. Para onde os dados de um formulário devem ir depois que o usuário faz a submissão?
    Normalmente nós vamos mandar e encaminhar os dados para alguma linguagem de programação, como por exemplo: ASP, Java, PHP, JavaScript e por aí vai...
    Para de fato encaminhar os dados do formulário para alguma linguagem, dentro da tag de abertura do formulário (), temos que configurar o atributo " *action* " (por padrão esse atributo já vem embutido dentro da tag form)... Como valor desse atributo, devemos inserir o *nome do script* que vai receber os dados (ex: cadastro.php).
    *Obs.:* Sim, para poder cadastrar os dados do formulário, é necessário criar um script, um programa... Que terá como função justamente essa finalidade de cadastro.
    Depois de configurar o atributo "action" especificando o script que vai receber os dados, a ação desse atributo só vai ser disparada (iniciando o envio dos dados do formulário) quando o usuário clicar no botão "Enviar" (input submit), no botão de submissão do form...
    *Se você colocar como valor de "action" um nome fictício de um script que não existe, ao clicar em "Enviar" no formulário, simplesmente irá ocorrer um erro, já que o sistema não vai encontrar o arquivo desse script.
    *_INPUTS (COMPONENTE DE ENTRADA) E OS ATRIBUTOS "NAME" E "ID":_*
    Na maioria dos tipos de input para formulários (componentes de entrada de dados), é necessário ter os atributos "name" e "id"... Ao inserir um componente, por padrão esses dois atributos já acompanham a tag de input. Você pode dar a mesma nomenclatura para ambos se quiser.
    Sobre o parâmetro " *name* ", de certa maneira ele serve para *identificar um elemento,* assim como o parâmetro "id" faz...
    De forma geral, pode-se dizer que:
    *ID:* O id é importante para o browser (front-end), para a manipulação do DOM (arvore do documento), CSS e usado para criar o VÍNCULO entre a nossa label e o seu respectivo componente.
    *NAME:* O name é importante para o servidor/linguagens de programação (back-end) e o HTML.
    O name é principalmente usado para _elementos do tipo input_ em forms, ou seja para campos de inserção de dados e é exatamente o name que *identifica no servidor o campo.*
    Vale lembrar que o valor do id deve ser único para cada documento, já o valor do name pode ocorrer mais de uma vez por documento.
    *Obs.:* Como foi dito, o atributo name é muito usado na parte do servidor nas linguagens de programação, entretanto ele é mais útil especificamente para algumas linguagens, como o PHP por exemplo... Já para linguagens como o JavaScript, o id é mais utilizado, mesmo sendo para o servidor... (No JS até dá para identificar e puxar o campo usando o name, mas o id é o considerado padrão para a linguagem).
    Dessa maneira, entenda que você sempre precisa identificar todos os inputs (componentes de entrada) do formulário com um name e com um id, ambos tem suas funções. (a única exceção para isso seria o botão de submissão, que mesmo sendo um input não necessita desses atributos de identificação, visto que não recebe dados e não tem etiqueta).
    *_VÍNCULO ENTRE LABELS E COMPONENTES:_*
    É muito importante que exista um *vínculo* entre a label e o seu respectivo componente... O navegador não é inteligente o suficiente para saber que determinada etiqueta está ligada a tal componente, por isso essa configuração de ligação deve ser feita...
    Para fazer essa ligação, estabelecer esse vínculo entre a label e o componente, na tag da etiqueta devemos usar o atributo " *for* " (por padrão esse atributo já vem embutido dentro da tag label).
    Como valor de "for", você deve justamente inserir o nome do id do respectivo componente de entrada da label.
    *Obs.:* Geralmente damos a mesma nomenclatura para o name e o id de um componente input, mas também existe a possibilidade de dar nomenclaturas diferentes para esses atributos.
    Considerando que o atributo name e id do seu componente possuem nomenclaturas diferentes: Para o valor de "for", obrigatoriamente usamos sempre o id, visto que "for" só aceita o id para criar o vínculo entre a label e o respectivo input. (se as nomenclatura de name e id forem iguais, o 'for' usa o id do mesmo jeito).
    Depois que você configurar o atributo "for" da sua label com o id do input, o vínculo entre essa label e o input estará firmado.
    *Nota:* Não se cria um formulário sem relacionar o label ao input, é importantíssimo que você *sempre* estabeleça o vínculo. Caso contrário isso vai dificultar o trabalho dos mecanismos de busca, do HTML e consequentemente do seu navegador, visto que eles não irão saber qual caixa input está relacionada com qual label...
    Depois de estabelecer o vínculo, visualmente o nosso formulário estará igual, no entanto a parte *semântica* estará funcionando adequadamente e é isso que mais importa.
    Fora que, criando a ligação, ao clicar diretamente na label na página, a sua respectiva caixa de componente vinculada fica sinalizada e o cursor de texto da caixa (se for uma caixa de texto) é ativado, selecionando a caixa.
    Isso pode ser útil principalmente para usuários de celular, visto que a tela é menor e muitas vezes ocorre do user errar o clique com o dedo... Apertar num ponto específico no celular às vezes pode ser complicado, um label vinculado adequadamente significa uma área maior de sensibilidade, ajudando na experiência do usuário durante a utilização e preenchimento do formulário.

    • @brunooliveira3931
      @brunooliveira3931 ปีที่แล้ว +11

      venho visto seu comentário desde o começo do curso, e tem ajudado demais. Vlw cara!

    • @christianfrancisco6414
      @christianfrancisco6414 ปีที่แล้ว +5

      boa cara, isso ajuda bastante é meio q um resumo do conteúdo que ele pediu pra tds fazerem kkkkkkkkkkk

    • @DevNoro
      @DevNoro 11 หลายเดือนก่อน +2

      brabo mano

  • @jeanoliveira4832
    @jeanoliveira4832 ปีที่แล้ว +5

    Use label é super importante para acessibilidade para deficientes visuais.

  • @iridium-x7i
    @iridium-x7i 2 ปีที่แล้ว +30

    Po Guanabara faz um curso maneiro de react ou vue.

    • @joelberthsena
      @joelberthsena 2 ปีที่แล้ว

      Seria bom

    • @gabrielvitor9177
      @gabrielvitor9177 2 ปีที่แล้ว +4

      Seria muito bom, mas Acho que ele não faria, o curso em vídeo é focado para o público iniciante, react é meio avançado, já que é uma mistura de HTML e js

    • @celsosilva8530
      @celsosilva8530 2 ปีที่แล้ว

      Excelente idéia

    • @iridium-x7i
      @iridium-x7i 2 ปีที่แล้ว +3

      @@gabrielvitor9177 mas estão cobrando isso nas empresas né. E o básico.

    • @jeffersonsimplicio4337
      @jeffersonsimplicio4337 2 ปีที่แล้ว +2

      Acho que um curso assim iria para o Estudonalta, mas realmente seria muito bom um curso desses com a didática do Guanabara

  • @isaellustosa
    @isaellustosa 2 ปีที่แล้ว +8

    Esse professor é muito bom, já fiz o curso de python aqui no youtube

  • @flavianafernandes8069
    @flavianafernandes8069 7 หลายเดือนก่อน +1

    Aula excelente como sempre! Obrigada, professor.

  • @vilhalva100
    @vilhalva100 ปีที่แล้ว

    O Gustavo é o melhor professor que conheço. É muito melhor do que eu, nas explicações.

  • @semente.criativa
    @semente.criativa ปีที่แล้ว +1

    muito bom professor essa aula, anotado no meu caderno a importância do Label para um formulário.

  • @rafaeldeoliveiradias8907
    @rafaeldeoliveiradias8907 2 ปีที่แล้ว +16

    Seria ótimo um Curso de POO para Python.

    • @aprendacubo4785
      @aprendacubo4785 2 ปีที่แล้ว +3

      Você pode assistir o curso dele de POO, serve para todas as linguagens de orientação a objeto, e você aplica o que ele ensina para Python.

    • @anavitoriaalmeidadasilva2938
      @anavitoriaalmeidadasilva2938 ปีที่แล้ว +1

      Eu quero um para JS.

  • @bonekazz-8441
    @bonekazz-8441 2 ปีที่แล้ว +11

    quando o guanabara pergunta se estou anotando tudo no caderno do jeito q ele ensinou dou tres batidão no meu caderno e digo "TA AQUI GUANABA" com o maior orgulho ksksksk que professor foda. Uma das melhores coisas que aconteceu cmg foi ter achado esse canal pra solidificar a base em tecnologia.

    • @MarcosFelipe-up9lc
      @MarcosFelipe-up9lc 2 ปีที่แล้ว +2

      Eu anoto no Notion kkk

    • @bonekazz-8441
      @bonekazz-8441 2 ปีที่แล้ว +1

      @@MarcosFelipe-up9lc mlhor app de todos

    • @MarcosFelipe-up9lc
      @MarcosFelipe-up9lc 2 ปีที่แล้ว

      @@bonekazz-8441 é mesmo, da ora

    • @bonekazz-8441
      @bonekazz-8441 ปีที่แล้ว

      @@pedrophillipe Concordo muito. Hoje percebo que não preciso mais anotar, so pesquiso como faz e vou quebrando a cabeça codando. Mas no início foi bom pra gravar na mente e evitar voltar nos vídeos p tirar dúvida. A escrita, pra mim, serve para explicar para mim mesmo algo q estou estudando, assim eu firmo o conhecimento.

    • @GalaxyHellsGamer
      @GalaxyHellsGamer ปีที่แล้ว +1

      @@pedrophillipe Discordo, anotar te ajuda a fixar o conhecimento e te da uma banco de dados pra consulta rapida quando surgir uma duvida, em vez de vir no video assistir ele inteiro pra achar oq precisa

  • @lucasvilasboas7326
    @lucasvilasboas7326 ปีที่แล้ว

    Esse cara é muito gênio!!!!

  • @renatoorosco
    @renatoorosco ปีที่แล้ว +31

    09:50
    - Aluno "Ah, não gostei de usar label...dá muito trabalho!"
    - Guanabara: "Não é problema meu"
    Rachei...kk

  • @Vouvelejando
    @Vouvelejando 2 ปีที่แล้ว +4

    Curso top. Parabéns aos envolvidos 🤝

  • @renatoorosco
    @renatoorosco ปีที่แล้ว

    Estou aprendendo demais com esse curso.
    Dica: devorar a W3C

  • @rafaeldeoliveiradias8907
    @rafaeldeoliveiradias8907 2 ปีที่แล้ว +1

    Muito bom! Entendo 100% o que ela fala! 😉👍

  • @RobsonDanger
    @RobsonDanger ปีที่แล้ว +1

    O professor defendendo o PHP é muito engraçado hahahaha, você show Gustavo, muito obrigado por cada curso.

  • @PatsFerrer
    @PatsFerrer ปีที่แล้ว +1

    Professor magnífico! Ninguém ensina como ele..

  • @periclesperesoficial
    @periclesperesoficial ปีที่แล้ว

    Legal, ainda não tinha visto isso nas aulas de formulários.

  • @jackripper8723
    @jackripper8723 6 หลายเดือนก่อน

    bom demasssss

  • @MatheusAlves-cq6pj
    @MatheusAlves-cq6pj 2 ปีที่แล้ว +1

    incrível

  • @andersonsilva232
    @andersonsilva232 ปีที่แล้ว

    Muito bom

  • @GPedroza
    @GPedroza ปีที่แล้ว

    Descobri que clicando no nome da label dentro da página, só seleciona a caixa do input (ela fica com a borda mais escurinha) caso o label for esteja com o ID e nao com o NAME

  • @raquelrodrigues3694
    @raquelrodrigues3694 ปีที่แล้ว

    Amo o Guanabara Ele brinca, dar bronca e ensina😂!

  • @demolidorhuerta
    @demolidorhuerta 2 ปีที่แล้ว +2

    Muito bom os cursos, quando vai sair o modulo 5 de HTML5 e CSS?

  • @koronacat
    @koronacat ปีที่แล้ว +1

    10:10 trabalho dá trabalho. - Guanabara

  • @lammad
    @lammad 2 ปีที่แล้ว

    Ta muito top isso daqui

  • @front-end-club
    @front-end-club 2 ปีที่แล้ว

    Conteúdo bacana como sempre 👏👏

  • @viniciusgusmao5520
    @viniciusgusmao5520 ปีที่แล้ว

    uma duvida professor, você fala que o name dentro do Input é mais util no PHP certo? então posso pensar que isso se aplica a linguagens POO?

  • @andretakayama2088
    @andretakayama2088 2 ปีที่แล้ว

    baita aula, prof

  • @luanalvestanikawa6633
    @luanalvestanikawa6633 ปีที่แล้ว

    Faz muita diferença entre colocar o "for" no "label" ao invés de colocar o input dentro do label direto?

  • @orlandoneto7998
    @orlandoneto7998 2 ปีที่แล้ว +2

    Graaande Guanabara, oque vc acha de um curso de Django? Juntando o python com HTML e CSS

    • @kaiobatistaalmeida
      @kaiobatistaalmeida 2 ปีที่แล้ว +1

      Salvo engano, o módulo 5 de python será sobre Django, a questão é que já faz anos que não lança o 4, quem dirá o 5°

    • @orlandoneto7998
      @orlandoneto7998 2 ปีที่แล้ว

      @@kaiobatistaalmeida caramba, obrigado pela informação

  • @thata123thata123
    @thata123thata123 2 ปีที่แล้ว +1

    👏🏼👏🏼

  • @reidaslegendas2396
    @reidaslegendas2396 9 หลายเดือนก่อน

    Queria entender porque os elementos do formulário ficam dentro de um parágrafo, cada. Seria só porque os dados coletados serão do tipo texto? Ou se fosse number seria a mesma coisa?

    • @ymonster4962
      @ymonster4962 7 หลายเดือนก่อน

      tu coloca dentro de um parágrafo se quiser.

  • @animaisfelizes1723
    @animaisfelizes1723 ปีที่แล้ว +2

    Pessoal estou vendo que ele ainda está falando desses materiais em pdf porém no repositorio dele acabou no desafio cordel, alguem pode me ajudar com isso ? ficarei grato!

  • @nazin4491
    @nazin4491 2 ปีที่แล้ว

    Ei professor quando vai sair o mundo 4 de python?EU NECESSITO DE PYTHON!

  • @silass310
    @silass310 2 ปีที่แล้ว

    O novo material em pdf ja está disponível?

  • @vitor.franca
    @vitor.franca 2 ปีที่แล้ว

    Os PDF's já estão disponíveis no GitHub?

  • @RK--
    @RK-- ปีที่แล้ว

    09:50
    "ah não gostei das suas explicações..."
    "o problema não é meu" KKKKKKKK o tanto que eu ri nessa parte, até desconcentrei.

  • @presente9501
    @presente9501 2 ปีที่แล้ว +4

    Professor, eu não to conseguindo concluir as aulas no site, quando termino o video e tento passar pro proximo da um erro e não consigo passar, fala que minha solicitação é parecida com a de spam's e que não consigo avançar, fala pra entrar em contato porém não achei nenhum lugar para entrar em contato

    • @guilhermesantos3301
      @guilhermesantos3301 2 ปีที่แล้ว

      Isso também já aconteceu comigo. Eu acredito que você, assim como eu, assistiu muitas aulas seguidas, uma atrás da outras. Isso pode ter ativado algum tipo de defesa do site. A única coisa que fiz para resolver o problema foi esperar dar meia-noite e voltou a funcionar normalmente até hoje :)

    • @presente9501
      @presente9501 2 ปีที่แล้ว +1

      @@guilhermesantos3301 volta a funcionar mas dps de umas 2-3 aulas volta a parar

    • @guilhermesantos3301
      @guilhermesantos3301 2 ปีที่แล้ว

      @@presente9501 Infelizmente não sei o que pode estar acontecendo. Comigo só aconteceu uma vez e nunca mais aconteceu :/ Talvez possa ser algum programa ou extensão que estais usando.

  • @lucasestudos4855
    @lucasestudos4855 2 ปีที่แล้ว +1

    Professor gostaria de tirar uma dúvida porfavor

  • @juninnbk9919
    @juninnbk9919 4 หลายเดือนก่อน

    Ele fala dos PDF mas não estão no GitHub dele, esses PDF's só tem até o capítulo 21 :(

  • @lucassimas1019
    @lucassimas1019 4 หลายเดือนก่อน

    "Trabalho dá trabalho"😂😂

  • @vitorbretz4806
    @vitorbretz4806 6 หลายเดือนก่อน

    os pdf das aulas do modulo 4 estao ecodidos no github dele

  • @mateusrsz
    @mateusrsz 2 หลายเดือนก่อน

    fiz a proeza dele abaixar um arquivo php apos clicar é submit

  • @renatoorosco
    @renatoorosco ปีที่แล้ว

    "Trabalho dá trabalho"

  • @lucasfreitas4932
    @lucasfreitas4932 2 ปีที่แล้ว

    Bom dia! Meus formulários não abrem o arquivo .php, só faz download, no método get, ou abre "página não encontrada" no método post. Alguém pode me ajudar???

  • @astrocorreia9565
    @astrocorreia9565 2 ปีที่แล้ว

    Bom dia pessoal! Alguém sabe me informar onde posso encontrar o PDF desse módulo 04 no Git Hub do Guanabara? Eu só consegui baixar o primeiro PDF que vai até o capítulo 20 no Projeto-Cordel e fiz uma apostila. Muito obrigado pela atenção!

  • @gemarciofastudodossantos27
    @gemarciofastudodossantos27 2 ปีที่แล้ว

    Não estou conseguir baixar os primeiro video aoula do modolo 1 me ensina

  • @CarlosSouzaYoutube
    @CarlosSouzaYoutube ปีที่แล้ว

    cade o material em PDF ??????????????????????????????????????????

  • @vulgopl7869
    @vulgopl7869 2 ปีที่แล้ว +1

    o meu ! + Tab não está funciando, alguém tem alguma dica ?

    • @claudiocampos6126
      @claudiocampos6126 2 ปีที่แล้ว

      @isaias santos conseguiu resolver? O meu tbm ficou assim ontem, após atualização. Tem que digitar html e escolher html:5. Aproveitando, alguém sabe onde estão os novos pdfs?

    • @claudiocampos6126
      @claudiocampos6126 2 ปีที่แล้ว

      @isaias santos Eu tbm sou iniciante kk. ainda não tive esse erro. Você baixou a stable ou insider?

    • @claudiocampos6126
      @claudiocampos6126 2 ปีที่แล้ว

      @isaias santos copia o código do erro e pesquisa no google. Você usa o vsc como administrador? a versão que você baixou é ''stable' ou 'insider'? (obs: somos iniciantes kkkk)

    • @danilosilva7138
      @danilosilva7138 2 ปีที่แล้ว +1

      Danilo Silva
      há 1 segundo
      aperta ! depois ctrl + space e vai sugerir para você o código base aí e só dar entre.
      Espero te ajudado.

  • @jorgehenrique2643
    @jorgehenrique2643 2 ปีที่แล้ว

    o comando ! para a tag não esta funcionando, como faço para habilitar?

    • @3nd4ris33
      @3nd4ris33 2 ปีที่แล้ว +2

      sim, parou pra todo mundo! mas é só colocar html5 que vai dar no mesmo

    • @giovanefortuna2530
      @giovanefortuna2530 2 ปีที่แล้ว +1

      pode ter acontecido uma atualização

    • @jorgehenrique2643
      @jorgehenrique2643 2 ปีที่แล้ว

      Vlw, muito obrigado!!

    • @codin2148
      @codin2148 2 ปีที่แล้ว

      Parou aqui também

    • @danilosilva7138
      @danilosilva7138 2 ปีที่แล้ว +1

      aperta ! depois ctrl + space e vai sugerir para você o código base aí e só dar entre.

  • @epires2
    @epires2 ปีที่แล้ว

    Esse aluno hipotético que vive tirando a paciênca do professor Guanabara. Desse jeito a gente vai atrás dele pra ele aprender umas lições kkk