HTML - Formulários
Formulários HTML são necessários quando você deseja coletar alguns dados do visitante do site. Por exemplo, durante o registro do usuário, você gostaria de coletar informações como nome, endereço de e-mail, cartão de crédito, etc.
Um formulário receberá a entrada do visitante do site e, em seguida, postará em um aplicativo de back-end, como CGI, ASP Script ou script de PHP, etc. a aplicação.
Existem vários elementos de formulário disponíveis, como campos de texto, campos de área de texto, menus suspensos, botões de opção, caixas de seleção, etc.
O HTML <form> tag é usada para criar um formulário HTML e tem a seguinte sintaxe -
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Atributos de formulário
Além dos atributos comuns, a seguir está uma lista dos atributos de formulário usados com mais frequência -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | action Script de back-end pronto para processar seus dados transmitidos. |
| 2 | method Método a ser usado para fazer upload de dados. Os métodos mais usados são os métodos GET e POST. |
| 3 | target Especifique a janela ou quadro de destino onde o resultado do script será exibido. Aceita valores como _blank, _self, _parent etc. |
| 4 | enctype Você pode usar o atributo enctype para especificar como o navegador codifica os dados antes de enviá-los ao servidor. Os valores possíveis são - application/x-www-form-urlencoded - Este é o método padrão que a maioria dos formulários usa em cenários simples. mutlipart/form-data - É usado quando você deseja fazer upload de dados binários na forma de arquivos como imagem, arquivo de texto, etc. |
Note- Você pode consultar Perl e CGI para obter detalhes sobre como funciona o upload de dados de formulário.
Controles de formulário HTML
Existem diferentes tipos de controles de formulário que você pode usar para coletar dados usando formulário HTML -
- Controles de entrada de texto
- Controles de caixas de seleção
- Controles da caixa de rádio
- Selecione os controles da caixa
- Caixas de seleção de arquivo
- Controles ocultos
- Botões clicáveis
- Botão Enviar e Redefinir
Controles de entrada de texto
Existem três tipos de entrada de texto usados em formulários -
Single-line text input controls- Este controle é usado para itens que requerem apenas uma linha de entrada do usuário, como caixas de pesquisa ou nomes. Eles são criados usando HTML<input> tag.
Password input controls- Esta também é uma entrada de texto de uma linha, mas mascara o caractere assim que o usuário o insere. Eles também são criados usando a tag HTMl <input>.
Multi-line text input controls- É usado quando o usuário deve fornecer detalhes que podem ser mais longos do que uma única frase. Os controles de entrada de várias linhas são criados usando HTML<textarea> tag.
Controles de entrada de texto de linha única
Este controle é usado para itens que requerem apenas uma linha de entrada do usuário, como caixas de pesquisa ou nomes. Eles são criados usando a tag HTML <input>.
Exemplo
Aqui está um exemplo básico de entrada de texto de uma linha usada para usar o nome e o sobrenome -
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos da tag <input> para a criação de campo de texto.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de texto será definido como text. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value Isso pode ser usado para fornecer um valor inicial dentro do controle. |
| 4 | size Permite especificar a largura do controle de entrada de texto em termos de caracteres. |
| 5 | maxlength Permite especificar o número máximo de caracteres que um usuário pode inserir na caixa de texto. |
Controles de entrada de senha
Essa também é uma entrada de texto de uma linha, mas mascara o caractere assim que o usuário o insere. Eles também são criados usando a tag HTML <input>, mas o atributo de tipo é definido comopassword.
Exemplo
Aqui está um exemplo básico de uma entrada de senha de linha única usada para obter a senha do usuário -
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos da tag <input> para criar o campo de senha.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de senha será definido como password. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value Isso pode ser usado para fornecer um valor inicial dentro do controle. |
| 4 | size Permite especificar a largura do controle de entrada de texto em termos de caracteres. |
| 5 | maxlength Permite especificar o número máximo de caracteres que um usuário pode inserir na caixa de texto. |
Controles de entrada de texto de várias linhas
Isso é usado quando o usuário é solicitado a fornecer detalhes que podem ser mais longos do que uma única frase. Os controles de entrada de várias linhas são criados usando a tag HTML <textarea>.
Exemplo
Aqui está um exemplo básico de uma entrada de texto de várias linhas usada para obter a descrição do item -
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos para a tag <textarea>.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 2 | rows Indica o número de linhas da caixa da área de texto. |
| 3 | cols Indica o número de colunas da caixa da área de texto |
Controle de caixa de seleção
As caixas de seleção são usadas quando mais de uma opção deve ser selecionada. Eles também são criados usando a tag HTML <input>, mas o atributo type é definido comocheckbox..
Exemplo
Aqui está um exemplo de código HTML para um formulário com duas caixas de seleção -
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos para a tag <checkbox>.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de caixa de seleção será definido como checkbox.. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value O valor que será usado se a caixa de seleção estiver marcada. |
| 4 | checked Defina como marcado se quiser selecioná-lo por padrão. |
Controle de botão de rádio
Os botões de rádio são usados quando não há muitas opções, apenas uma opção deve ser selecionada. Eles também são criados usando a tag HTML <input>, mas o atributo type é definido comoradio.
Exemplo
Aqui está um exemplo de código HTML para um formulário com dois botões de opção -
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos para o botão de rádio.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de caixa de seleção será definido como rádio. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value O valor que será usado se a caixa de rádio for selecionada. |
| 4 | checked Defina como marcado se quiser selecioná-lo por padrão. |
Selecionar caixa de controle
Uma caixa de seleção, também chamada de caixa suspensa, que oferece a opção de listar várias opções na forma de lista suspensa, a partir da qual um usuário pode selecionar uma ou mais opções.
Exemplo
Aqui está um exemplo de código HTML para um formulário com uma caixa suspensa
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos importantes da tag <select> -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 2 | size Isso pode ser usado para apresentar uma caixa de lista de rolagem. |
| 3 | multiple Se definido como "múltiplo", então permite que um usuário selecione vários itens do menu. |
A seguir está a lista de atributos importantes da tag <option> -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | value O valor que será usado se uma opção na caixa de seleção for selecionada. |
| 2 | selected Especifica que esta opção deve ser o valor selecionado inicialmente quando a página carrega. |
| 3 | label Uma forma alternativa de opções de rotulagem |
Caixa de upload de arquivo
Se você quiser permitir que um usuário carregue um arquivo em seu site, você precisará usar uma caixa de upload de arquivo, também conhecida como caixa de seleção de arquivo. Isso também é criado usando o elemento <input>, mas o atributo type é definido comofile.
Exemplo
Aqui está um exemplo de código HTML para um formulário com uma caixa de upload de arquivo -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos importantes da caixa de upload de arquivo -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 2 | accept Especifica os tipos de arquivos que o servidor aceita. |
Controles de botão
Existem várias maneiras em HTML de criar botões clicáveis. Você também pode criar um botão clicável usando a tag <input> definindo seu atributo type comobutton. O atributo type pode assumir os seguintes valores -
| Sr. Não | Tipo e descrição |
|---|---|
| 1 | submit Isso cria um botão que envia automaticamente um formulário. |
| 2 | reset Isso cria um botão que redefine automaticamente os controles do formulário para seus valores iniciais. |
| 3 | button Isso cria um botão que é usado para acionar um script do lado do cliente quando o usuário clica nesse botão. |
| 4 | image Isso cria um botão clicável, mas podemos usar uma imagem como plano de fundo do botão. |
Exemplo
Aqui está um exemplo de código HTML para um formulário com três tipos de botões -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Controles de formulários ocultos
Os controles de formulário ocultos são usados para ocultar dados dentro da página que mais tarde podem ser enviados para o servidor. Esse controle fica oculto dentro do código e não aparece na página real. Por exemplo, o seguinte formulário oculto está sendo usado para manter o número da página atual. Quando um usuário clicar na próxima página, o valor do controle oculto será enviado ao servidor da web e lá ele decidirá qual página será exibida a seguir com base na página atual passada.
Exemplo
Aqui está um exemplo de código HTML para mostrar o uso de controle oculto -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Isso produzirá o seguinte resultado -