[TUTORIAL] Formularios HTML

[Juliana~* 26]

Galerinha, vou encinar a você a faserem formulario em HTML, então vamos lá.

 

Um formulário tem como finalidade de interação entre o usuário e o servidor ao qual são transmitidas informações para o proprietário da página. É possível criar áreas para entrada de texto, fazer pesquisas, páginas cujo formato dependem de uma opção escolhida pelo usuário.

A tag correspondente é <form> e </form> que determinam o início e o fim de um formulário.

 

Outros comandos são:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Define uma caixa de texto.

 

Seus atributos são:

 

 

Name=”nome” – Define o nome dos dados.

Rows=”valor” – Define quantas linhas terá a caixa de texto.

Cols=”valor” – Define quantas colunas terá a caixa de texto.

Value=”texto” – Define qual o texto que será enviado.

 

Exemplo:

 

<form>
<textarea name=”Area_de_texto” rows=4 cols=40 value=”Comentarios”>Texto padrão</textarea>


<select></select> //Define uma lista de opção.

Antes da tag </form> //digite mais este exemplo:

<select>
<option select>Escolher um item</option>
<option>primeiro item</option>
<option>segundo item</option>
<option>terceiro item</option></select>
</form>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

<inputs> - Define botões e caixas de seleção.

 

Atributos

 

Type=”text” – Caixa de texto simples.

Type=”password” – Dados confidências.

 

No “text” e no “password” podem ser usados os seguintes atributos:

 

Name – Define o nome dos dados.

Size – Define o tamanho do campo.

Maxlength – Define o máximo de caracteres.

 

Antes da tag </form> digite mais este exemplo.

<input type=”text” name=”nome”size=”15” maxlength=”35”><br>
<input type=”password” name=”senha” size=”10” maxlength=”6”>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

type=checked – Marca uma escolha inicial, ou seja, se o usuário não escolher a opção, o formulário irá considerar a alternativa pré escolhida.

 

Antes da tag </form> digite mais este exemplo:

<input type=”checkbox” name=”opção”value=”primeira escolha”>primeira<br>
<input type=”checkbox” name=”opção”value=”segunda” checked>segunda</checked><br>
<input type=”checkbox” name=”opção”value=”terceira escolha”>terceira<br>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

type=”submit” – Processa os dados do formulário.

 

Atributos

 

Value – Define o nome que aparecerá mo botão.

 

Antes da tag </form> digite mais este exemplo.

 

<input type=”submit” value=”enviar”>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Veja como ficaram estes exemplos:

 

Cada marcação de entrada em um formulário tem a opção “NAME” associada, de tal forma que o script saiba qual o nome, isto é como chamar cada valor digitado.

 

Certamente você pode definir mais de um campo de entrada textual ou menu dentro de um formulário, mas certifique-se de que cada um possui um nome diferente.

OBS: Utilize sublinhado ao valor informado em “NAME” em vez de espaços em branco, para não gerar problemas no servidor na decodificação dos valores informados (exemplo: name=”opiniao_do_usuario”)

 

Existem dois métodos: “GET” e “POST” para enviar a informação do formulário para o servidor.

 

METHOD=”GET” – Este método envia toda sua informação ao final da URL ativada, pois a maioria dos documentos HTML são recuperados a partir da requisição de uma única URL ao servidor.

METHOD= “POST” – Este método transmite toda a informação fornecida, via formulário, imediatamente após a URL ativada, ou seja, quando o servidor recebe uma ativação de um formulário utilizando POST, ele sabe que precisa continuar “ouvindo” para obter a informação. Este é o melhor método.

Utilizando a marcação ACTION, você estará indicando para onde o formulário deve enviar as informações. Esta URL em geral aponta para um script CGI que irá receber e decodificar os resultados. Lembre-se que se você está referenciando um script que reside no mesmo servidor do formulário, você não precisa incluir a URL completa.

Neste exemplo abaixo as informações estão sendo enviadas para um script local chamado: post-query no diretório: /cgi-bin do servidor.

 

Exemplo:

<form METHOD=”Post” ACTION=”/cgi-bin/post-query”>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Creditos: Juliana

Fonte: Apostila HTML Avançada.

 

Se Gostou , agradeça, se te ajudou, agradeça, se naum gostou nem te ajudou, tabem agradeça, obrigada!

 

 

[Kyle 5]

Muito bom mesmo! Tinha algumas coisas que nem eu sabia no select, hauhauah, obrigado por compartilhar! :D

[Juliana~* 26]

@edi472 é apenas o meu dever aqui neah xD, agradece ai =], e obrigada pelo elogio do tópico!

[קђ๏єภเא 11]

Muito bom, explica detalhe por detalhe sobre o form HTML, mas sem o form que envia os dados (PHP, ASP, CGI E ETC) seria inútil aprender.também tem o negócio do form automático:

<form action="enviar.php" method="post" id=form"/>

VALORES...

<script>document.getElementById('form').submit();

</form>

[MRs.Romanha 4]

otimo Juliana.

eu nao testei.. mas ao meu ver tem um pequeno erro.. me corrija seeu estiver errado por favor

 

no inicio vc mostrou

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

repare que abriu e fexou a tag "form"

até aí está certo..

o problema vai pcprrer quando lá na frente for adicionado o "reset"

o reset só limpa os campos que estiverem junto com ele dentro da mesma tag "form"

e o reset que vc botou aí parece estar sosinho.. então nao vai limpar nada.

[Juliana~* 26]

@MRs.Romanha Erro concertado, obrigada pelo aviso e acho que ta certo suahsuhas>< eu abri e fechei direito era para abrino co miço e fecha no final, obrigada pelo aviso!