Formulários em HTML: Estrutura e Métodos de Envio

081123 0938 webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml 16 Formulários Um formulário é um conjunto de campos também chamados de controles de entrada Podemos usar esses campos para obter informações do usuário Um formulário é definido pela tag form e possui como principais atributos o method e o action O atributo method determina o método de envio do formulário Seu valor pode ser GET ou POST O método GET envia os dados via querystring eles aparecerão na URL após o Deve ser usado quando o 081123 0938 webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml 26 envio não provocar nenhuma mudança no lado do servidor ex uma busca consulta O método POST envia os dados no cabeçalho HTTP da página invisível Deve ser usado quando alguma alteração será feita no lado servidor após o envio do formulário ex um cadastro ou uma compra O atributo action define para onde qual outra página o formulário será enviado Esta página de destino é que processará a informação Para esta parte é necessário programar do lado do servidor por exemplo com PHP form methodGET actionhttpwwwinfufrgsbrrcpintotestadorphp Com o formulário aberto podemos começar a inserir campos Mas antes disso podemos inserir a tag fieldset para organizar melhor um conjunto de campos Logo após abrir o fieldset devemos usar a tag legend para definir o título deste grupo de campos Fecharemos a tag fieldset ao final do conjunto de campos agrupados 081123 0938 webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml 36 fieldsetlegendEntrada de Textolegend O principal tipo de campo HTML é definido pela tag input Ele é um campo de entrada genérico e seu tipo específico deve ser especificado pelo atributo type Existem muitos tipos de input veremos todos em seguida Entrada de Texto input typetext input typetext namerua valueAv Boqueirão Os atributos mais comuns de inputs são o name e o value opcional É como definir o nome e o valor de uma variável respectivamente input typeemail input typeemail nameemail valueeucanoasifrsedubr required Aqui também usamos o atributo required introduzido no HTML5 Ele serve para tornar um campo obrigatório mas não é suportado pela maioria dos navegadores como a maioria dos campos HTML5 que veremos input typenumber 18 input typenumber nameidade value18 input typepassword input typepassword namesenha value12345 input typesearch input typesearch namebusca input typetel XX XXXXXXXX input typetel namefone placeholderXX XXXXXXXX 081123 0938 webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml 46 O atributo placeholder permite definir um texto que fica no local de preenchimento até que o usuário digite algo Pode ser usado para dar um exemplo de como o campo deve ser preenchido input typeurl input typeurl namesite textarea textarea nameobstextarea Note que este já não é um campo input Nesse caso usamos a tag textarea que deve ser fechada input typetext listbrowsers input typetext listbrowsers namenavegador datalist idbrowsers option valueInternet Explorer option valueFirefox option valueChrome option valueOpera option valueSafari datalist O atributo list juntamente com as tags datalist e option pode ser usado para criar autocomplete e dar dicas de valores possíveis para serem preenchidos fieldset Opções input typecheckbox a b a input typecheckbox nameop valuea b input typecheckbox nameop valueb checked input typeradio M F M input typeradio namer1 valueM checked F input typeradio namer1 valueF select a select namelista optgroup labelLetras option valueaaoption option valuebboption optgroup optgroup labelNúmeros 081123 0938 webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml 56 option value11option option value22option option value33option optgroup select Data e Hora input typedate ddmmaaaa input typedate namedatanasc placeholderddmmaaaa size10 input typedatetime input typedatetime namedataehora input typedatetimelocal ddmmaaaa input typedatetimelocal namedataehoralocal input typeweek Semana de input typeweek namesemana input typemonth de input typemonth namemes input typetime input typetime namehora Outros input typebutton botão input typebutton valuebotão button lalala buttonlalalabutton input typeimage clicou input typeimage namebotao valueclicou input typecolor 081123 0938 webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml webacademicocanoasifrsedubrrcpintoIFRSphpHTML9Formuláriosaulaformshtml 66 input typecolor namecor input typerange input typerange nametemperatura value20 min16 max32 input typefile Escolher ficheiro Nenhum ficheiro selecionado input typefile namearquivo input typehidden input typehidden nameoculto value123 input typereset Repor input typereset input typesubmit Enviar input typesubmit form