• Home
  • Chat IA
  • Guru IA
  • Tutores
  • Central de ajuda
Home
Chat IA
Guru IA
Tutores

·

Engenharia de Computação ·

Engenharia de Software

Envie sua pergunta para a IA e receba a resposta na hora

Recomendado para você

Padrão MVC e Programação no Servidor

28

Padrão MVC e Programação no Servidor

Engenharia de Software

FIT

Engenharia de Software Metodologias Agil UML e Ciclo de Vida Espiral

7

Engenharia de Software Metodologias Agil UML e Ciclo de Vida Espiral

Engenharia de Software

FIT

Exploração de Layouts no CSS

35

Exploração de Layouts no CSS

Engenharia de Software

FIT

Projetos de Circuitos Digitais

4

Projetos de Circuitos Digitais

Engenharia de Software

FIT

AC3 DevOps Questões sobre Integração Contínua - Allan Valério

6

AC3 DevOps Questões sobre Integração Contínua - Allan Valério

Engenharia de Software

FIT

AC2 Desenvolvimento Mobile - Flutter: Questões sobre Partes 7 a 12

25

AC2 Desenvolvimento Mobile - Flutter: Questões sobre Partes 7 a 12

Engenharia de Software

FIT

Controle de Sessão: Autenticação e Autorização em Desenvolvimento Web

31

Controle de Sessão: Autenticação e Autorização em Desenvolvimento Web

Engenharia de Software

FIT

Teoria da Computação

16

Teoria da Computação

Engenharia de Software

FIT

AC1 Desenvolvimento Web - Tecnologias Server-Side, Códigos de Erro e Estrutura HTML

6

AC1 Desenvolvimento Web - Tecnologias Server-Side, Códigos de Erro e Estrutura HTML

Engenharia de Software

FIT

Introdução ao JavaScript - Desenvolvimento Web

1

Introdução ao JavaScript - Desenvolvimento Web

Engenharia de Software

FIT

Texto de pré-visualização

07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 131 Formulários no HTML Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 231 Início de conversa Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 331 Olá Cursista Nesta parte vamos explorar o tema formulários no HTML Assista o vídeo com os principais tópicos sobre o tema e anote suas dúvidas Envie suas dúvidas no Classroom da disciplina Classroom Atividades Dúvidas sobre o conteúdo interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na seção SAIBA MAIS Objetivos de aprendizagem Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 431 Os objetivos de aprendizagem desta parte são Compreender o mecanismo de coleta de dados do usuário Entender as configurações básicas de um formulário HTML Aprender os principais marcadores tags para construção de campos de coleta de dados Definir e configurar botões Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 531 Conteúdo A seguir vamos ao vídeo Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 631 Formulários no HTML Desenvolvimento Web Formulários no HTML Desenvolvimento Web NEaD Faculdade Impacta NEaD Faculdade Impacta Clique no ícone ao lado e aproveite para fazer suas anotações durante os estudos utilizando o Google Keep Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 731 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 831 Leitura do texto de apoio Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 931 Leia o texto para aprofundar os temas discutidos no vídeo Entre em contato com o professor para esclarecer suas dúvidas Classroom Atividades Dúvidas sobre o conteúdo Formulários no HTML Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo O HTML permite disponibilizar informação através da criação de interfaces gráficas com forte conteúdo semântico inclusive recursos de multimídia Mas além de apresentar dados saída de dados também é possível coletar informações entrada de dados Os formulários e seus controles surgem com a capacidade de obter as mais diversas formas de informações dos usuários com controles de coleta de dados e de ações específicas para cada situação tornandose ferramentas essenciais para o dia a dia das empresas que utilizam sistemas web na sua operação Coleta de dados do usuário Conforme a Internet foi crescendo e sendo utilizadas para outros negócios diferentes a capacidade de apenas exibir dados aos usuários limitava o que podia ser feito com as páginas da web A necessidade de coletar informações dos usuários e enviálas ao servidor é essencial para a construção de qualquer sistema computacional seja para confirmar dados específicos e liberar um certo conteúdo ao usuário autenticação ou o cadastro de um endereço para entregas de encomendas ou mesmo enviar uma simples postagem em uma rede social Os formulários tornaramse essenciais para todos os negócios Criação de formulários Um formulário de coleta de dados no HTML é definido através das tags formform Essa tag funciona de maneira similar aos marcadores de estrutura de documento como a div mas com atributos específicos que controlam o seu funcionamento global Todos os elementos que serão utilizados para a coleta dos dados devem estar dentro da tag form isto é entre as tags de abertura e fechamento O processo de enviar os dados presentes no form para o servidor se chama submeter submit os dados ao servidor A tag form pode ser utilizada com os atributos padrão mas alguns comportamentos indesejados podem ocorrer Portanto entender os três atributos principais do form é importante para aprender a maneira que o form submete os dados ao servidor sendo f f Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1031 possível e necessário configurar esses atributos conforme a necessidade São eles enctype action e method A Figura 31 mostra o uso da tag form com os três atributos que serão explicados na sequência Note que por simplicidade omitimos as tags DOCTYPE html head e body mas você sempre deve utilizálas de agora em diante Figura 31 Uso da tag form com três atributos form methodPOST actionsalvarFormulario enctypeapplicationxwwwformurlencoded Aqui fica o conteúdo do formulário isto é os campos que o usuário deve preencher form Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1131 Fonte do autor 2022 Atributo enctype O processo de submissão faz a coleta dos dados presentes no formulário em formato de texto e os organiza de uma determinada forma para enviar ao servidor Vale lembrar que o HTTP é um protocolo de troca de mensagens em texto portanto os valores presentes no formulário precisam ser passados em formato textual O atributo enctype encoding type ou tipo de codificação em português especifica como os dados do formulário devem ser codificados quando submetidos enviados ao servidor Por padrão isto é se você não usar o atributo enctype de maneira explícita seu valor é igual a applicationxwwwformurlencoded que basicamente organiza os valores coletados de uma maneira similar aos parâmetros de query string da URL ou seja no formato nomevalor onde diferentes nomes e valores serão separados pelo caractere Por exemplo se enviarmos o formulário com dois campos distintos chamados nome com o valor Pedro e sobrenome com o valor Silva os dados enviados pelo formulário teriam o formato nomePedrosobrenomeSilva Para a maioria dos formulários que criaremos no dia a dia o valor padrão basta mas há casos em que será necessário enviar arquivos em conjunto com outros dados e arquivos em geral são muito grandes para a codificação padrão Neste caso deve ser usado o valor multipartformdata para o atributo encytpe Com essa codificação o navegador separa os dados do arquivo e de outros campos em pequenos pedaços para melhor organizar o corpo da mensagem sendo enviada Atribuição action Após a coleta dos dados com a codificação expressa no atributo enctype o formulário vai fazer uma requisição para alguma rota URL configurada no servidor Por padrão o navegador envia os dados para a mesma URL da página que contém o formulário Ou seja se o formulário está na URL httpswwwimpactaedubrcontato quando ele for submetido todos os seus dados irão para a mesma URL httpswwwimpactaedubrcontato O atributo action serve para configurar para qual URL o formulário será submetido e só é usado quando desejamos enviar os dados para uma URL diferente da URL da página que o contém Seu valor segue a mesma regra presente em outros atributos de URL src e href sendo permitido URLs absolutas e relativas Atribuição method O atributo method especifica qual método será usado para enviar os dados podendo ter dois valores GET e POST Basicamente a diferença entre os dois é que o GET adiciona os dados na própria URL que será usada para fazer a submissão ao servidor Esse Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1231 os dados a p óp a U que se á usada pa a a e a sub ssão ao se do sse método possui a desvantagem de deixar todos os dados visíveis uma vez que estarão presentes na barra de endereço do navegador e também limita o tamanho dos dados que podem ser enviados pois todos os navegadores definem um limite máximo que uma URL pode ter O método POST por outro lado envia os dados de maneira escondida dentro do corpo da requisição e por esse motivo não possui restrição de tamanho para os dados que serão enviados É o método ideal para enviar dados sensíveis como senhas números de cartões de crédito e outras informações de cunho pessoal dos usuários Por padrão todo formulário envia os dados com o método GET pois esse foi o primeiro a existir Entretanto na maioria das vezes será necessário configurar os formulários com o atributo method com o valor POST Campos de formulário O formulário será a região de coleta dos dados do usuário mas precisamos de controles específicos que os usuários possam interagir para colocar seus dados Na grande maioria das vezes o que será coletado é um texto em algum formato texto números datas etc mas em alguns casos queremos limitar as escolhas do usuário ou coletar textos mais específicos Os campos de formulário também chamados de inputs são divididos basicamente em três categorias coleta de texto coleta de opções e botões de controle A grande maioria dos campos é representado pela tag autocontida input usada para colocar o controle em uma determinada posição no formulário As tags input e suas variações que veremos adiante possuem vários atributos específicos mas as mais importantes são os atributos name e type O atributo name permite que o navegador colete as informações com nomes a serem enviados ao servidor similar às variáveis que existem nas linguagens de programação Sem o atributo name o navegador não conseguiria criar uma identificação única para determinado valor e portanto não seria possível distinguir os diferentes valores que o usuário deseja enviar ao servidor durante uma requisição Já o atributo type permite configurar o tipo de dado esperado no input como por exemplo texto email senhas URLs etc Campos de coleta de texto Para coleta de texto temos dois grandes tipos textos de uma única linha e textos de múltiplas linhas Para textos de uma única linha usamos a tag input com a variação do type de acordo com o dado que queremos obter Por padrão o atributo type tem o valor text que é o campo mais elementar e aceita qualquer texto em uma única linha Caso seja necessário coletar algum tipo mais específico de dado existem diversos tipos prédefinidos no HTML Essas variações no type para textos serve para adicionar uma Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1331 capacidade do navegador sugerir valores baseados no tipo e no histórico do usuário bem como uma validação nativa se o dado está escrito corretamente As variações mais comuns do type são text valor padrão usado quando omitimos o atributo type password campo de texto para senhas esconde o valor digitado email campo de texto que valida emails url campo de texto que valida URLs date campo de texto que valida datas datetimelocal campo de texto que valida data e hora time campo de texto que valida horas e minuto number campo de texto que aceita apenas números Mais exemplos destes inputs podem ser consultados em HTML input types sd Para textos de múltiplas linhas precisamos usar um elemento diferente definido pela tag textareatextarea Essa tag define uma caixa de texto que torna possível inserir quebras de linha no texto escrito Note que diferentemente da tag input a tag textarea possui abertura e fechamento Qualquer conteúdo dentro da tag é interpretado como sendo o valor inicial de texto nela HTML textarea tag sd Mesmo sendo outra tag por ser uma variação da tag input ela também deve ter o atributo name configurado A Figura 32 ilustra o uso das tags input e textarea dentro de um formulário Figura 32 Uso das tags input texto de única linha e textarea texto de múltiplas linhas form Nomebr input typetext namenomebr Mensagembr textarea namemensagemtextarea form Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1431 Fonte do autor 2022 Campos de coleta de opções Também é possível restringir as opções do usuário a uma lista prédefinida de opções Temos algumas maneiras de apresentar e restringir essas opções caixas de seleção e caixas de marcação múltiplas ou únicas A caixa de seleção é uma tag diferente pois passamos a ela uma lista de opções possíveis a serem escolhidas em uma estrutura similar às listas ordenadasnão ordenadas A caixa de seleção é definida pela tag selectselect Note que ela possui abertura e fechamento e assim como as tags input e textarea deve ter o atributo name configurado A lista de opções disponíveis para o usuário escolher é definida usando várias tags optionoption Cada tag option deve ter um conteúdo textual para mostrar ao usuário e opcionalmente pode ter um valor escondido que será enviado ao servidor caso a opção seja selecionada definido pelo atributo value Por exemplo na Figura 33 temos duas caixas de seleção Na primeira qualquer opção escolhida envia o conteúdo textual diretamente na submissão mas na segunda caixa o valor enviado é o que estiver no atributo value da opção marcada A primeira option é a que vem selecionada por padrão ao carregar a página mas isso pode ser alterado através do atributo booleano selected Note que usamos divs para separar as duas caixas de seleção opcional e também uma tag nova chamada label opcional mas é uma boa prática utilizála que pode ser usada com qualquer campo de formulário e será explicada mais adiante neste material Figura 33 Exemplos de caixas de seleção Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1531 form methodPOST div label forselinguagemLinguagemlabel select namelinguagem idselinguagem optionJavaoption optionPHPoption option selectedPythonoption select div div label forseestadoEstadolabel select nameestado idseestado option valueSPSão Paulooption option valueMGMinas Geraisoption option valueRJRio de Janeirooption select div form Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1631 No exemplo da Figura 33 ao selecionar qualquer linguagem de programação o texto selecionado será enviado ao servidor isto é um dos três valores listados Java PHP ou Python Já ao selecionar um estado o valor presente no atributo value do estado selecionado é que será enviado ao servidor isto é ou SP ou MG ou RJ Em resumo quando não usamos o atributo value na tag option o valor enviado é o texto da option e quando definimos o value o seu valor é que será enviado na requisição Caso seja interessante mostrar todas as opções disponíveis sem que o usuário precise consultar a caixa de seleção similar ao que ocorre em provas e pesquisas podemos usar as caixas de marcação Temos dois tipos marcação única e múltipla Nestes casos ambas são variações de tipos da tag input já comentada acima Usamos o type com valor radio para marcação única e com o valor checkbox para marcações múltiplas De maneira similar aos demais campos de formulários também precisamos definir o atributo name para cada checkbox ou radio mas no caso desses componentes devemos usar o mesmo valor de name dentro de um mesmo grupo Isso é importante para informar ao navegador que aqueles radios fazem parte do mesmo grupo e com isso só será possível marcar um deles Já no caso dos checkboxes é possível marcar mais de um componente dentro de um mesmo grupo e todos os valores marcados serão enviados com o mesmo name dentro daquele grupo como se fosse uma lista de valores Por fim cada checkbox ou radio precisa definir o valor que será enviado durante a submissão para o servidor caso aquele componente esteja selecionado Isso é feito através do atributo value Note que esse valor fica oculto no navegador ele não aparece para o usuário Também é possível marcar quais componentes virão marcados por padrão através do atributo booleano checked A Figura 34 mostra o uso das caixas de marcação As tags fieldset e legend servem para organizar melhor as caixas de marcação e são opcionais e serão explicadas mais adiante neste material Figura 34 Exemplos de caixas de marcação Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1731 form methodPOST fieldset legendLinguagem única opçãolegend input typeradio namelinguagem idrajava valueJava label forrajavaJavalabel input typeradio namelinguagem idraphp valuePHP label forraphpPHPlabel input typeradio namelinguagem idrapython valuePython checked label forrapythonPythonlabel fieldset fieldset legendDisponibilidade múltipla escolhalegend input typecheckbox namedisp idramanha valueM label forramanhaManhãlabel input typecheckbox namedisp idratarde valueT label forratardeTardelabel input typecheckbox namedisp idranoite valueN label forranoiteNoitelabel fieldset form Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1831 Existem ainda os campos de seleção de arquivos que permitem que sejam anexados arquivos para enviar ao servidor Os type file e image cuidam de criar um campo que permite escolher um arquivo do seu computador ou imagem para anexar no formulário Botões de controle Para enviar um formulário precisamos de um controle que o usuário use para dizer que ele preencheu tudo que era necessário e agora é o momento de enviar os dados ao servidor Os botões de controle permitem que o usuário decida quando determinada ação deve ser executada Eles podem ser definidos tanto pela tag input como também pela tag buttonbutton Diferentemente da tag input o button possui abertura e fechamento com o conteúdo interno sendo usado para formatar o botão Existem três tipos de botões em HTML e eles são diferenciados pelo atributo type submit reset e button Cada um desses tipos possui funções específicas submit usado para submeter enviar o formulário ao servidor Ao clicar nele o navegador efetua as validações dos dados escritos no formulário veremos mais como isso funciona codifica os dados obtidos seguindo seu enctype e envia a requisição para a URL especificada no action usando o método especificado no method Todos os dados contidos na tag form que este botão estiver contido serão enviados mesmos os dados escondidos reset faz com que todos os campos dentro do formulário voltem ao seu estado original Em geral isso faz com que se esvazie tudo o que foi digitado e selecionado mas caso algum campo tenha sido definido com algum valor padrão através atributo value esse valor é o que será colocado no campo No caso das caixas de seleção o valor com o atributo selected voltará a ser selecionado e no caso das caixas de marcação radios e checkboxes os valores com o atributo checked voltarão a ser marcados button não faz nada por padrão sendo utilizado apenas para ações customizadas com o A linguagem JavaScript A Figura 35 mostra um formulário simples com botões do tipo submit e reset Mais informações sobre o uso de botões podem ser consultadas em HTML button tag sd Figura 35 Exemplos de botões em formulários Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1931 form methodPOST div label fortxnomeNome completolabel input typetext namenome idtxnome div div label forsecursoCursolabel select namecurso idsecurso option valueADSAnálise e Desenvolvimento de Sistemasoption option valueCCCiência da Computaçãooption option valueSISistemas de Informaçãooption select div div button typesubmitEnviarbutton button typeresetLimparbutton div form Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2031 Semântica nos formulários Sempre que apresentamos informações no HTML devemos nos preocupar com o conteúdo semântico do que é apresentado Esse mesmo princípio também vale quando construímos formulários pois melhora a usabilidade geral do formulário para todos os usuários incluindo os que usam tecnologias assistivas O uso de campos adequados para cada tipo de dado que se deseja coletar é o primeiro passo para formulários mais corretos do ponto de vista semântico Por exemplo o número de unidades federativas no Brasil é limitado 27 atualmente portanto é muito mais adequado listálas em uma caixa de seleção do que solicitar que o usuário digite o nome de algum estado evitando erros de grafia Outro exemplo é quando solicitamos o sexo do usuário e ele deve informar somente uma opção sem ambiguidade sendo adequado o uso de caixas de marcação do tipo radio Mas além disso há outras duas tags que ajudam no quesito da semântica label e fieldset A tag labellabel serve para criarmos um texto associado a um campo existente Para isso o label deve ter o texto no seu conteúdo através do atributo for onde seu valor é igual ao valor do id do campo associado O id é o único atributo que garante que o label esteja associado a um único campo A importância do label se dá para ajudar em tecnologias assistivas em ler o nome do campo para saber o que deve ser escrito dentro dele Já a tag fieldsetfieldset é utilizada para agrupar vários campos que tenham o mesmo objetivo por exemplo campos de endereço rua número cidade estado etc ou opções diferentes de um mesmo assunto alternativas de uma questão Dentro de um fieldset deve haver uma tag legendlegend com o nome do agrupamento exemplo título da questão e todos os campos que se referem ao que o fieldset quer agrupar Tradicionalmente usamos fieldset com agrupamentos de vários radios ou checkboxes como foi mostrado na Figura 34 Vamos praticar 1 O site de documentação web W3Schools possui além de muita documentação alguns exercícios simples e práticos das mais diversas matérias de programação Para mais informações e exemplos sobre formulários em HTML consulte a página httpswwww3schoolscomhtmlhtmlformsasp Desenvolvimento Web 07082023 1145 Desenvolvimento Web Antes de enviar os dados do servidor é interessante validar o maximo possivel se o que esta escrito ou selecionado no formulario faz sentido com o que era esperado economizando requisioOes desnecessarias O HTML possui maneiras de indicar uma série de regras para validacgdes basicas dos dados presentes nos formularios A primeira validagao ocorre pelo tipo Se o campo tem um type muito especifico como email number ou url o proprio navegador ja mostra uma mensagem de erro caso o dado nao esteja escrito da maneira correta Além disso temos alguns atributos que podem ser incluidos nos campos para auxiliar na validagao Form data validation sd required atributo booleano quando presente faz com que o navegador verifique se o campo esta vazio antes de enviar os dados para o servidor e avisa caso esteja vazio maxlength ou minlength para tipos textuais incluindo textarea esses atributos requisitam um numero maximo ou minimo de caracteres escritos no campo para serem aceitos para submissao min ou max de maneira similar para o campo number podemos definir um valor minimo ou maximo para o que 0 usuario ira colocar no campo pattern podemos definir uma expressao regular regex para verificar se o que esta escrito bate com o esperado comumente usado para numeros de telefones httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2131 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2231 Vamos praticar 2 Edite o exercício com a página da empresa fictícia Cursinho Web para que ela possua uma página para contato com o nome contatohtml Utilize as seguintes configurações para os campos Nome completo type text com name nome Email type email com name email Disciplina que mais interessa select com name disciplina Não é necessário configurar os values das opções opcional Linguagens que a pessoa conhece checkboxes com name linguagens C com value csharp Java com value java JavaScript com value js Python com value python PHP com value php Ruby com value ruby Onde conheceu radios com name conheceu Amigos com value amigos Google com value google Youtube com value youtube Instagram com value instagram Botões de Enviar e Limpar com os types adequados O formulário deve ser enviado usando o método POST Não é necessário configurar o action Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2331 Figura 36 Aparência da página contatohtml Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2431 Referências Form data validation MDN Web Docs sd Disponível em httpsdevelopermozillaorgptBRdocsLearnFormsFormvalidation Acesso em 27 jun 2022 HTML button tag W3Schoolscom sd Disponível em httpswwww3schoolscomtagstagbuttonasp Acesso em 25 jun 2022 HTML form tag W3Schoolscom sd Disponível em httpswwww3schoolscomtagstagformasp Acesso em 25 jun 2022 HTML input types W3Schoolscom sd Disponível em httpswwww3schoolscomhtmlhtmlforminputtypesasp Acesso em 25 jun 2022 HTML textarea tag W3Schoolscom sd Disponível em httpswwww3schoolscomtagstagtextareaasp Acesso em 25 jun 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2531 Saiba mais Para conhecer mais sobre os temas estudados clique no link abaixo e leia o guia do Google para construir formulários Learn Forms webdev Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2631 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2731 Finalizando Desenvolvimento Web 07082023 1145 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Compreender o mecanismo de coleta de dados do usuario Entender as configuragdes basicas de um formulario HTML Aprender os principais marcadores tags para construao de campos de coleta de dados Definir e configurar botées Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compdem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2831 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2931 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 3031 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 3131 Classroom Gmail Drive Portal do Aluno Núcleo de Educação a Distância Faculdade Impacta Telefone 11 55935382 Horário de atendimento 10h às 18h Desenvolvimento Web

Envie sua pergunta para a IA e receba a resposta na hora

Recomendado para você

Padrão MVC e Programação no Servidor

28

Padrão MVC e Programação no Servidor

Engenharia de Software

FIT

Engenharia de Software Metodologias Agil UML e Ciclo de Vida Espiral

7

Engenharia de Software Metodologias Agil UML e Ciclo de Vida Espiral

Engenharia de Software

FIT

Exploração de Layouts no CSS

35

Exploração de Layouts no CSS

Engenharia de Software

FIT

Projetos de Circuitos Digitais

4

Projetos de Circuitos Digitais

Engenharia de Software

FIT

AC3 DevOps Questões sobre Integração Contínua - Allan Valério

6

AC3 DevOps Questões sobre Integração Contínua - Allan Valério

Engenharia de Software

FIT

AC2 Desenvolvimento Mobile - Flutter: Questões sobre Partes 7 a 12

25

AC2 Desenvolvimento Mobile - Flutter: Questões sobre Partes 7 a 12

Engenharia de Software

FIT

Controle de Sessão: Autenticação e Autorização em Desenvolvimento Web

31

Controle de Sessão: Autenticação e Autorização em Desenvolvimento Web

Engenharia de Software

FIT

Teoria da Computação

16

Teoria da Computação

Engenharia de Software

FIT

AC1 Desenvolvimento Web - Tecnologias Server-Side, Códigos de Erro e Estrutura HTML

6

AC1 Desenvolvimento Web - Tecnologias Server-Side, Códigos de Erro e Estrutura HTML

Engenharia de Software

FIT

Introdução ao JavaScript - Desenvolvimento Web

1

Introdução ao JavaScript - Desenvolvimento Web

Engenharia de Software

FIT

Texto de pré-visualização

07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 131 Formulários no HTML Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 231 Início de conversa Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 331 Olá Cursista Nesta parte vamos explorar o tema formulários no HTML Assista o vídeo com os principais tópicos sobre o tema e anote suas dúvidas Envie suas dúvidas no Classroom da disciplina Classroom Atividades Dúvidas sobre o conteúdo interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na seção SAIBA MAIS Objetivos de aprendizagem Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 431 Os objetivos de aprendizagem desta parte são Compreender o mecanismo de coleta de dados do usuário Entender as configurações básicas de um formulário HTML Aprender os principais marcadores tags para construção de campos de coleta de dados Definir e configurar botões Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 531 Conteúdo A seguir vamos ao vídeo Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 631 Formulários no HTML Desenvolvimento Web Formulários no HTML Desenvolvimento Web NEaD Faculdade Impacta NEaD Faculdade Impacta Clique no ícone ao lado e aproveite para fazer suas anotações durante os estudos utilizando o Google Keep Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 731 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 831 Leitura do texto de apoio Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 931 Leia o texto para aprofundar os temas discutidos no vídeo Entre em contato com o professor para esclarecer suas dúvidas Classroom Atividades Dúvidas sobre o conteúdo Formulários no HTML Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo O HTML permite disponibilizar informação através da criação de interfaces gráficas com forte conteúdo semântico inclusive recursos de multimídia Mas além de apresentar dados saída de dados também é possível coletar informações entrada de dados Os formulários e seus controles surgem com a capacidade de obter as mais diversas formas de informações dos usuários com controles de coleta de dados e de ações específicas para cada situação tornandose ferramentas essenciais para o dia a dia das empresas que utilizam sistemas web na sua operação Coleta de dados do usuário Conforme a Internet foi crescendo e sendo utilizadas para outros negócios diferentes a capacidade de apenas exibir dados aos usuários limitava o que podia ser feito com as páginas da web A necessidade de coletar informações dos usuários e enviálas ao servidor é essencial para a construção de qualquer sistema computacional seja para confirmar dados específicos e liberar um certo conteúdo ao usuário autenticação ou o cadastro de um endereço para entregas de encomendas ou mesmo enviar uma simples postagem em uma rede social Os formulários tornaramse essenciais para todos os negócios Criação de formulários Um formulário de coleta de dados no HTML é definido através das tags formform Essa tag funciona de maneira similar aos marcadores de estrutura de documento como a div mas com atributos específicos que controlam o seu funcionamento global Todos os elementos que serão utilizados para a coleta dos dados devem estar dentro da tag form isto é entre as tags de abertura e fechamento O processo de enviar os dados presentes no form para o servidor se chama submeter submit os dados ao servidor A tag form pode ser utilizada com os atributos padrão mas alguns comportamentos indesejados podem ocorrer Portanto entender os três atributos principais do form é importante para aprender a maneira que o form submete os dados ao servidor sendo f f Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1031 possível e necessário configurar esses atributos conforme a necessidade São eles enctype action e method A Figura 31 mostra o uso da tag form com os três atributos que serão explicados na sequência Note que por simplicidade omitimos as tags DOCTYPE html head e body mas você sempre deve utilizálas de agora em diante Figura 31 Uso da tag form com três atributos form methodPOST actionsalvarFormulario enctypeapplicationxwwwformurlencoded Aqui fica o conteúdo do formulário isto é os campos que o usuário deve preencher form Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1131 Fonte do autor 2022 Atributo enctype O processo de submissão faz a coleta dos dados presentes no formulário em formato de texto e os organiza de uma determinada forma para enviar ao servidor Vale lembrar que o HTTP é um protocolo de troca de mensagens em texto portanto os valores presentes no formulário precisam ser passados em formato textual O atributo enctype encoding type ou tipo de codificação em português especifica como os dados do formulário devem ser codificados quando submetidos enviados ao servidor Por padrão isto é se você não usar o atributo enctype de maneira explícita seu valor é igual a applicationxwwwformurlencoded que basicamente organiza os valores coletados de uma maneira similar aos parâmetros de query string da URL ou seja no formato nomevalor onde diferentes nomes e valores serão separados pelo caractere Por exemplo se enviarmos o formulário com dois campos distintos chamados nome com o valor Pedro e sobrenome com o valor Silva os dados enviados pelo formulário teriam o formato nomePedrosobrenomeSilva Para a maioria dos formulários que criaremos no dia a dia o valor padrão basta mas há casos em que será necessário enviar arquivos em conjunto com outros dados e arquivos em geral são muito grandes para a codificação padrão Neste caso deve ser usado o valor multipartformdata para o atributo encytpe Com essa codificação o navegador separa os dados do arquivo e de outros campos em pequenos pedaços para melhor organizar o corpo da mensagem sendo enviada Atribuição action Após a coleta dos dados com a codificação expressa no atributo enctype o formulário vai fazer uma requisição para alguma rota URL configurada no servidor Por padrão o navegador envia os dados para a mesma URL da página que contém o formulário Ou seja se o formulário está na URL httpswwwimpactaedubrcontato quando ele for submetido todos os seus dados irão para a mesma URL httpswwwimpactaedubrcontato O atributo action serve para configurar para qual URL o formulário será submetido e só é usado quando desejamos enviar os dados para uma URL diferente da URL da página que o contém Seu valor segue a mesma regra presente em outros atributos de URL src e href sendo permitido URLs absolutas e relativas Atribuição method O atributo method especifica qual método será usado para enviar os dados podendo ter dois valores GET e POST Basicamente a diferença entre os dois é que o GET adiciona os dados na própria URL que será usada para fazer a submissão ao servidor Esse Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1231 os dados a p óp a U que se á usada pa a a e a sub ssão ao se do sse método possui a desvantagem de deixar todos os dados visíveis uma vez que estarão presentes na barra de endereço do navegador e também limita o tamanho dos dados que podem ser enviados pois todos os navegadores definem um limite máximo que uma URL pode ter O método POST por outro lado envia os dados de maneira escondida dentro do corpo da requisição e por esse motivo não possui restrição de tamanho para os dados que serão enviados É o método ideal para enviar dados sensíveis como senhas números de cartões de crédito e outras informações de cunho pessoal dos usuários Por padrão todo formulário envia os dados com o método GET pois esse foi o primeiro a existir Entretanto na maioria das vezes será necessário configurar os formulários com o atributo method com o valor POST Campos de formulário O formulário será a região de coleta dos dados do usuário mas precisamos de controles específicos que os usuários possam interagir para colocar seus dados Na grande maioria das vezes o que será coletado é um texto em algum formato texto números datas etc mas em alguns casos queremos limitar as escolhas do usuário ou coletar textos mais específicos Os campos de formulário também chamados de inputs são divididos basicamente em três categorias coleta de texto coleta de opções e botões de controle A grande maioria dos campos é representado pela tag autocontida input usada para colocar o controle em uma determinada posição no formulário As tags input e suas variações que veremos adiante possuem vários atributos específicos mas as mais importantes são os atributos name e type O atributo name permite que o navegador colete as informações com nomes a serem enviados ao servidor similar às variáveis que existem nas linguagens de programação Sem o atributo name o navegador não conseguiria criar uma identificação única para determinado valor e portanto não seria possível distinguir os diferentes valores que o usuário deseja enviar ao servidor durante uma requisição Já o atributo type permite configurar o tipo de dado esperado no input como por exemplo texto email senhas URLs etc Campos de coleta de texto Para coleta de texto temos dois grandes tipos textos de uma única linha e textos de múltiplas linhas Para textos de uma única linha usamos a tag input com a variação do type de acordo com o dado que queremos obter Por padrão o atributo type tem o valor text que é o campo mais elementar e aceita qualquer texto em uma única linha Caso seja necessário coletar algum tipo mais específico de dado existem diversos tipos prédefinidos no HTML Essas variações no type para textos serve para adicionar uma Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1331 capacidade do navegador sugerir valores baseados no tipo e no histórico do usuário bem como uma validação nativa se o dado está escrito corretamente As variações mais comuns do type são text valor padrão usado quando omitimos o atributo type password campo de texto para senhas esconde o valor digitado email campo de texto que valida emails url campo de texto que valida URLs date campo de texto que valida datas datetimelocal campo de texto que valida data e hora time campo de texto que valida horas e minuto number campo de texto que aceita apenas números Mais exemplos destes inputs podem ser consultados em HTML input types sd Para textos de múltiplas linhas precisamos usar um elemento diferente definido pela tag textareatextarea Essa tag define uma caixa de texto que torna possível inserir quebras de linha no texto escrito Note que diferentemente da tag input a tag textarea possui abertura e fechamento Qualquer conteúdo dentro da tag é interpretado como sendo o valor inicial de texto nela HTML textarea tag sd Mesmo sendo outra tag por ser uma variação da tag input ela também deve ter o atributo name configurado A Figura 32 ilustra o uso das tags input e textarea dentro de um formulário Figura 32 Uso das tags input texto de única linha e textarea texto de múltiplas linhas form Nomebr input typetext namenomebr Mensagembr textarea namemensagemtextarea form Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1431 Fonte do autor 2022 Campos de coleta de opções Também é possível restringir as opções do usuário a uma lista prédefinida de opções Temos algumas maneiras de apresentar e restringir essas opções caixas de seleção e caixas de marcação múltiplas ou únicas A caixa de seleção é uma tag diferente pois passamos a ela uma lista de opções possíveis a serem escolhidas em uma estrutura similar às listas ordenadasnão ordenadas A caixa de seleção é definida pela tag selectselect Note que ela possui abertura e fechamento e assim como as tags input e textarea deve ter o atributo name configurado A lista de opções disponíveis para o usuário escolher é definida usando várias tags optionoption Cada tag option deve ter um conteúdo textual para mostrar ao usuário e opcionalmente pode ter um valor escondido que será enviado ao servidor caso a opção seja selecionada definido pelo atributo value Por exemplo na Figura 33 temos duas caixas de seleção Na primeira qualquer opção escolhida envia o conteúdo textual diretamente na submissão mas na segunda caixa o valor enviado é o que estiver no atributo value da opção marcada A primeira option é a que vem selecionada por padrão ao carregar a página mas isso pode ser alterado através do atributo booleano selected Note que usamos divs para separar as duas caixas de seleção opcional e também uma tag nova chamada label opcional mas é uma boa prática utilizála que pode ser usada com qualquer campo de formulário e será explicada mais adiante neste material Figura 33 Exemplos de caixas de seleção Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1531 form methodPOST div label forselinguagemLinguagemlabel select namelinguagem idselinguagem optionJavaoption optionPHPoption option selectedPythonoption select div div label forseestadoEstadolabel select nameestado idseestado option valueSPSão Paulooption option valueMGMinas Geraisoption option valueRJRio de Janeirooption select div form Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1631 No exemplo da Figura 33 ao selecionar qualquer linguagem de programação o texto selecionado será enviado ao servidor isto é um dos três valores listados Java PHP ou Python Já ao selecionar um estado o valor presente no atributo value do estado selecionado é que será enviado ao servidor isto é ou SP ou MG ou RJ Em resumo quando não usamos o atributo value na tag option o valor enviado é o texto da option e quando definimos o value o seu valor é que será enviado na requisição Caso seja interessante mostrar todas as opções disponíveis sem que o usuário precise consultar a caixa de seleção similar ao que ocorre em provas e pesquisas podemos usar as caixas de marcação Temos dois tipos marcação única e múltipla Nestes casos ambas são variações de tipos da tag input já comentada acima Usamos o type com valor radio para marcação única e com o valor checkbox para marcações múltiplas De maneira similar aos demais campos de formulários também precisamos definir o atributo name para cada checkbox ou radio mas no caso desses componentes devemos usar o mesmo valor de name dentro de um mesmo grupo Isso é importante para informar ao navegador que aqueles radios fazem parte do mesmo grupo e com isso só será possível marcar um deles Já no caso dos checkboxes é possível marcar mais de um componente dentro de um mesmo grupo e todos os valores marcados serão enviados com o mesmo name dentro daquele grupo como se fosse uma lista de valores Por fim cada checkbox ou radio precisa definir o valor que será enviado durante a submissão para o servidor caso aquele componente esteja selecionado Isso é feito através do atributo value Note que esse valor fica oculto no navegador ele não aparece para o usuário Também é possível marcar quais componentes virão marcados por padrão através do atributo booleano checked A Figura 34 mostra o uso das caixas de marcação As tags fieldset e legend servem para organizar melhor as caixas de marcação e são opcionais e serão explicadas mais adiante neste material Figura 34 Exemplos de caixas de marcação Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1731 form methodPOST fieldset legendLinguagem única opçãolegend input typeradio namelinguagem idrajava valueJava label forrajavaJavalabel input typeradio namelinguagem idraphp valuePHP label forraphpPHPlabel input typeradio namelinguagem idrapython valuePython checked label forrapythonPythonlabel fieldset fieldset legendDisponibilidade múltipla escolhalegend input typecheckbox namedisp idramanha valueM label forramanhaManhãlabel input typecheckbox namedisp idratarde valueT label forratardeTardelabel input typecheckbox namedisp idranoite valueN label forranoiteNoitelabel fieldset form Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1831 Existem ainda os campos de seleção de arquivos que permitem que sejam anexados arquivos para enviar ao servidor Os type file e image cuidam de criar um campo que permite escolher um arquivo do seu computador ou imagem para anexar no formulário Botões de controle Para enviar um formulário precisamos de um controle que o usuário use para dizer que ele preencheu tudo que era necessário e agora é o momento de enviar os dados ao servidor Os botões de controle permitem que o usuário decida quando determinada ação deve ser executada Eles podem ser definidos tanto pela tag input como também pela tag buttonbutton Diferentemente da tag input o button possui abertura e fechamento com o conteúdo interno sendo usado para formatar o botão Existem três tipos de botões em HTML e eles são diferenciados pelo atributo type submit reset e button Cada um desses tipos possui funções específicas submit usado para submeter enviar o formulário ao servidor Ao clicar nele o navegador efetua as validações dos dados escritos no formulário veremos mais como isso funciona codifica os dados obtidos seguindo seu enctype e envia a requisição para a URL especificada no action usando o método especificado no method Todos os dados contidos na tag form que este botão estiver contido serão enviados mesmos os dados escondidos reset faz com que todos os campos dentro do formulário voltem ao seu estado original Em geral isso faz com que se esvazie tudo o que foi digitado e selecionado mas caso algum campo tenha sido definido com algum valor padrão através atributo value esse valor é o que será colocado no campo No caso das caixas de seleção o valor com o atributo selected voltará a ser selecionado e no caso das caixas de marcação radios e checkboxes os valores com o atributo checked voltarão a ser marcados button não faz nada por padrão sendo utilizado apenas para ações customizadas com o A linguagem JavaScript A Figura 35 mostra um formulário simples com botões do tipo submit e reset Mais informações sobre o uso de botões podem ser consultadas em HTML button tag sd Figura 35 Exemplos de botões em formulários Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 1931 form methodPOST div label fortxnomeNome completolabel input typetext namenome idtxnome div div label forsecursoCursolabel select namecurso idsecurso option valueADSAnálise e Desenvolvimento de Sistemasoption option valueCCCiência da Computaçãooption option valueSISistemas de Informaçãooption select div div button typesubmitEnviarbutton button typeresetLimparbutton div form Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2031 Semântica nos formulários Sempre que apresentamos informações no HTML devemos nos preocupar com o conteúdo semântico do que é apresentado Esse mesmo princípio também vale quando construímos formulários pois melhora a usabilidade geral do formulário para todos os usuários incluindo os que usam tecnologias assistivas O uso de campos adequados para cada tipo de dado que se deseja coletar é o primeiro passo para formulários mais corretos do ponto de vista semântico Por exemplo o número de unidades federativas no Brasil é limitado 27 atualmente portanto é muito mais adequado listálas em uma caixa de seleção do que solicitar que o usuário digite o nome de algum estado evitando erros de grafia Outro exemplo é quando solicitamos o sexo do usuário e ele deve informar somente uma opção sem ambiguidade sendo adequado o uso de caixas de marcação do tipo radio Mas além disso há outras duas tags que ajudam no quesito da semântica label e fieldset A tag labellabel serve para criarmos um texto associado a um campo existente Para isso o label deve ter o texto no seu conteúdo através do atributo for onde seu valor é igual ao valor do id do campo associado O id é o único atributo que garante que o label esteja associado a um único campo A importância do label se dá para ajudar em tecnologias assistivas em ler o nome do campo para saber o que deve ser escrito dentro dele Já a tag fieldsetfieldset é utilizada para agrupar vários campos que tenham o mesmo objetivo por exemplo campos de endereço rua número cidade estado etc ou opções diferentes de um mesmo assunto alternativas de uma questão Dentro de um fieldset deve haver uma tag legendlegend com o nome do agrupamento exemplo título da questão e todos os campos que se referem ao que o fieldset quer agrupar Tradicionalmente usamos fieldset com agrupamentos de vários radios ou checkboxes como foi mostrado na Figura 34 Vamos praticar 1 O site de documentação web W3Schools possui além de muita documentação alguns exercícios simples e práticos das mais diversas matérias de programação Para mais informações e exemplos sobre formulários em HTML consulte a página httpswwww3schoolscomhtmlhtmlformsasp Desenvolvimento Web 07082023 1145 Desenvolvimento Web Antes de enviar os dados do servidor é interessante validar o maximo possivel se o que esta escrito ou selecionado no formulario faz sentido com o que era esperado economizando requisioOes desnecessarias O HTML possui maneiras de indicar uma série de regras para validacgdes basicas dos dados presentes nos formularios A primeira validagao ocorre pelo tipo Se o campo tem um type muito especifico como email number ou url o proprio navegador ja mostra uma mensagem de erro caso o dado nao esteja escrito da maneira correta Além disso temos alguns atributos que podem ser incluidos nos campos para auxiliar na validagao Form data validation sd required atributo booleano quando presente faz com que o navegador verifique se o campo esta vazio antes de enviar os dados para o servidor e avisa caso esteja vazio maxlength ou minlength para tipos textuais incluindo textarea esses atributos requisitam um numero maximo ou minimo de caracteres escritos no campo para serem aceitos para submissao min ou max de maneira similar para o campo number podemos definir um valor minimo ou maximo para o que 0 usuario ira colocar no campo pattern podemos definir uma expressao regular regex para verificar se o que esta escrito bate com o esperado comumente usado para numeros de telefones httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2131 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2231 Vamos praticar 2 Edite o exercício com a página da empresa fictícia Cursinho Web para que ela possua uma página para contato com o nome contatohtml Utilize as seguintes configurações para os campos Nome completo type text com name nome Email type email com name email Disciplina que mais interessa select com name disciplina Não é necessário configurar os values das opções opcional Linguagens que a pessoa conhece checkboxes com name linguagens C com value csharp Java com value java JavaScript com value js Python com value python PHP com value php Ruby com value ruby Onde conheceu radios com name conheceu Amigos com value amigos Google com value google Youtube com value youtube Instagram com value instagram Botões de Enviar e Limpar com os types adequados O formulário deve ser enviado usando o método POST Não é necessário configurar o action Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2331 Figura 36 Aparência da página contatohtml Fonte do autor 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2431 Referências Form data validation MDN Web Docs sd Disponível em httpsdevelopermozillaorgptBRdocsLearnFormsFormvalidation Acesso em 27 jun 2022 HTML button tag W3Schoolscom sd Disponível em httpswwww3schoolscomtagstagbuttonasp Acesso em 25 jun 2022 HTML form tag W3Schoolscom sd Disponível em httpswwww3schoolscomtagstagformasp Acesso em 25 jun 2022 HTML input types W3Schoolscom sd Disponível em httpswwww3schoolscomhtmlhtmlforminputtypesasp Acesso em 25 jun 2022 HTML textarea tag W3Schoolscom sd Disponível em httpswwww3schoolscomtagstagtextareaasp Acesso em 25 jun 2022 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2531 Saiba mais Para conhecer mais sobre os temas estudados clique no link abaixo e leia o guia do Google para construir formulários Learn Forms webdev Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2631 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2731 Finalizando Desenvolvimento Web 07082023 1145 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Compreender o mecanismo de coleta de dados do usuario Entender as configuragdes basicas de um formulario HTML Aprender os principais marcadores tags para construao de campos de coleta de dados Definir e configurar botées Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compdem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2831 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 2931 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 3031 Desenvolvimento Web 07082023 1145 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp3pli1authuser1 3131 Classroom Gmail Drive Portal do Aluno Núcleo de Educação a Distância Faculdade Impacta Telefone 11 55935382 Horário de atendimento 10h às 18h Desenvolvimento Web

Sua Nova Sala de Aula

Sua Nova Sala de Aula

Empresa

Central de ajuda Contato Blog

Legal

Termos de uso Política de privacidade Política de cookies Código de honra

Baixe o app

4,8
(35.000 avaliações)
© 2025 Meu Guru®