Efetuar login

Oficina da Net - Construindo conhecimento

Widgets | Contato | Cadastro | Fórum | Promoções

HTML

Curso de HTML - Aula 9

Publicado em: 26/09/2008 | HTML | Visualizações: 799 | 0 Comentário(s)

Chegamos à última aula do nosso curso de HTML, e para encerrarmos vamos falar sobre FORMULÁRIOS.
Os formulários são áreas reservadas para a entrada de dados, onde o internauta pode preencher livros de visitas, pedidos de compra, cadastros, enfim, várias possibilidades exsitem para o uso de formulários.

A criação do formulário é composta por diversos objetos, que são colocados dentro da Tag <form>...</form>, e os seus objetos dentro de suas respectivas Tags, que veremos mais adiante.

Sintaxe:
<form name="nome_do_formulario" action="url" method="método">

Name: indica o nome do formulário;
Action: indica a url do arquivo responsável pela recepção das informações do formulário;
Method: define o método de envio dos dados para o servidor. Podem ser GET ou POST, variando de acordo com a necessidade.

Objetos de controle do formulário

Input
Indica um tipo de objeto inserido no formulário, TYPE é o seu parâmetro principal.

<input   type="tipo"   name="nome"  value="valor_padrão"   maxlenght="tamanho_máximo"  size="tamanho_exibido">

Tipos suportados pelo parâmetro TYPE.

Text
Define um objeto de caixa de texto, marcando uma área para digitação de informações.

Checkbox
Define caixas de verificação que podem assumir 2 valores, verdadeiro (quando marcadas) e falso (quando desmarcadas). O parâmetro CHECKED faz com que uma determinada caixa já venha marcada.

Radio
Também define caixas de verificação, porém, apenas uma das caixas definidas como RADIO pode ser marcada, o contrário de CHECKBOX, que pode ter todas as caixas marcadas.

Reset
Cria um botão que força a releitura do formulário, retornando-o ao seus valores padrões.

Submit
Cria um botão que enviará as informações do formulário para o servidor, baseada no atributo ACTION do formulário.

Password
É um campo tipo texto, porém com uma máscara, servindo para a digitação de senhas, onde os caracteres digitados são substituídos por bolinhas ou asteriscos.

Além de INPUT, temos também o objeto <textarea>...</textarea>. Ele é usado para campos onde os textos serão longos.

Sintaxe:
<textarea rows="numero_linhas" cols="numero_colunas"> texto default </textarea>

Texto default é o texto que deverá aparecer por padrão dentro do campo, caso deixe sem nada entre <textarea>...</textarea>, o campo aparecerá em branco.

Finalizando temos um objeto chamado <select>, que assim como o <textarea>, não utiliza a marcação padrão <input type> para campos de formulário.

Sintaxe:

<select   name="nome"   size="numero_linhas_visiveis"  multiple>

   <option value="valor" selected>texto</option>

</select>

Multiple: se especificado, permite a marcação de múltiplos itens.
Selected: indica que o item da lista que o contiver virá previamente selecionado.

Observação: ao definir o atributo SIZE, você determina o tipo de lista que irá se apresentar, com o atributo SIZE dimensionado teremos uma caixa de listagem, sem o atributo SIZE definido teremos uma caixa de combinação.

Para melhor compreendermos a criação de formulários, digite o exemplo abaixo e veja o resultado.



<html>

<head>

<title>Formulário HTML</title>

</head>



<body>

<form id="form_dados" name="form_dados" method="post" action="arquivo_envio.php">

  <label>Nome:  <input type="text" name="nome" id="nome" />

  </label>

  <p>Sexo: 

    <label>

    <input type="radio" name="radio" id="sexo" value="masc" />

    </label>

    Masculino	

    <label>

    <input type="radio" name="radio" id="sexo" value="fem" />

    </label>

  Feminino</p>

  <p>Preferências: 

    <label>

    <input type="checkbox" name="pref" id="pref" />

    </label>

    Esportes 

    <label>

    <input type="checkbox" name="pref2" id="pref" />

    </label>

    Cinema 

    <label>

    <input type="checkbox" name="pref3" id="pref" />

    </label>

  Televisão</p>

  <p>

    <label>Idade: 

    <select name="idade" id="idade">

      <option>0 a 10 anos</option>

      <option>11 a 20 anos</option>

      <option>21 a 30 anos</option>

      <option>acima de 30 anos</option>

    </select>

    </label>

  </p>

  <p>Observação</p>

  <p>:

    <label>

    <textarea name="observacao" id="observacao" cols="45" rows="5"></textarea>

    </label>

  </p>

</form>

</body>

</html>

Assim chegamos ao fim do nosso curso de HTML. Foi uma caminhada muito gostosa e espero que vocês que acompanharam essa série possam ter aprendido bastante. Não deiem de acompanhar o portal, está em andamento o curso de Corel Draw e em breve será iniciado um curso de Delphi.

Grande abraço e sucesso a todos.