Os formulários são definidos pelo elemento form. Todos os elementos dentro do form pertencem ao formulário correspondente.
<form> … </form>
No elemento <form> inicial espera-se o atributo action. Através dele, você indica o que deve ser feito com os dados do formulário. Normalmente, trata-se de uma aplicação PHP.
<form method="post" action="form.php"> … </form>
Verifiquem se o arquivo indicado pode ser encontrado de fato. Vocês devem definir o caminho correto.
Em vez de um script, também é possível fornecer um endereço de e-mail.
<form method="post" action=mailto:contato@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Neste caso, os dados do formulário são enviados por e-mail. No entanto, isso não é elegante, por isso quase sempre recorre-se à variante do script. Mas se você não tem um script disponível, pode enviar o formulário por e-mail, se necessário.
Outro atributo importante para o elemento form é method. Através dele, você determina o método de transmissão HTTP para o envio do conteúdo do formulário. Existem duas variantes disponíveis.
• post = Os dados do formulário são enviados em dois passos para o endereço indicado. Primeiro, o navegador entra em contato com o endereço indicado. Se for bem-sucedido, os dados do formulário são passados para o script.
• get = Neste método, os dados do formulário são acrescentados ao final do URL atribuído ao atributo action. Assim, os dados do formulário também são visíveis na barra de endereços do navegador.
A questão que se coloca é qual dessas variantes usar para o envio dos dados do formulário. Em princípio, você pode usar ambas. No entanto, especialmente quando se trata de grandes quantidades de dados e upload de arquivos para o servidor, é recomendável usar post.
Campos de formulário simples
Até agora, apenas a estrutura externa do formulário foi definida. No entanto, no navegador ainda não é possível ver o formulário propriamente dito.
<form method="post" action="form.php"> … </form>
Agora é hora de preencher o formulário com conteúdo/vida.
O tipo de campo mais frequentemente necessário é um campo de entrada de uma linha. Eles são usados, por exemplo, para solicitar nomes, sobrenomes e endereços de e-mail. Os campos de entrada de uma linha são definidos da seguinte maneira:
<input type="text" name="nome" />
Ao elemento input é atribuída a combinação de atributo-valor type="text". Além disso, é aconselhável dar a cada campo de entrada um identificador interno. Este identificador deve ser único no documento. Ele é especialmente interessante quando se trata de processar os dados do formulário usando um script. Evite caracteres de espaço e especiais no identificador.
Ao visualizar o resultado no navegador, teremos a seguinte imagem:
O resultado ainda não é muito espetacular. No entanto, ao clicar dentro do campo de texto, você verá que já pode inserir informações.
Para que os visitantes saibam o que devem digitar no campo, ainda falta um rótulo.
Nome: <input type="text" name="nome" />
Novamente, ao visualizar no navegador, teremos o resultado desejado.
Através do atributo size, você pode determinar a largura do campo.
Nome: <input type="text" name="nome" size="30" /> <br /> CEP: <input type="text" name="cep" size="5" />
O atributo size determina a largura desejada do campo.
O valor 5 corresponde exatamente a cinco caracteres. Nesse contexto, o atributo maxlength também é interessante. Através dele, você especifica o número máximo de caracteres permitidos no campo. Um exemplo em relação a isso:
Nome: <input type="text" name="nome" size="30" maxlength="40" />
Se o valor especificado em maxlength for maior que o de size, em entradas mais longas o campo fará scroll automaticamente.
Através do atributo value, é possível pré-preencher um campo.
Nome: <input type="text" name="nome" value="Seu Nome" />
O valor atribuído ao value é visto como preenchimento inicial no campo.
Os usuários podem excluir esse valor predefinido.
É possível impedir que valores sejam apagados dos campos. Para isso, define-se um campo de entrada que na verdade não é mais um campo de entrada. Na prática, esses campos geralmente são usados para saída. Isso pode ser interessante, por exemplo, para exibir valores determinados por script. Pense, por exemplo, em uma calculadora. Também é possível pré-preencher um campo manualmente com um texto que os visitantes não podem mais alterar. (Nota: O símbolo do Euro não é exibido corretamente na visualização em PDF).
<input name="preco" type="text" value="€ 699.-" readonly />
Para definir um campo como somente leitura, atribui-se a ele o atributo readonly. Novamente, veja o resultado:
O texto predefinido é exibido diretamente. No entanto, não é possível excluir esse valor.
Definindo campos de senha
Você certamente conhece campos de senha. Em todos os lugares onde você se registra, precisa fornecer uma senha. (Normalmente, é preciso digitá-la duas vezes).
Os dados inseridos no campo de entrada não são visíveis, mas são automaticamente substituídos por asteriscos/pontos pelo navegador. A vantagem desta abordagem é que as pessoas que podem estar olhando por cima do seu ombro não podem decifrar a senha. No entanto, é um equívoco pensar que campos de senha são automaticamente seguros. Na verdade, as senhas são transmitidas em texto simples durante o envio do formulário no HTTP normal.
Os campos de senha são definidos da seguinte maneira:
<input type="password" name="senha" />
O atributo type recebe o valor password. Novamente, veja o resultado disso.
Se você digitar algo lá, os navegadores o tornarão invisível imediatamente durante a entrada.
