HTML - Forms

Formulários

O meio mais comum de se interagir com alguma aplicação dentro de um ambiente web é através de formulários. Esse tipo de elemento HTML define um espaço onde se é utilizado uma série de componentes chamados de inputs que podem possuir algumas variações. O formato mais conhecido de formulário (e o mais simples) é o com input do tipo texto e botões, um exemplo rápido deles é uma tela de login, composta por usuário, senha e o botão de entrar ou logar.

As opções mais importante de um form são o "action" que define o link do envio do formulário em questão e o "method" que define o método (GET/POST) de envio, além da opção "target" que possui o mesmo funcionamento da tag anchor ("a"), jogando a resposta do envio na mesma página, ou em outra nova página.

Um aspecto importante dentro de um formulário, é a aplicação de eventos de validação relacionados a cada tipo de input, assim o usuário consegue ser direcionado a interagir de uma forma melhor com a aplicação e melhora a comunicação das informações com o servidor, que terá que lidar com menos erros.

Um elemento que ajuda na identificação de cada input é o label (etiqueta), ele é usado antes e um input para dar nome ao input ou para indicar o que se espera daquele input. Como por exemplo o texto de "usuário" antes do input de texto que será usado para inserir o nome do usuário. Sua opção específica é o "for" que indica qual input está sendo etiquetado por aquele label, o input deverá usar a opção "name" com o mesmo nome usado no "for".

Tipos de inputs

Como padrão, a tag do input é escrita como <input type="" value="">, com os valores base sendo o tipo (type) e o valor (value), mas cada tipo pode ter mais opções específicas. Veja a seguir.

• Button / Botão: este input server como um acionador de funções. Ele é tão usado e tão importante que acabou sendo criado um tipo de elemento específico com o nome button. Sua opção principal é a onclick, onde se pode definir uma função javascript que será ativada ao clicar nele.

• Text / Texto: um input usado para capturar uma sequência de caracteres. Suas opções mais importantes são o "maxlength" para definir o tamanho máximo, "minlength" para o tamanho mínimo, "pattern" que usa uma expressão regular para filtrar o conteúdo, "placeholder" que é uma frase transparente que ocupa o input antes de ser inserido alguma coisa, "size" que define qual o tamanho do quadro com baseno número de caracteres a mostra, "value" será o valor inserido no quadroi, o "spellcheck" que habilita a checagem de ortografia e por fim "list" que mostra uma lista pré definida de textos que será definida em um elemento "datalist" com o "id" inserido em "list".

• Checkbox / Caixa de seleção: é uma caixa que pode ser marcada ou desmarcada. A opção principal é a value, que indica o nome dela para o formulário. O estado do checkbox é guardada no atributo "checked" como "true" (para marcado) ou "false" (para desmarcado).

  Meu estado (checado)

• Number / Número: usado para se inserir um número. Suas opções especiais são as "max" indicando o número máximo permitido, a "min" com o número mínimo e a "step" que indica qual o menor tamanho entre dois números (1, 2, 10, 18, 0.1, 0.01, 0.001...) que será inserido com as setas auxiliares no fim do input. Assim como o text, ele também possui as opções de placeholder, list e value (que terá o valor inserido).

  Número de 2 a 15 com step de 0.1:

• Date / Data: para selecionar um dia com mês e ano. Seu value será o dia selecionado como uma string (sequência de caracteres no formato yyyy-mm-dd). Suas opção são a de "max", "min", "step".

  Data entre 02/03/2024 e 31/05/2025 de 10 em 10 dias:

• Submit / Enviar: é um input especial, ele se apresenta como um botão e se não colocar um valor em "value" que será a string de apresentação dele, o nome que aparecerá é "Submit" ou a tradução para o sistema em que a página estará sendo exibida. Este botão tem como função principal ativar a função de validação de todos os inputs dentro do form e caso estejam todos corretos, vai pegar cada elemento, montar o corpo de uma requisição no estilo "chave: valor", sendo a "chave" o atributo de "name" e o "valor" o atributo de "value" de cada input. Este body será enviado para o link que estiver descrito na opção "action" do element "form" que este input faz parte, ou então será enviado para o link que estiver em "formaction" deste mesmo elemento.

Além desses tipos principais ainda existem os tipos: color, datetime-local, email, file, hidden, image, month, password, radio, range, reset, search, tel, time, url, week.

Tipos especiais

Além dos tipos principais em um form, ainda existem 2 tipos que foram criados por uso e conveniência, o button e o textarea.

TextArea / Área de texto é um input do tipo text que possui várias linhas. É mais usado para se inserir um texto ou parágrafo. Além das opções de text ele ainde tem as opções "cols" (coluna) e "rows" (linhas) que ajudam a definir o tamanho exato da área que será exibida.

Button / Botão: ele possui o mesmo comportamento que o input de tipo botão, mas é escrito apenas como button: <button >Clique em mim </button>. Ele ainda pode assumir o comportamento em um input de submit ao se definir o tipo como "submit".

Eu mudo de cor!

Referências

Mozilla Developer - Forms