Formulários em HTML - O que são e para que servem
A tag <form> Os atributos action e method
A primeira coisa que iremos fazer é usar a tag <form> para podermos usarmos
formulários.
Antes de entrarmos em detalhes sobre os atributos e uso desta tag, devemos nos
lembrar que o HTML serve apenas para definir a maneira como as informações,
inclusive os formulários, estão localizados em uma página de um site.
Assim, vamos criar botões, caixas de texto, caixas de senha etc.
Mas ao clicar, nada vai ocorrer, pois para fazer alguma ação (como efetuar o
login), devemos entrar mais a fundo nos códigos e usar códigos de programação,
como em PHP ou JavaScript.
Mas antes de aprendermos essas linguagens, precisamos entender o HTML.
O atributo action
Quando clicamos em um botão ou escrevemos em uma caixa de texto, estamos
fazendo uma ação.
A ação pode ser o envio de e-mail e senha para fazer o login, ou pode ser que ao
pressionar um botão todos os campos de textos sejam limpos.
Uma ação, como a abertura de uma janela, pode ser tomada se marcamos uma
opção numa lista.
Enfim, as ações são infinitas, e é o programador que vai decidir o que será feito
quando o usuário interagir com o formulário.
Essa interação e comandos da ação está definida em um arquivo que contém um
script, que são códigos de programação.
Logo, este atributo action vai armazenar o endereço, a URL deste arquivo:
<form action="URL_do_script">
O atributo method
Já para o atributo method usaremos dois tipos de valores: get e post
Os dois valores, get e post servem para enviar as informações obtidas pelo
formulário para o handler, que é o código de programação que vai trabalhar, lidar
com as informações inseridas no formulário.
Quando usamos o valor get, o dado é passado direto na URL do documento.
Por exemplo, se tiver um formulário de nome 'lingua' e você insere no formulário a
informação que a língua é o português do Brasil, o 'pt_BR', e no código do
formulário você usa o get, a URL vai ficar: www.URLANTIGA.com.br/algo.html&lingua=pt_BR
Já se você usar o post, vai passar a informação do mesmo jeito, mas não vai ser
de uma maneira visível, como no caso do get que mostra a informação na URL..
Assim, a sintaxe geral de um formulário é
<form action="URL_do_script" method="post">
<form action="URL_do_script" method="get">
Para que servem as caixas de senha em HTML
Assim como as caixas de textos simples, as caixas de senha são um tipo especial
de formulário devido a sua importância, visto que usamos diversas, ao longo do
dia.
Ao entrar em seu e-mail, você preenche seu login e senha. Faz o mesmo para
entrar na rede social e até mesmo para usar seu celular.
Se você usa o sistema operacional Linux, então, sabe como é comum fornecer a
senha para instalar, desinstalar ou fazer qualquer coisa que vá um pouco além do
básico, visto que é um sistema extremamente seguro e estável.
Na verdade, as caixas de senha (password input boxes, em inglês) não muito
diferentes da de texto.
A grande vantagem destas é que elas escondem a informação que está sendo
digitada, seja através de um asterisco ou a figura de uma bolinha sempre que
inserimos algum caractere naquele campo de um formulário de algum site em
HTML.
Com este tipo de elemento de um formulário, seus usuários podem digitar a senha
sem que esta seja vista por pessoas que estejam próximas. Ou seja, elas servem
como uma maneira de encriptar ou esconder uma informação segura.
Como usar o formulário de Campo de
Password: type="password"
De fato, a única diferença é no atributo type, que antes era "text", e agora será
"password", que significa senha em inglês. E assim como no text input box,
vamos usar o atributo name para dar um nome ao nosso campo de senha, pois
será necessário identificar cada elemento de um formulário (isso é primordial para
tratar os formulários com uma linguagem de programação).
Assim, a sintaxe de nossa caixa de password fica:
<input type="password" name="senha">
Cujo efeito é a seguinte caixa de senha:
Tente escrever algo, verá que não vai aparecer, exatamente como ocorre nos
formulário de login e senha que você usa por aí, pela internet, mas dessa você foi
você que criou o seu form :)
Basicamente só fazemos mudar de "text" para "password" o atributo type da
tag <input> que o HTML já reconhece e sabe que queremos usar senha naquele
campo.
Além disso, o seu navegador, junto com o HTML, ao notar que aquele campo é de
senha, já disponibiliza alguns recursos de segurança.
Por exemplo, escreva algo na caixa de senha e depois selecione o que escreveu e
tente copiar para colar em outro lugar: não dá. O HTML é esperto e sabe que isso
não deve ocorrer, afinal, senhas são coisas confidenciais.
As tags < label >, < legend > e < fieldset >: Nomeando e
agrupando campos de um Formulário
O campo <label>: Como criar rótulos e etiquetas para
os formulários
Sempre que formos usar algum campo de um formulário, por mais óbvio que ela
possa ser, é necessário deixar bem claro para o usuário e leitor de seu site o
propósito daquele campo.
Ou seja, devemos fazer um processo de rotulação, colocar etiquetas, algum tipo
de marcados nos campos, que explique para que serve cada um daqueles
elementos do form.
Fizemos isso, algumas vezes, como no uso das caixas de texto, apenas
escrevendo "Login" ou "Insira seu e-mail aqui" com valor inicial de uma caixa de
texto.
Sintaxe da tag <label>: O atributo for
Assim, para nomearmos de maneira mais correta os campos de um formulário,
devemos usar a tag <label> (rótulo ou etiqueta, em inglês), cuja sintaxe é:
<label for="Nome_do_campo">Texto que visível</label>
Ou seja, devemos colocar no atributo for o nome do campo de formulário na qual
aquele label se refere.
Por exemplo, vamos criar uma caixa de texto chamada "email" e uma caixa de
password chamada "senha", o uso correto do label seria como mostra o seguinte
código HTML:
<label
<input
<label
<input
for="email">E-mail: </label>
type="text" name="email"> <br />
for="senha">Senha: </label>
type="password" name="senha">
Cujo resultado será:
E-mail:
Senha:
Note que o valor contido no atributo for da tag <label> deve igual ao nome do
formulário na qual aquele label se refere. Isto é importante.
E isso aparentemente é igual a simplesmente colocar um texto qualquer. Mas só
aparentemente, pois o uso de label, além de deixar seu código e formulário HTML
mais organizado, fornece algumas funcionalidades, principalmente se o leitor não
puder ver os formulários.
Como criar botões em HTML, de Reset (limpar) e Submit
(enviar) em Formulários
Como criar Botões HTML: type="button"
Felizmente, como em quase todos os campos de um formulário HTML, para criar
um botão vamos precisar apenas apenas alterar o valor do atributo type, da
tag <input>.
Ou seja, criar um button em um site é algo bem simples.
A ação que ocorre quando se cria um botão é que é algo mais complexo, e para
isso se exige alguma linguagem de programação, como o JavaScript.
Assim, a simples sintaxe, portanto, para se criar um botão é:
<input type="button">
Cujo resultado é este botãozinho ao lado:
Porém, um botão assim não serve para nada, para começar a criar buttons mais
úteis em seus sites, é necessário usar o atributo value, pois o que fornecermos de
valor para este atributo, é o nome que vai aparecer no botão. E para deixar nosso
código pronto para ser usado com um script de programação, vamos dar também
um nome para nosso botão, através do atributo name.
Assim, o código HTML mais completo e correto do nosso botão fica:
<input type="button" name="botao-ok" value="Ok">
E o resultado é um botão OK
Como criar um menu drop down em formulários
HTML: <select> e <option>
Para criar um menu do tipo drop down nos formulários de seu site, vamos fazer uso da
tag <select>, pois esse menu é do tipo seleção, já que devemos escolher apenas um campo,
que ficará em evidência.
A sintaxe básica para criar este menu é:
<select>
<option>Opção
<option>Opção
<option>Opção
<option>Opção
</select>
1</option>
2</option>
3</option>
4</option>
Ou seja, a tag <select> é que define o escopo do menu.
E para cada opção deste que menu que queiramos adicionar, temos que inserir uma
tag <option>.
O resultado do código apresentado é:
Os atributos name e value
Mas como dissemos, essa é a sintaxe básica, só para você fazer um teste rápido e criar seu
menu drop down. Para criar um site bom, bem feito e robusto, temos que usar alguns
atributos já conhecidos nossos: name e value.
É importante que usemos o atributo name para dar nome ao nosso menu.
Ou seja, usamos esse atributo dentro da tag <select>, para definir um nome a este drop
down.
Isto é extremamente importante pois é isso que vai identificar o menu no formulário, e se
tiver outro menu deste tipo, aí que é obrigatório mesmo dar o nome.
Já o nome que demos na tag <option> serve para o seu leitor ver o que está escrito.
Porém, para o programador que vai receber os dados do formulário o que vai importar de
verdade é o que tem no atributo value, que fica dentro de cada tag <option>.
Por exemplo, suponha que você fez um site para uma empresa e no formulário vai perguntar
que dia do mês quer que o funcionário receba o pagamento, o código HTML será:
<select name="diaDePagamento">
<option value="1">1</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
E o resultado será:
Que dia do mês deseja receber seu pagamento?
Note que para o usuário não vai fazer diferença alguma, pois ele não vê nem sabe o que
são os atributos name e value. Mas quando ele clicar para enviar o formulário para o
site, o script responsável por receber as informações vai saber certinho o nome do
formulário "diaDePagamento" e vai saber o valor, o número do dia do mês que foi
escolhido.
É importante você adquirir o costume de usar esses atributos agora, enquanto aprende
HTML, pois isso é essencial em seus estudos de PHP e JavaScript, no futuro.
Agrupando opções: a tag <optgroup> e o atributo label
Uma outra possibilidade que o HTML nos fornece para trabalhar com menus do
tipo drop down em formulários, é agrupar algumas opções juntas.
Para isso, temos que usar uma tag chamada <optgroup>, dentro da tag <select>.
Esta tag optgroup tem um atributo especial chamado label (rótulo ou etiqueta, em
inglês), que vai nos permitir criar subgrupos dentro do menu, e o nome desses grupos
internos é definido no atributo label.
A sintaxe para agrupar elementos em um menu drop down é:
<select name="nomeMenu">
<optgroup label="Grupo 1">
<option value="valor1">Opção 1</option>
<option value="valor2">Opção 2</option>
<option value="valor3">Opção 3</option>
</optgroup>
<optgroup label="Grupo 2">
<option value="valor1">Opção 1</option>
<option value="valor2">Opção 2</option>
</optgroup>
</select>
O resultado do código é seguinte menu:
O atributo size: o tamanho visível do menu - Caixa de Lista
Por padrão, ao usar o menu do tipo dropdown, ele exibe apenas uma opção visível.
No exemplo passado, sem clicar no menu vemos apenas "Opção 1".
Assim, existe um atributo da tag <select> que permite você quantas opções (<option>)
você dezena que seja exibida, ou seja, quantas linhas do menu, é o atributo size, que recebe
um número inteiro como valor.
No exemplo passado, há 5 linhas com as opções e mais 2 linhas com os nomes dos grupo,
totalizando um total de 7 linhas no menu.
Vamos colocar o atributo size de modo que exiba todas as 7 linhas do menu.
Nosso código HTML se torna:
<select name="nomeMenu" size="7">
<optgroup label="Grupo 1">
<option value="valor1">Opção 1</option>
<option value="valor2">Opção 2</option>
<option value="valor3">Opção 3</option>
</optgroup>
<optgroup label="Grupo 2">
<option value="valor1">Opção 1</option>
<option value="valor2">Opção 2</option>
</optgroup>
</select>
E o resultado é o seguinte menu:
Opção 1
Opção 2
Opção 3
Opção 1
Opção 2
Caso você escolha um número menor de linhas para serem exibidas, o HTML cria
automaticamente uma barra de rolagem, vamos colocar size="5", veja o que acontece:
Opção 1
Opção 2
Opção 3
Opção 1
Opção 2
Podemos dizer que este tipo de menu é uma Caixa de Lista.
O atributo multiple: Escolhendo mais de uma opção no
menu drop down
Tente marcar mais de uma opção no menu do código passado.
Segure control e vá marcando mais de uma opção.
É, não dá.
Mas e se você quiser que seja possível que o leitor selecione mais de uma opção, como no
caso das checkbox ?
Para variar, fazer isso é algo bem simples, basta usar o atributo multiple, da tag <select>.
O valor que este deve receber é "multiple".
Vamos testar no exemplo passado:
<select name="nomeMenu" size="7" multiple="multiple">
<optgroup label="Grupo 1">
<option value="valor1">Opção 1</option>
<option value="valor2">Opção 2</option>
<option value="valor3">Opção 3</option>
</optgroup>
<optgroup label="Grupo 2">
<option value="valor1">Opção 1</option>
<option value="valor2">Opção 2</option>
</optgroup>
</select>
O resultado é o seguinte:
Opção 1
Opção 2
Opção 3
Opção 1
Opção 2
Experimente segurar control e clicar em mais de uma opção.
Você verá que é possível selecionar diversas opções.
Exercício sobre menus drop down em HTML
Crie um menu que pergunte quais linguagens o usuário deseja aprender.
Divida essas linguagens em dois grupos: para Desktop e para Web.
O leitor de seu site pode optar por assinalar mais de uma opção.
Código HTML:
<select name="linguagens" size="7" multiple="multiple">
<optgroup label="Linguagens para Web">
<option value="html">HTML (linguagem de marcação)</option>
<option value="css">CSS (linguagem de estilo)</option>
<option value="js">JavaScript (linguagem de programação)</option>
<option value="php">PHP (linguagem de programação)</option>
</optgroup>
<optgroup label="Linguagens para Desktop">
<option value="c">C (linguagem de programação)</option>
<option value="cmm">C++ (linguagem de programação)</option>
<option value="java">Java (linguagem de programação)</option>
</optgroup>
</select>
Resultado do código:
HTML (linguagem de marcação)
CSS (linguagem de estilo)
JavaScript (linguagem de programação)
PHP (linguagem de programação)
C (linguagem de programação)
C++ (linguagem de programação)
Java (linguagem de programação)
Botões de Rádio (radio button) - Escolhendo uma
opção
Para que serve um Radio Button
O primeiro tipo de campo que vamos usar para fazer uma escolha, é o radio
button (botão do tipo rádio, ou botão radial), que nada mais é que aquele bolinha
onde clicamos e apenas uma das opções podem ser escolhidas.
Essa é a característica principal deste tipo de campo de um formulário: usamos
os radio buttons quando queremos escolher apenas UMA opção, dentre as várias
listadas.
Ou seja, devemos fazer uma pergunta ou pedir uma informação cuja a resposta
seja única.
Por exemplo, ao pedir o gênero, estamos querendo saber se a pessoa é homem
OU mulher.
Ao perguntar se um cliente tem plano de saúde ou não, a resposta só pode ser
SIM ou NÃO.
A faixa de salário pode ser até mil, entre mil e dois mil reais, entre três e quatro mil,
ou mais de quatro mil. Ou seja, só uma opção pode ser marcada.
Como usar o Radio Button: type="radio"
Para usar este tipo de campo de um formulário, temos que fornecer o valor "radio"
ao atributo type da tag <input>. Também devemos fornecer o atributo nome, de
tal modo que todas as opções, todo o grupo de botões rádio, devem ter o mesmo o
nome.
O que irá mudar entre uma opção e outra é o atributo value.
Assim, a sintaxe para usar os botões radiais é:
<input type="radio" name="nome_do_grupo" value="valor"/>
Valor
E o resultado é o radio button:
Valor
Vamos criar um grupo de botões rádio com as opções "Sim", "Não", "Talvez" e
"Quem Sabe", que respondem a pergunta: "Você deseja trabalhar como
Webmaster?"
O código é:
<input type="radio"
<input type="radio"
<input type="radio"
Talvez<br />
<input type="radio"
sabe
name="webmaster" value="sim"/> Sim<br />
name="webmaster" value="nao"/> Não<br />
name="webmaster" value="talvez"/>
name="webmaster" value="quem_sabe"/> Quem
E o resultado, são os belos radio buttons a seguir:
Você deseja trabalhar como Webmaster?
Sim
Não
Talvez
Quem sabe
Aqui frisamos a importância de terem o mesmo nome, "opções".
Se você selecionar 'sim', por exemplo e enviar seu formulário, o programador que
fez o sistema vai receber o valor 'sim' e sabe que essa resposta foi dada ao grupo
de botões de nome "webmaster".
Então, se tiver escolhido sim, vai abrir um site pra você fazer um curso.
Se tiver escolhido não, o sistema (em PHP, por exemplo) vai te mostrar mais
vantagens em ser um Webmaster, etc.
O importante é notar que o valor é enviado para o site. Então o site sabe sua
resposta (value) de um grupo de botões (name) específico.
Caixas de checagem (checkbox) - Fazendo escolhas
Para que serve uma checkbox
Responda o seguinte formulário:
O que deseja aprender ?
HTML
CSS
JavaScript
PHP
Esses campos são do tipo botão rádio, então dá pra escolher somente uma opção.
Mas você quer escolher mais, quer estudar tudo: HTML, CSS, JavaScript e PHP
também.
E agora?
É aí que entram as caixas de checagem, ou em inglês, checkbox.
São campos de um formulário que permitem que você escolha mais de uma
opção, todas ou até nenhuma.
Como usar uma checkbox: type="checkbox"
Aqui não tem muito segredo, para criar uma caixa de checagem de opções,
fazemos exatamente a mesma coisa do radio buttons, a diferença é que no
atributo type da tag input, nós fornecemos o valor "checkbox".
Por exemplo, o código de um formulário que pergunta o que você deseja aprender
seria:
<input type="checkbox"
/>
<input type="checkbox"
<input type="checkbox"
JavaScript<br />
<input type="checkbox"
name="opcoes" value="html"/> HTML<br
name="opcoes" value="css"/> CSS<br />
name="opcoes" value="javascript"/>
name="opcoes" value="php"/> PHP
E o belo resultado será:
O que você deseja aprender ?
HTML
CSS
JavaScript
PHP
Resumindo:
Para escolher somente uma opção de uma lista de opções, use o Radio Button.
Para escolher quantas opções quiser de uma lista, use o Checkbox.
Tag <input> - Formulário de Caixa de Texto (Text Input
Box)
Vamos começar este tutorial sobre formulário ensinando a criar o tipo mais de
formulário, uma simples caixa de texto, daquela que inserimos nosso login ou
nome, por exemplo.
Existem algumas características que precisamos saber antes de criarmos esse tipo
de formulário em nossos sites em HTML.
Primeiro é que usaremos a tag <input> (input, em inglês, é entrada) para essa
caixa.
Como queremos que esse formulário seja do tipo texto, precisamos dar o
valor "text" ao tributo type.
Já que é possível criar vários formulário, é uma boa prática darmos nome aos
nossos formulários, através do atributo name, que recebe o valor que quisermos (o
nome que escolhermos).
E se você se lembrar bem, existem caixas de texto com diversos tamanhos,
pequenas e grandes, esse tamanho é definido pelo atributosize (tamanho, em
inglês).
Assim, a sintaxe para criarmos um formulário do tipo Caixa de Texto é:
<input type="text" name="NOME_DO_FORMULARIO" size="TAMANHO_DO_FOR
MULARIO">
Por exemplo, vamos criar uma caixa de texto de nome 'Nome' e de tamanho 40
(40 caracteres):
<input type="text" name="Nome" size="40" />
O resultado é:
Exercício com caixas de texto
Crie dois campos "Nome" e "Sobrenome", com suas respectivas caixas de
texto, alinhadas por tabela, como se fossem um formulário real.
Vamos criar uma tabela com duas linhas e duas colunas.
Na primeira linha colocamos "Nome" na primeira coluna e o código da caixa de
texto na segunda coluna. Fazemos o mesmo para a segunda linha, mudando
apenas "Sobrenome".
Nosso código fica:
<table>
<tr>
<td>Nome:</td>
<td><input type="text" name="nome" size="40"> <br /></td>
</tr>
<tr>
<td>Sobrenome:</td>
<td><input type="text" name="sobrenome" size="40"> <br
/></td>
</tr>
</table>
E o belo resultado é:
Nome:
Sobrenome:
Atributo maxlength - Tamanho máximo da caixa de
texto
O atributo size que usamos no exemplo passado serve para definir o tamanho
visível deste tipo de formulário, mas experimente escrever nele.
Pode escrever o tanto que quiser,que vai caber.
Ora, as vezes vamos querer limitar o tanto de caracteres que é possível escrever.
Por exemplo, vamos supor que seja necessário pedir a idade de seu leitor, a idade
dele pode ter um caractere (se for uma criança de até 9 anos), 2 caracteres (o
mais comum) ou 3 (sim, pode haver pessoas com 100 ou mais anos acessando
seu site, vai saber...).
Para isso, usamos o atributo maxlength que serve para dizer o tamanho MÁXIMO
de caracteres que é permitido escrever. Vamos fazer o caso da idade:
<input type="text" name="idade" size="10" maxlength="3">
O resultado será:
Tentem colocar 4 caracteres.
Não dá.
Afinal, você limitou para 3, e você é o webmaster, você que manda :)
Exercício usando o atributo maxlength da tag <input>
Faça um site que exiba duas caixas de texto para pedir o número do CEP da
rua de seu leitor.
Lembrando que o CEP tem no total de 8 caracteres, com um hífen antes dos
3 últimos dígitos.
Primeiros criamos um campo para o leitor de seu site colocar os cinco primeiros
dígitos.
Mostramos um hífen, e em seguida outro formulário, outra caixa de texto, mas
agora com o limite de 3 caracteres.
O código HTML desses formulários é:
CEP: <input type="text" name="cep" size="5" maxlength="5"> <input type="text" name="cep2" size="3" maxlength="3">
E o resultado será:
CEP:
-
Tutorial: Como criar um formulário HTML para um site com
a tag <form>
Vimos que para iniciar um formulário devemos usar a tag <form>, onde
vamos usar dois atributos, o "action" que vai receber a URL do script de
programação que vai tratar os dados do formulário preenchido pelo usuário
e o atributo "method", que se refere a maneira na qual esses dados serão
enviados.
O que devemos saber sobre a tag form é que ela envolve uma série de
campos, que no nosso caso terá a seguinte sintaxe:
<form action="Script_do_Formulario.php"
method="post">
campos do formulário
aqui dentro das tags
</form>
Com a estrutura básica montada e explicada, vamos criar os diferentes
grupos do formulário, que são os campos de dados, campos de endereço e
os campos de login.
Campos de Dados Pessoais
Vamos definir nosso primeiro bloco de fieldset, para colocar os dados
pessoas, como Nome, Sobrenome, RG, CPF e Data de Nascimento.
Este trecho do código começa pelo comentário:
<!-- DADOS PESSOAIS-->
Usamos a tag <legend> para criar uma descrição para cada tipo
de fieldset, que se chamará "Dados Pessoais".
Como são diversos campos, e todos terão labels (legenda
descritiva do campo), usaremos os conceitos de tabelas em
HTML para organizar e alinhas nossos campos.
O que basicamente vamos fazer é colocar o nome do campo em
uma coluna e o campo na coluna ao lado, assim teremos sempre o
nome (label) lado a lado do campo (<input>).
Assim, nesse primeiro grupo de campos, usaremos apenas um
tipo de campo de formulário, o de Caixa de Texto. Apenas
atentamos para o fato de limitar o número de caracteres no RG em
13 números.
Também dividimos os campos de CPF em dois campos
diferentes, para o leitor saber bem que no primeiro campo vão os
9 primeiros dígitos, depois tem um hífen e por fim um campo que
cabe os dois dígitos identificadores.
Como há muita confusão para preencher uma data, colocamos
valores pré-definidos em cada campo, para sinalizar que
queremos data no padrão: dd/mm/aaaa
Campos de Dados do Endereço
Para os dados de endereço, como rua, número, bairro e cidade,
iremos fazer igual como fizemos com os campos de dado pessoal,
usando caixas de texto.
Este trecho do código é iniciado pelo comentário:
<!-- ENDEREÇO -->
A única diferença aqui é o uso de menu através das
tags <selection> e <option>. para criar todas as opções de
estados brasileiros. O código é longo, mas bem simples de
entender.
Aqui é importante frisar o uso dos atributos name, e que cada um
desses campos tenham nomes distintos, para não haver confusão
na hora que enviarmos esses dados para um script no servidor.
Campos de Dados de Login
Essa seção, no código HTML, é identificada pelo comentário:
<!-- DADOS DE LOGIN -->
Para fazer os campos do formulário responsáveis pelo sistema de
login, usamos caixas de texto para pedir o login e o e-mail.
Já para pedir a senha e sua confirmação, usamos o que
aprendemos em caixas de password.
E aqui uma novidade: usamos um campo do tipo file, que
automaticamente cria um botão para que possamos carregar um
arquivo de nosso HD.
Para usar essa ferramenta, basta colocar "file" como o valor do
atributo type da tag <input>:
<input type="file" name="imagem" >
E por fim, criamos dois simples botões.
Um botão de reset (limpar campos) e de submit (enviar).
Código HTML de nosso Tutorial sobre Formulários
<!DOCTYPE html>
<html>
<head>
<title> Como criar um formulário completo em HTML </title>
<meta name="description" content="Aprenda a criar um site completo
que usa formulários em HTML">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1> Bem vindo ao site HTML Progressivo</h1>
<h2> Preencha o formulário abaixo para participar do curso de HTML &
CSS completo, online e grátis</h2><br />
<form action="Script_do_Formulario.php" method="post">
<!-- DADOS PESSOAIS-->
<fieldset>
<legend>Dados Pessoais</legend>
<table cellspacing="10">
<tr>
<td>
<label for="nome">Nome: </label>
</td>
<td align="left">
<input type="text" name="email">
</td>
<td>
<label for="sobrenome">Sobrenome: </label>
</td>
<td align="left">
<input type="text" name="sobrenome">
</td>
</tr>
<tr>
<td>
<label>Nascimento: </label>
</td>
<td align="left">
<input type="text" name="dia" size="2" maxlength="2" value="dd">
<input type="text" name="mes" size="2" maxlength="2" value="mm">
<input type="text" name="ano" size="4" maxlength="4" value="aaaa">
</td>
</tr>
<tr>
<td>
<label for="rg">RG: </label>
</td>
<td align="left">
<input type="text" name="rg" size="13" maxlength="13">
</td>
</tr>
<tr>
<td>
<label>CPF:</label>
</td>
<td align="left">
<input type="text" name="cpf" size="9" maxlength="9"> - <input
type="text" name="cpf2" size="2" maxlength="2">
</td>
</tr>
</table>
</fieldset>
<br />
<!-- ENDEREÇO -->
<fieldset>
<legend>Dados de Endereço</legend>
<table cellspacing="10">
<tr>
<td>
<label for="rua">Rua:</label>
</td>
<td align="left">
<input type="text" name="rua">
</td>
<td>
<label for="numero">Numero:</label>
</td>
<td align="left">
<input type="text" name="numero" size="4">
</td>
</tr>
<tr>
<td>
<label for="bairro">Bairro: </label>
</td>
<td align="left">
<input type="text" name="bairro">
</td>
</tr>
<tr>
<td>
<label for="estado">Estado:</label>
</td>
<td align="left">
<select name="estado">
<option value="ac">Acre</option>
<option value="al">Alagoas</option>
<option value="am">Amazonas</option>
<option value="ap">Amapá</option>
<option value="ba">Bahia</option>
<option value="ce">Ceará</option>
<option value="df">Distrito Federal</option>
<option value="es">Espírito Santo</option>
<option value="go">Goiás</option>
<option value="ma">Maranhão</option>
<option value="mt">Mato Grosso</option>
<option value="ms">Mato Grosso do Sul</option>
<option value="mg">Minas Gerais</option>
<option value="pa">Pará</option>
<option value="pb">Paraíba</option>
<option value="pr">Paraná</option>
<option value="pe">Pernambuco</option>
<option value="pi">Piauí</option>
<option value="rj">Rio de Janeiro</option>
<option value="rn">Rio Grande do Norte</option>
<option value="ro">Rondônia</option>
<option value="rs">Rio Grande do Sul</option>
<option value="rr">Roraima</option>
<option value="sc">Santa Catarina</option>
<option value="se">Sergipe</option>
<option value="sp">São Paulo</option>
<option value="to">Tocantins</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="cidade">Cidade: </label>
</td>
<td align="left">
<input type="text" name="cidade">
</td>
</tr>
<tr>
<td>
<label for="cep">CEP: </label>
</td>
<td align="left">
<input type="text" name="cep" size="5" maxlength="5"> - <input
type="text" name="cep2" size="3" maxlength="3">
</td>
</tr>
</table>
</fieldset>
<br />
<!-- DADOS DE LOGIN -->
<fieldset>
<legend>Dados de login</legend>
<table cellspacing="10">
<tr>
<td>
<label for="email">E-mail: </label>
</td>
<td align="left">
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
<label for="imagem">Imagem de perfil:</label>
</td>
<td>
<input type="file" name="imagem" >
</td>
</tr>
<tr>
<td>
<label for="login">Login de usuário: </label>
</td>
<td align="left">
<input type="text" name="login">
</td>
</tr>
<tr>
<td>
<label for="pass">Senha: </label>
</td>
<td align="left">
<input type="password" name="pass">
</td>
</tr>
<tr>
<td>
<label for="passconfirm">Confirme a senha: </label>
</td>
<td align="left">
<input type="password" name="passconfirm">
</td>
</tr>
</table>
</fieldset>
<br />
<input type="submit">
<input type="reset" value="Limpar">
</form>
</body>
</html>
http://www.htmlprogressivo.net/p/formularios-em-html.html