Basicamente, um formulário básico seria assim:
<form method="post" action="mailto:teste@teste.com">
<p><label for="cNome">Nome: </label><input type="text" name="tNome" id="cNome" size="35" maxlength="120" placeholder="Coloque seu Nome Completo" required autofocus/></p>
<p><label for="cMail">E-mail: </label><input type="email" name="tMail" id="cMail" size="35" maxlength="75" placeholder="Coloque um E-mail Válido" required/></p>
<p><label for="cIdad">Idade: </label><input type="number" name="tIdad" id="cIdad" min="0" max="116" step="1" value="0"/></p>
<p>
Sexo:
<input type="radio" name="tSex" id="cMasc" value="M" checked/><label for="cMasc">Masculino</label>
<input type="radio" name="tSex" id="cFem" value="F"/><label for="cFem">Feminino</label>
</p>
<p>
<label for="cNac">Nacionalidade:</label>
<select name="tNac" id="cNac">
<option selected>Brasileiro Nato</option>
<option>Brasileiro Naturalizado</option>
<option>Estrangeiro</option>
</select>
</p>
<p>
<label for="cMsg">Sua mensagem:</label><br/>
<textarea name="tMsg" id="cMsg" cols="40" rows="7" maxlength="1000" placeholder="Até 1000 caracteres" required></textarea>
</p>
<p>
<input type="submit" value="Enviar"/>
<input type="reset" value="Limpar"/>
</p>
</form>
Com esses significados:
<form></form> - Define um formulário, onde method é o tipo de envio (GET e POST) e action para onde os dados serão enviados.
<label></label> - Define um label para respectivo elemento.
<input/> - Define uma caixa de entrada, de vários tipos, além de botões.
<select></select> - Define uma lista de conteúdos.
<option></option> - Define um conteúdo de uma lista de um select ou datalist.
<textarea></textarea> - Define uma área de texto.
O método GET envia via URL, e o POST via pacotes. Para coisas mais rápidas, como algum cálculo, use o GET. Para coisas mais seguras, como dados e senhas, use o POST.
O GET tem limitação de 3000 bytes, e não deve usar para dados como arquivos, além de dados sensíveis como senhas e números de cartões. O POST é um pouco mais seguro por enviar via pacotes, mas podemos verificar os dados pelo navegador, indo em inspecionar e em rede. Também é possível usar um sniffer de dados. Para proteger isso, precisaremos usar HTTPS.
Os tipos a serem definidos no input, basicamente são esses, apesar de existirem outros:
| Tipo | Definição |
|---|---|
| text | Campo de Texto |
| password | Campo de Senha |
| Campo de E-mail | |
| number | Campo Numérico |
| radio | Botão de Rádio |
| checkbox | Caixa de Seleção |
| range | Controle Deslizante |
| button | Botão Comum |
| submit | Botão para Envio |
| reset | Botão de Limpeza |
| date | Caixa de Calendário |
| color | Caixa de Cor |
| time | Caixa de Horário |
| file | Campo pra Upar Arquivos |
PS: O input do tipo file só funciona com o método post.
Botões de rádio de um mesmo grupo deve ter o mesmo name, mas ids diferentes.
Se quiser colocar um parâmetro para números decimais em input com number ou range, você pode colocar números decimais como 0.5 no step. Esses dois tipos de input são numéricos e tem parâmetros como min, max, além do citado step. Já os tipos de input com textos (como text, password e email), tem os parâmetros maxlength e minlength. Alguns parâmetros comuns em ambos são o size e o value.
O atributo value não é obrigatório em tags option (dentro de tags select), é recomendável usar isso caso você não queira que vá o nome exato que está escrito entre as tags (por exemplo, pra estados, que se usa a abreviação), e sim o valor do parâmetro.
Tags optgroup precisam ter o atributo label para definir o texto a ser escrito. Elas são colocadas dentro dos select, e os option vão dentro das optgroup, por exemplo:
<select name="tEst" id="cEst">
<optgroup label="Região Sudeste">
<option value="RJ">Rio de Janeiro</option>
<option value="SP" selected>São Paulo</option>
</optgroup>
<optgroup label="Região Sul">
<option value="PR">Paraná</option>
<option value="SC">Santa Catarina</option>
</optgroup>
</select>
Para usar valores em datalist, coloque a id, e use as tags option normalmente, apenas com os valores com o atributo value. E para que a list apareça no input desejado, coloque o atributo list com o nome da id, dessa forma:
<p><label for="cCid">Cidade: </label><input type="text" name="tCid" id="cCid" size="20" maxlength="40" list="cidades" required/></p>
<datalist id="cidades">
<option>Rio de Janeiro</option>
<option>Nova Iguaçu</option>
<option>Niterói</option>
</datalist>
Para deixar um texto ou número predefinido, use o atributo value com o texto ou número desejado dentro.
No caso de formulários de cores, podemos predefinir a cor, usando valores hexadecimais dentro do atributo value, dessa forma:
<input type="color" value="#0000FF"/>
Para deixar um input como "apenas leitura" (como em alguns casos como o de somas), use o parâmetro readonly. Para fazer algo ser obrigatório use required. Para definir o primeiro algo a ser digitado use o autofocus.
Para retirar o autocomplete (aquela listinha que aparece do que foi digitado), coloque na tag do formulário autocomplete="off".
O input, além do submit, pode ter um botão personalizado, com o type image e o src como o caminho da imagem.
Ao colocar um input para soma, não esqueca de indicar na tag form o evento oninput e o nome da função, dessa forma:
<form method="post" action="processo.php" oninput="calculo()">
Quantidade: <input type="number" name="tQtd" id="cQtd" min="0" max="5" value="0"/>
<input type="text" name="tTot" id="cTot" placeholder="Total a Pagar" value="0" readonly/>
</form>
PS: O readonly torna um campo somente-leitura.
Esse seria um código de Javascript para o cálculo acima:
function calculo() {
let qtd = parseInt(document.getElementById("cQtd").value);
let tot = qtd * 1500;
document.getElementById("cTot").value = tot;
}
Podemos resolver o mesmo formulário com a tag output, assim:
<form method="post" action="processo.php" oninput="calculo()">
Quantidade: <input type="number" name="tQtd" id="cQtd" min="0" max="5" value="0"/>
<output name="tTot" id="cTot">Total a Pagar</output>
</form>
PS: Podemos agrupar elementos de um formulário com as tags fieldset, e nesse mesmo grupo podemos colocar uma legenda com as tags legend, dessa forma:
<fieldset>
<legend>Legenda do Fieldset</legend>
<!-- Aqui colocamos os demais elementos do formulário, ou parte dos elementos -->
</fieldset>
E podemos colocar um estilo também, como por exemplo:
fieldset {
border-color: #888888;
margin: 15pt auto;
width: 600px;
}
legend {
color: #888888;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 12pt;
}
Veja outro exemplo de tela de login:
<form method="post" action="entrar.html">
<span class="material-icons">person</span><input type="text" maxlength="75" required autocomplete="email"/>
<br/>
<span class="material-icons">vpn_key</span><input type="password" minlength="8" maxlength="15" required autocomplete="current-password"/>
<br/>
<a href="esqueci.html" class="botao">Esqueci a Senha <span class="material-icons">mail</span></a>
<input type="submit" value="Enviar"/>
</form>
Estilo CSS:
form > input[type=submit] {
display: block;
font-size: 1em;
width: 100%;
height: 40px;
padding-top: 5px;
margin-top: 5px;
background-color: #49a09d;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
form > input[type=submit]:hover {
background-color: #2d6462;
}
form > a.botao {
display: block;
text-align: center;
font-size: 1em;
width: 100%;
height: 40px;
padding-top: 5px;
margin-top: 5px;
background-color: white;
border: 1px solid #49a09d;
border-radius: 5px;
text-decoration: none;
}
form > a.botao:hover {
background-color: #6cd3cf;
}
form > a.botao > span {
font-size: 0.8em;
}