Olá, boa noite!
Hoje é quarta-feira, 22 de November de 2017

Fórum - Tutoriais Informática


Categoria: HTML

Programação Web com HTML

HTMLFormulários HTML
Autor: Sérgio Moreira
Administrador
Criado em: 01-10-2016 17:48
55 visualizações

Um formulário é delimitado pelos marcadores <form> e </form>:

<form name=“NOME” action=“script” method=“método_envio” enctype=“tipo”>
Elementos do formulário
</form>

Os parâmetros da tag form são os seguintes:

  • name é o nome do formulário, que pode ser usado para referenciá-lo numa função.
  • action indica o script que deverá efectuar o processamento dos dados inseridos no formulário.
  • method é o método de envio dos dados para o servidor web onde está o script de processamento. Pode ser GET ou POST.
  • enctype permite definir o formato com que os dados serão codificados antes de serem enviados ao servidor http. Somente é válido quando o método de envio for POST.

Controlos de Formulários HTML

Seguindo a tag <form> indicamos os dados que o utilizador deve fornecer e o tipo de cada informação. Os dados são inseridos em elementos do formulário (controlos), com o uso da tag <input>.

<input type=“tipo” name=“nome” value=“valor_inicial” size=“tamanho” maxlength=“caracteres” checked />

Os parâmetros da tag input são os seguintes:

  • name: Identificação do campo.
  • value: valor inicial do campo; é opcional, exceto para os tipos CHECKBOX e RADIO
  • size: tamanho do controlo; para os tipos TEXT e PASSWORD indica o número de caracteres que aparecem no campo
  • maxlength: número máximo de caracteres que podem ser digitados no campo; válido somente para TEXT e PASSWORD.
  • checked: define se um campo deve estar marcado inicialmente, sendo válido para os tipos CHECKBOX e RADIO.
  • type: O parâmetro type define o tipo de campo a ser utilizado para entrada de dados.
  • autofocus: Determina se a tag input é automaticamente focada ao carregar a página.
  • multiple: Determina se o utilizador pode adicionar mais que um valor na tag input.
  • required: Determna se a tag input é de preenchimento obrigatório.
  • placeholder: Mostra uma mensagem/dica dentro da tag input, que descreve o que é esperado nessa mesma tag.
  • pattern: Uso das Expressões Regulares (Regex).
  • min: Indica o número de caracteres minimos a ser digitados no campo.
  • formtarget: Determina onde mostrar a resposta após validação do formulário (_blank _self _parent _top framename); para type="submit" e type="image".

Os principais tipos de controles são descritos a seguir:

  • text: controlo de texto de linha única.
  • number: controlo de número.
  • tel: controlo de número de telefone.
  • password: caixa de password. O utilizador ao digitar nesta caixa, a password não é visível.
  • textarea: controle de texto multilinhas (multiline)
  • checkbox: campo que permite escolher opções clicando em caixas de verificação
  • radio: campo que permite escolher uma entre várias opções clicando num botão de rádio
  • hidden: campo que não é visível para o utilizador, mas é usado para o envio de dados para o servidor sem que o utilizador interfira
  • submit: Botão de envio do formulário
  • reset: Botão para “apagar” o formulário. Limpa todos os campos e restaurando os seus valores pré-definidos
  • file: Campo usado para o envio de arquivos.
  • select: Caixa de listagem drop-down que permite listar várias opções. O utilizador pode selecionar uma ou mais opções.
  • selected: Define o valor padrão na caixa de listagem drop-down.

Dica:

Use a tag <label> </label> para definir o titulo do elemento <input>.



Sérgio Moreira

Administrador
01-10-2016 17:10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulário HTML</title>
</head>
<body>
<form name="registo" action="processa.php" method="POST" accept-charset="UTF-8">
<label>Nome:</label>
<input type="text" name="nome" size="30" placeholder="Digite o seu nome aqui" autofocus /><br/>
<label>Sobrenome:</label>
<input type="text" name="sobrenome" size="50" placeholder="Digite o seu sobrenome aqui"/><br/>
<br/>
<label>Password:</label>
<input type="password" name="senha" size=15 required><br/>
<br/>
Sexo: <br/>
<input type="radio" name="sexo" value="M"> Masculino<br/>
<input type="radio" name="sexo" value="F"> Feminino<br/>
<br/>
Marque as opções de seu interesse:<br/>
<input type="checkbox" name="interesse[]" value="Desporto"> Desporto<br/>
<input type="checkbox" name="interesse[]" value="Cozinhar"> Cozinhar<br/>
<input type="checkbox" name="interesse[]" value="Informática"> Informática<br/>
<input type="checkbox" name="interesse[]" value="Livros"> Livros<br/>
<br/>
Seleccione as linguagens de programação pretendidas: (Segure a tecla Ctrl para selecionar mais de uma linguagem)<br/>
<select name="linguagens[]" multiple>
<option value="ASP">ASP.NET</option>
<option value="C" selected>Linguagem C</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select><br/>
<br/>
Seleccione um arquivo do seu computador para upload:<br/>
<input type="file" name="arquivo"/><br/>
<br/>
<br/>
Escreva comentários na caixa a seguir:<br/>
<textarea rows="8" cols="50" name="comentarios">
</textarea>
<input type="submit" name="submit" value="Enviar" /><br/>
<input type="reset" name="reset" value="Apagar" /><br/>
</form>
</body>
</html>

Sérgio Moreira

Administrador
01-10-2016 17:08
Formulário HTML





Sexo:
Masculino
Feminino

Marque as opções de seu interesse:
Desporto
Cozinhar
Informática
Livros

Seleccione as linguagens de programação pretendidas: (Segure a tecla Ctrl para selecionar mais de uma linguagem)


Seleccione um arquivo do seu computador para upload:



Escreva comentários na caixa a seguir:


Você deve estar logado para poder comentar!
101 Utilizadores registados com acesso a este espaço.



Paypal
Ajude a melhorar este website. Obrigado!
Partilhar no Facebook Partilhar no Google + Partilhar no Twitter Partilhar no Linkedin Partilhar via email