Formulário em HTML
Lucas Henrique Pereira
você vai aprender
Para que serve um formulário
Elementos de um formulário
pré-requisitos
Noções básicas em HTML
para que serve um formulário
Os formulários são utilizados para permitir a entrada de dados por parte do usuário, sendo considerado uma das formas de maior interação entre o usuário e o website.
Por exemplo, caso o usuário queira enviar uma mensagem de contato pelo próprio site, basta criarmos um formulário de contato para que ele digite sua mensagem e demais informações e nos envie para que possamos responder e interagir com ele.
O formulário é definido pela tag <form>. Essa tag indica o começo de um formulário e tudo que estiver dentro dela será compreendido como elementos de formulário.
label
O <label> é a tag rótulo do campo. Com ele sinalizamos ao usuário o que gostaríamos que ele informasse no campo. Sua sintaxe é muito simples:
<label>Descrição do campo</label>
input
A tag <input> permite construir campos de texto, campos para seleção e até mesmo botões de ação para a inserção de informações pelos usuários. Para definirmos qual o tipo do campo que queremos, precisamos informar o atributo (type). Com esse atributo do input, informamos ao HTML qual o tipo de campo vai ser construído.
<input type="text">
<input type="checkbox">
<input type="radio">tipos mais utilizados de input
| Atributo | Descrição |
| text | Inserção de texto |
| checkbox | Caixa de seleção. Muito utilizado para que o usuário possa selecionar mais de uma opção |
| radio | Campo radial de opção. Muito utilizado para restringir o usuário a somente uma seleção de opção. |
| password | Campo para inserção de senhas. Idêntico ao “text”, mas os dados informados são apresentados são omitidos por uma série de asterísticos (*). |
| Campo para inserção de email. | |
| submit | Cria um botão que é utilizado para enviar as informações do formulário. Necessita do atributo “value” para definir o nome do botão. |
| button | Cria um simples botão. Necessita do atributo “value” para definir o nome do botão. |
| reset | Cria um botão, que ao ser clicado, elimina todos os dados informados nos campos do formulário. Necessita do atributo “value” para definir o nome do botão. |
| file | Cria campo para seleção de arquivos. |
Além dos (inputs) nós temos outros elementos de formulário para seleção e inserção de texto.
select
O select é um menu suspenso que permite a seleção de um ou mais itens. Muito utilizado para seleção itens, como localidade, gênero, quantidade e etc.
<select>
<option>Opção 1</option>
<option>Opção 2</option>
<option>Opção 3</option>
</select>Este elemento possui alguns atributos importantes: multiple e size.
- multiple: Defini que o campo será de seleção múltipla;
- size: Defini quantos itens serão apresentados inicialmente. Por default o campo já vem com 4 itens a amostra.
textarea
O textarea é utilizado para a inserção de um texto grande, normalmente com múltiplas linhas. Muito utilizado, por exemplo, para a inserção de comentários e descrições.
<textarea></textarea>
Obs: este elemento possui tanto a tag inicial quanto a de fechamento, diferente da tag input, que somente necessita da tag de abertura.
Possui ainda alguns atributos importantes: rows e cols.
- rows: Defini a quantidade de linhas que o textarea terá como default;
- cols: Defini a quantidade de colunas que o textarea terá como default;
<textarea rows="5" cols="100"></textarea>exemplo completo de um formulário
<form>
<p>
<label>Nome:</label><br>
<input type="text" name="nome" required>
</p>
<p>
<label>Email:</label><br>
<input type="email" name="email" required>
</p>
<p>
<label>Assunto:</label><br>
<input type="text" name="assunto">
</p>
<p>
<label>Mensagem:</label><br>
<textarea name="mensagem" cols="100" rows="8"></textarea>
</p>
<p><input type="checkbox"> Aceita receber nossas novidades</p>
<p><input type="submit" value="Enviar"></p>
</form>
Comentários