HTML

Formulários HTML.

Os formulários HTML (forma de mantermos contato com o utilizador) são definidos pelas etiquetas <form></form>, é entre estas etiquetas que colocamos todos os campos e botões do formulário.

Alguns atributos:

action, define o tipo de ação a realizar com o formulário, neste caso o formulário é enviado a um endereço de correio eletrônico.
O conteúdo do formulário é enviado ao endereço de correio eletrônico através da linha de código:

<form action="mailto:endereço de correio eletrónico">.

method="post / get", define de que forma o formulário é enviado.
O mais prático é usar post (envio dos dados armazenados no corpo do pedido).
enctype, define a forma na qual será enviado o conteúdo do formulário. O valor mais utilizado é "text/plain", que envia o conteúdo do formulário como texto.

Exemplo:

<form action="mailto:endereço de correio eletrónico" method="post" enctype="text/plain">aqui colocamos todas as etiquetas que vão dar forma ao nosso formulário</form>

<input ?>, define a caixa de texto.
type, define o tipo de controle a ser exibido, o tipo padrão é text.
name, define o nome da caixa de texto de forma a podermos identifica-la na receção do correio eletrónico.

Exemplo:

<input type="text" name="nome">

Além destes atributos, essenciais, existem outros atributos bastante uteis, mas que não são imprescindíveis.

Size, define o tamanho da caixa de texto, em número de caracteres.
maxlength, define o limite máximo de carateres que podem ser usados na caixa de texto.
value, atribui um valor definido ao campo em texto, o objetivo é ajudar o usuário a preencher mais rapidamente o formulário (dá uma ideia sobre o que escrever).

Exemplo:

<input type="text" name="nome do campo" value="texto que aparece como exemplo no campo de texto">

Nunca podemos esquecer que é imprescindível a etiqueta <form>.
Veremos mais a frente que este atributo pode fazer a diferença em algumas situações.
Texto oculto, substitui-se o atributo type="text" por type="password", e ao escrever dentro do campo no lugar de texto serão vistos asteriscos.

Exemplo:

<input type="password" name="nome">

<textarea></textarea>, define um campo de texto que permite ao utilizador escrever livremente.
name, assim como em imput, define o nome da caixa de texto de forma a podermos identifica-la na receção do correio eletrónico.

Podemos definir as dimensões do campo a partir dos seguintes atributos:

rows, define o número de linhas do campo de texto.
cols, define o número de colunas do campo de texto.

Exemplo:

<textarea name="comentário" rows="10" cols="40"></textarea>

É possível definir o conteúdo do campo, não vamos usar o atributo value mas sim, escrever dentro da etiqueta o conteúdo que queremos visível.

Exemplo:

<textarea name="comentário" rows="10" cols="40">texto que queremos visível como exemplo dentro do campo de texto</textarea>

Outros elementos de formulários:

<select></select>, define Listas de opções, listas de opções são menus desdobráveis que nos permite escolher uma ou várias das múltiplas opções disponíveis.
Dentro desta etiqueta podemos definir o nome por meio do atributo name.
Cada opção será incluída numa linha seguida da etiqueta <option>.

Exemplo:

<select name="cores">
<option>Branco</option>
<option>Azul</option>
<option>Amarelo</option>
<option>Vermelho</option>
</select>

size, Define o tamanho da lista.
O resto pode ser visto por meio da barra de deslocamento.

Exemplo:

<select name="cores" size="3">

multiple, Permite a seleção de vários elementos da lista.
Não é aconselhável usar.

Exemplo:

<select name="cores" size="3" multiple>

Voltando a <option> temos:

selected, Permite-nos pré-selecionar uma das opções.

Exemplo:

<option selected>Branco</option>

value, Define o valor da opção que será enviada ao correio eletrônico se o usuário escolher essa opção.

Exemplo:

<option value="1">Azul</option>

No correio eletrônico receberíamos a informação, Azul=1.

Botões de radio, servem para obrigar o utilizador a escolher uma das opções fornecidas.
A etiqueta para este efeito é <input>, com o atributo <type>.
Esta etiqueta só coloca o campo para clicar, a formatação do texto e respetivas quebras de linha tem de ser colocadas no corpo da página.

Exemplo:

<input type="radio" name="cores" value="1">Branco
<br>
<input type="radio" name="cores" value ="2">Azul
<br>
<input type="radio" name="cores" value ="3">Amarelo
<br>
<input type="radio" name="cores" value ="4">Vermelho

Verificamos que a cada opção atribuímos uma etiqueta <input> onde demos o mesmo nome em <name> para todas as opções e um valor diferente em <value>.
No correio eletrônico receberíamos a informação por exemplo, cores=4, caso de o utilizador escolhesse a opção “Vermelho”.

checked, Permite-nos pré-selecionar uma das opções.

Exemplo:

<input type="radio" name="cores" value="2" checked>

Verão Caixas de validação que permitem ao utilizador através de um clique ativar ou desativar a opção escolhida.

Exemplo:

<input type="checkbox" name="cores"> Adoro a cor Azul.

No correio eletrônico receberíamos a informação, cores=on, (ou off caso estivesse ativada ou não).

Botão submit, permite a criação de um botão onde podemos dar a oportunidade ao usuário de apagar ou enviar os dados do formulário.
Botão de envio, permite ao utilizador finalizar o preenchimento do formulário e fazê-lo chegar até nós.

Exemplo:

<input type="submit" value="Enviar">

Botão de apagar campos do formulário, permite ao utilizador apagar o formulário por completo caso o utilizador deseje refaze-lo.

Exemplo:

<input type="reset" value="Reset">

Botões normais, este tipo de botões por si só não tem utilidade, mas podemos precisar deles para realizar ações no futuro.

Exemplo:

<input type=botton value="Texto escrito no botão">

O uso mais frequente de um botão é por exemplo na programação utilizando javascript, onde podemos determinar o que acontece quando o utilizador clica no botão.

Exemplo de um formulário completo:

<form action="mailto:endereço de coreio eletrónico de destino" method="post" enctype="text/plain">
Nome
<input type="text" name="nome" size="21" maxlength="150">
<br>
E-mail
<input type="text" name="email" size="20" maxlength="150" value="@">
<br>
Cidade
<input type="text" name="cidade" size="20" maxlength="100">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Masculino" checked> Homem
<br>
<input type="radio" name="sexo" value="Feminino"> Mulher
<br>
Cor de preferência
<br>
<select name="cor">
<option value="1">Branco
<option value="2">Azul
<option value="3">Amarelo
<option value="4">Vermelho
</select>
<br>
Comentário
<br>
<textarea cols="30" rows="5" name ="comentario"></textarea>
<br>
<input type="checkbox" name="receber_info" checked>
Desejo receber informação das novidades.
<br>
<input type="submit" value="Enviar">
<br>
<input type="Reset" value="Limpar todos os campos">
</form>


0|1|2|3|4|5|6|7|8|9|10|11|12|13|14