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.
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
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.
@@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.
@@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
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
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?
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!
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
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 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.
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???
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!
@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?
@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)
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.
venho visto seu comentário desde o começo do curso, e tem ajudado demais. Vlw cara!
boa cara, isso ajuda bastante é meio q um resumo do conteúdo que ele pediu pra tds fazerem kkkkkkkkkkk
brabo mano
Use label é super importante para acessibilidade para deficientes visuais.
Po Guanabara faz um curso maneiro de react ou vue.
Seria bom
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
Excelente idéia
@@gabrielvitor9177 mas estão cobrando isso nas empresas né. E o básico.
Acho que um curso assim iria para o Estudonalta, mas realmente seria muito bom um curso desses com a didática do Guanabara
Esse professor é muito bom, já fiz o curso de python aqui no youtube
Aula excelente como sempre! Obrigada, professor.
O Gustavo é o melhor professor que conheço. É muito melhor do que eu, nas explicações.
muito bom professor essa aula, anotado no meu caderno a importância do Label para um formulário.
Seria ótimo um Curso de POO para Python.
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.
Eu quero um para JS.
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.
Eu anoto no Notion kkk
@@MarcosFelipe-up9lc mlhor app de todos
@@bonekazz-8441 é mesmo, da ora
@@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.
@@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
Esse cara é muito gênio!!!!
09:50
- Aluno "Ah, não gostei de usar label...dá muito trabalho!"
- Guanabara: "Não é problema meu"
Rachei...kk
KKKKKKKKKKKKKK
Curso top. Parabéns aos envolvidos 🤝
Estou aprendendo demais com esse curso.
Dica: devorar a W3C
Muito bom! Entendo 100% o que ela fala! 😉👍
O professor defendendo o PHP é muito engraçado hahahaha, você show Gustavo, muito obrigado por cada curso.
Professor magnífico! Ninguém ensina como ele..
Legal, ainda não tinha visto isso nas aulas de formulários.
bom demasssss
incrível
Muito bom
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
Amo o Guanabara Ele brinca, dar bronca e ensina😂!
Muito bom os cursos, quando vai sair o modulo 5 de HTML5 e CSS?
Provavelmente vai demorar kkkkk
Até agora nada
Já saiu kkk
10:10 trabalho dá trabalho. - Guanabara
Ta muito top isso daqui
Conteúdo bacana como sempre 👏👏
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?
baita aula, prof
Faz muita diferença entre colocar o "for" no "label" ao invés de colocar o input dentro do label direto?
Graaande Guanabara, oque vc acha de um curso de Django? Juntando o python com HTML e CSS
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°
@@kaiobatistaalmeida caramba, obrigado pela informação
👏🏼👏🏼
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?
tu coloca dentro de um parágrafo se quiser.
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!
Ei professor quando vai sair o mundo 4 de python?EU NECESSITO DE PYTHON!
O novo material em pdf ja está disponível?
Os PDF's já estão disponíveis no GitHub?
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.
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
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 :)
@@guilhermesantos3301 volta a funcionar mas dps de umas 2-3 aulas volta a parar
@@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.
Professor gostaria de tirar uma dúvida porfavor
Ele fala dos PDF mas não estão no GitHub dele, esses PDF's só tem até o capítulo 21 :(
"Trabalho dá trabalho"😂😂
os pdf das aulas do modulo 4 estao ecodidos no github dele
fiz a proeza dele abaixar um arquivo php apos clicar é submit
"Trabalho dá trabalho"
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???
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!
Eles ainda não postaram o material
Não estou conseguir baixar os primeiro video aoula do modolo 1 me ensina
cade o material em PDF ??????????????????????????????????????????
o meu ! + Tab não está funciando, alguém tem alguma dica ?
@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?
@isaias santos Eu tbm sou iniciante kk. ainda não tive esse erro. Você baixou a stable ou insider?
@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)
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.
o comando ! para a tag não esta funcionando, como faço para habilitar?
sim, parou pra todo mundo! mas é só colocar html5 que vai dar no mesmo
pode ter acontecido uma atualização
Vlw, muito obrigado!!
Parou aqui também
aperta ! depois ctrl + space e vai sugerir para você o código base aí e só dar entre.
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