FORMULÁRIO HTML

Os formulários HTML são estruturas que permitem que os usuários insiram e enviem informações para uma página. Esses dados podem ser tratados, armazenados em bancos de dados, enviados por e-mail ou utilizados para construir novas páginas, dependendo da aplicação.

Formulários estão presentes em grande parte da Internet, possibilitando cadastros, pesquisas, envio de comentários, login, compra de produtos, entre outros.

Um formulário HTML é uma área de uma página que contém, além de texto, campos interativos, como caixas de texto, botões, listas de seleção e áreas de comentários.

Estrutura do Formulário

O elemento básico para criar um formulário é a tag <form>.

Essa tag não possui efeito visual por si só; sua função é agrupar os campos que serão enviados juntos.

Sempre deve ser aberta e fechada: <form> ... </form>

Principais Atributos de <form>:

action – define o destino dos dados enviados (normalmente um script no servidor que irá processar as informações).
method – define o método de envio. Pode ser:

1. Get

Envia os dados pela URL (fica visível no link).
Exemplo: meusite.com/pesquisa?nome=leal&idade=25
É usado quando você não precisa esconder as informações (ex: pesquisa no Google).
Tem limite de caracteres.

2. Post

Envia os dados de forma oculta, no corpo da requisição, não aparece na URL.
É usado para dados sensíveis ou grandes (ex: login, cadastro).
Mais seguro que o GET (apesar de ainda precisar de HTTPS para proteção real).

Elementos de Formulário

Grande parte dos campos de entrada são criados com a tag <input>, cujo atributo type define o tipo de campo exibido. Além disso, cada campo deve ter um atributo name, que identifica a variável enviada ao servidor.

Campos de Texto

Name – identifica o campo.
Value – valor pré-definido (pode ser alterado).
Size – largura do campo (em caracteres).
Maxlength – número máximo de caracteres aceitos.

Campo de Senha

Semelhante ao campo de texto, mas os caracteres digitados aparecem mascarados com asteriscos. Importante: o campo não criptografa a senha, apenas oculta visualmente.

Botões

Rádio (escolha única)

<input type="radio" name="sexo" value="M"> Masculino

<input type="radio" name="sexo" value="F"> Feminino

As opções do mesmo grupo devem compartilhar o mesmo atributo name.

Checkbox (múltipla escolha)

<input type="checkbox" name="interesse" value="esporte"> Esporte

<input type="checkbox" name="interesse" value="musica"> Música

Permite marcar várias opções ao mesmo tempo.

Submit (enviar)

Envia os dados do formulário ao destino configurado no action.

Reset (limpar)

Restaura os campos para os valores iniciais.

Listas de Seleção

Criadas com <select> e <option>:

<option selected disabled value="">Selecione</option>

</select>

Size – número de opções visíveis.
Multiple – permite selecionar várias opções.
Value – valor enviado ao servidor.

Área de Texto

Criada com <textarea>, usada para textos maiores (comentários, descrições etc.):

<textarea name="mensagem" rows="5" cols="40">Digite aqui...</textarea>

Não possui o atributo value. O texto inicial deve ser escrito entre as tags.

Outros Tipos de Campos

O atributo type do <input> permite outros tipos úteis:

date – campo de data
email – campo de e-mail
file – envio de arquivos
number – números
search – pesquisa
time – horário

Agrupando Campos: <fieldset> e <legend>

<fieldset> – agrupa campos relacionados dentro de um formulário.
<legend> – título/descrição para o grupo.

Exemplo:

<legend>Dados Pessoais</legend>

</fieldset>

Estilizando Formulários

Assim como qualquer elemento HTML, formulários podem ser estilizados com CSS.
A propriedade border, por exemplo, define bordas:

border: 5px solid orange;

Espessura: thin, medium, thick ou valores em px.

border-width: permite definir larguras diferentes para cada lado.

border-width: 5px 10px 15px 20px;

Resumindo os Principais Campos

Text – entrada de texto simples
Password – senha mascarada
Radio – escolha única
Checkbox – múltiplas escolhas
Submit – enviar dados
Reset – limpar formulário
Select – lista suspensa
Textarea – área de comentário
Date – data
Email – e-mail
File – envio de arquivo
Number – entrada numérica
Search – pesquisa
Time – horário

PROPRIEDADE BORDER-RADIUS DO CSS

Destina-se a definir bordas arredondadas.

Exemplo: border: 30px solid blue; border-radius: 20px;