Formulários HTML e PHP

ranierivalenca

Ranieri Valença

Posted on July 26, 2023

Formulários HTML e PHP

Tópicos

 1. Introdução
 2. Inputs e Interação com o Usuário
 3. Inputs do Tipo "hidden"
 4. Action e Métodos de Envio
 5. Manipulação de Dados
       5.1. Validação de Dados
 6. Sanitização de Dados
 7. Envio de Arquivos
 8. Conclusão

Introdução

O HTML é uma linguagem de marcação amplamente utilizada para formatar documentos na web. Além de permitir a criação de estruturas de página e elementos visuais, o HTML também possibilita a criação de interações com os usuários por meio de âncoras (<a>) e formulários (<form>). Os formulários são elementos essenciais que permitem aos usuários inserir dados e enviar informações para os servidores web.

Diferentemente das âncoras usadas para criar links entre documentos, que geram requisições HTTP com o método GET quando clicadas, os formulários possibilitam a criação de requisições com diferentes métodos, como GET e POST. Ao submeter um formulário, o navegador envia uma requisição ao servidor contendo os dados inseridos nos campos do formulário.

Inputs e Interação com o Usuário

Os inputs são elementos fundamentais nos formulários HTML e representam os campos onde os usuários podem inserir dados. Cada input possui um atributo type, que define o tipo de dado que será inserido no campo. Os tipos mais comuns de input são:

  • text: Permite a inserção de texto simples.
  • password: Semelhante ao text, mas mascara os caracteres digitados, útil para senhas.
  • number: Aceita apenas números, com opção de definir um intervalo válido.
  • email: Projetado especificamente para inserção de endereços de e-mail válidos. Muito útil na criação de interfaces mobile-first.
  • checkbox: Representa uma caixa de seleção que permite ao usuário marcar uma ou várias opções.
  • radio: Representa um botão de opção que permite ao usuário selecionar apenas uma opção de um grupo.

Além desses inputs, há também os elementos <select> que cria um menu suspenso (drop-down) com opções selecionáveis e <textarea>que permite a inserção de texto longo em várias linhas.

Para entender melhor os atributos e a utilização dos inputs, recomenda-se consultar a documentação do W3Schools sobre HTML Input Types e o guia da MDN sobre Formulários HTML.

Inputs do Tipo "hidden"

Além dos inputs mencionados anteriormente, existe o tipo de input "hidden". Esse tipo de input é invisível para o usuário, não sendo exibido na interface da página. Ele é frequentemente utilizado para armazenar dados importantes que precisam ser enviados ao servidor, mas que não necessitam da interação direta do usuário.

Os inputs do tipo "hidden" são particularmente úteis para o envio de informações de controle, como identificadores únicos, valores padrão ou tokens que precisam ser processados no lado do servidor. Por exemplo, ao enviar um formulário de edição de um item, pode-se incluir um input do tipo "hidden" para armazenar o ID do item que está sendo editado.

<input type="hidden" name="id" value="123">
Enter fullscreen mode Exit fullscreen mode

Action e Métodos de Envio

Os formulários em HTML oferecem a flexibilidade de escolher o método de envio para a requisição HTTP. O método padrão é o GET, que envia os dados como parte da URI da requisição. Essa abordagem é mais adequada para formulários que não contêm dados sensíveis e não realizam ações que possam modificar informações no servidor. Por exemplo, um formulário de busca que utiliza o método GET pode enviar os parâmetros de pesquisa na URI, permitindo que o usuário compartilhe facilmente a URL com os resultados da busca.

Por outro lado, o método POST envia os dados como parte do corpo da requisição, tornando-os invisíveis na URI. Isso é particularmente útil para formulários que contêm informações confidenciais ou que executam ações que podem alterar o estado do servidor, como adicionar, editar ou excluir dados. Por exemplo, um formulário de cadastro de usuário ou de envio de informações pessoais deve utilizar o método POST para proteger a privacidade dos dados do usuário.

Quando um formulário é submetido, o request é feito para o endereço apontado pelo atributo action:

<form action="/update.php" method="POST">
  ...
  <input type="submit">
</form>
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, quando o formulário for submetido será feita uma requisição utilizando o método POST para a URI /update.php. Em formulário sem o atributo action, a requisição é feita para a própria URI onde o usuário está.

Para saber mais sobre os métodos de envio em formulários HTML, você pode consultar a documentação do W3Schools sobre HTML Forms e a referência da MDN sobre Formulários HTML.

Manipulação de Dados

Ao enviar um formulário, os dados inseridos pelo usuário são enviados ao servidor. Cada linguagem terá sua forma de lidar com estes dados. O PHP fornece uma série de variáveis superglobais, como $_GET, $_POST e $_REQUEST, que contêm os dados enviados pelo formulário e podem ser acessados para processamento posterior. Por exemplo, se o formulário possui um campo com o nome "idade" (<input type="text" name="idade">), é possível acessar o valor desse campo no lado do servidor através de $_POST['idade'] caso o método de envio seja POST, ou $_GET['idade'] caso o método seja GET. Note que o valor do atributo name do <input> é o índice na variável superglobal, e esse índice é case sensitive (sensível ao caso – maiúsculas e minúsculas importam).

Para entender melhor como manipular os dados de um formulário no lado do servidor com PHP, você pode consultar a documentação do W3Schools sobre PHP Form Handling, a referência da MDN sobre Manipulação de Dados de Formulários HTML ou a referência do manual do PHP Tratando formulários.

Validação de Dados

A validação de dados é uma etapa crucial no processamento de formulários. É importante garantir que os dados recebidos do usuário estejam corretos e se encaixem nos critérios esperados antes de serem usados. A validação pode incluir a verificação de campos obrigatórios, o formato correto de endereços de e-mail, números ou datas e outros critérios específicos para os dados inseridos. A validação pode (e deve) ser feita tanto no lado do cliente (assegurando uma melhor experiência para os usuários) quanto no lado do servidor, garantindo a segurança.

O PHP oferece funções e recursos para facilitar a validação de dados. Os desenvolvedores podem utilizar funções como filter_var() e expressões regulares para verificar e validar os dados antes de processá-los. Por exemplo, é possível usar filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) para verificar se o campo de e-mail possui um formato válido.

Para aprofundar seus conhecimentos em validação de dados tanto no front-end quando com PHP, você pode consultar a documentação do W3Schools sobre PHP Filters e a referência da MDN sobre Client-side Form Validation.

Sanitização de Dados

Além da validação, a sanitização de dados é outra etapa importante no processamento dos dados recebidos pelo formulário. A sanitização envolve a remoção de caracteres perigosos, como tags HTML, scripts maliciosos e outras entradas indesejadas, para evitar vulnerabilidades de segurança, como ataques de injeção de código.

O PHP fornece funções como filter_input() e htmlspecialchars() que podem ser utilizadas para sanitizar os dados recebidos do formulário antes de serem utilizados em operações críticas. A função htmlspecialchars() converte caracteres especiais em entidades HTML, garantindo que eles sejam interpretados como texto e não como código executável.

Para entender a importância do processo de sanitização, você pode acessar a página sobre XSS na Wikipedia ou no MDN

Envio de Arquivos

Em alguns casos, os formulários precisam permitir que os usuários enviem arquivos para o servidor, como imagens, documentos ou vídeos. Para lidar com esse tipo de formulário, é necessário adicionar o atributo enctype="multipart/form-data" à tag <form> associada com o method="POST". Esse atributo indica ao navegador que o formulário contém arquivos binários a serem enviados, o que altera a forma como o pacote da requisição HTTP é construído.

Por exemplo, considere o seguinte formulário:

<form action="http://exemplo.com/upload" method="post" enctype="multipart/form-data">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

  <label for="arquivo">Enviar Arquivo:</label>
  <input type="file" id="arquivo" name="arquivo">

  <input type="submit" value="Enviar">
</form>
Enter fullscreen mode Exit fullscreen mode

Ao ser submetido com um arquivo chamado "example.txt", o pacote HTTP seria algo similar ao seguinte:

POST /upload HTTP/1.1
Host: exemplo.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="nome"

John Doe
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="arquivo"; filename="example.txt"
Content-Type: text/plain

... conteúdo do arquivo example.txt ...
------WebKitFormBoundary7MA4YWxkTrZu0gW--
Enter fullscreen mode Exit fullscreen mode

Do lado do PHP, o tratamento dos arquivos enviados é feito através de variáveis superglobais especiais, como $_FILES, que contém informações sobre o arquivo, como o nome original, o tipo MIME e o local temporário onde o arquivo é armazenado. Os desenvolvedores podem mover e manipular esses arquivos usando as funções apropriadas do PHP, como move_uploaded_file() para salvar o arquivo em um local permanente no servidor.

Conclusão

Ao utilizar formulários HTML em conjunto com o PHP, os desenvolvedores podem criar interações entre os usuários e as aplicações web. Os métodos de envio, a manipulação, validação e sanitização de dados, bem como o envio de arquivos, são fundamentais para o funcionamento seguro e eficiente dos formulários web. Ao entender esses conceitos e utilizar as ferramentas disponíveis no PHP, é possível criar formulários robustos e confiáveis que proporcionam uma ótima experiência aos usuários.

💖 💪 🙅 🚩
ranierivalenca
Ranieri Valença

Posted on July 26, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related