HTML Básico - Criação de Formulários - Parte 1

helldanger1 · Nov 27, 2007

Objetivo:

O objetivo deste tutorial sobre html é ensinar você a criar formulários, irei ensinar as etiquetas necessárias para a criação do mesmo bem como adiconar os atributos a mesma, também ira aprender a utilizar caixas de texto e seus atributos, tudo mostrado de forma simples e objetiva através das telas.

Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do de informática básica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6, Parte 7, Parte 8, Parte 9 e Parte 10 do tutorial html básico.

Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.

Vamos começar criando uma página para a criação do formulário a qual iremos chamar de formulario.html, copie o código abaixo e salve dentro da pasta site que a nossa pasta de projetos.

<html>

<head><title>Criação de Formulários</title></head>

<body>

<center>

<h2>Criação de Formulários</h2>

<br><br>

</center>

</body>

</html>

helldanger1 · Nov 27, 2007

Veja a página abaixo:

Tela 001

Para começar a criar os formulários utilizamos as seguintes etiquetas:
<form></form>

Sendo que entre esta duas etique vamos inserir os botões,campos que fazem parte deste formulário, sendo que dentro das etiquetas <form></fomr> utlizamos alguns atributos como action:

Action serve para definir o tipo de aççao que o formulário deve seguir, ou seja, podemos enviar o formulário para um endereço de correio ou uma página de script, sendo que para enviar para um e-mail a sintaxe fica assim:

<form action=”Endereço de e-mail que você deseja enviar”>

Em outro caso a sintaxe para chamar uma página de script fica desta forma:

<form action=”Nome do arquivo a ser chamado”>

Outro atributo que utilizamos é o method, o mesmo fica encarregado de espcificar a forma que o mesmo é enviado.

Vou mostrar na tela abaixo como ficaria a sintaxe completa para envio de um formulário:

Tela 002

Agora iremos aprender a inserir caixa de texto, a mesma serve para darmos entrada de registros, estas caixas são inseridas através da etiqueta <input> e dentro desta etiqueta podemos inserir atributos como type que podemos definir como texto e name para inserir um nome a caixa de texto, vou inseri um caixa de texto com a definição type como texto e name como formulário, veja nas telas abaixo o procedimento

Tela 003

Tela 004

Podemos ainda dentro desta caixa de texto inserir o atributo size para definir o tamanho da mesma, vamos colocar um tamanho 60.

Tela 005

helldanger1 · Nov 27, 2007

Tela 006

Agora vamos inserir o atributo maxlength que serve para definir quanto carecteres o caixa pode aceitar, ou seja, vmos definir o tamanho 10, isso vai segnificar que só podermos digitar um texo com no máximo 10 letras, também vamos inser a atributo value, este serve para caso você queira definir um nome que aparece dentro da caixa assim que o formulário for aberto, pode ser um símbolo também, vamos definir um tamanho para o texto de 20 e vamos colocar o seguinte nome “aprendendo html” para ser visualizado dentro da caixa.

Tela 007

Tela 008

Outro atributo muito útil é o type password que serve para ocultar o texto, colocamos o mesmo dentro do atributo type, substituindo pelo text, utilizado muito dentro de um campo para digitação de senhas.

Tela 009

Tela 010

Se necessitar de utilizar um texto longo, ou seja, que vai ocupar varias linhas podemos utilizar a atique <textarea></textarea> e dentro da mesma definir linhas através de Rows e colunas através de Cols.

Tela 011

Tela 012

Mostrei as etiquetas para a ciação de formulários e seus atributos e a utilizar a criar a caixa de texto para entrada de registros juntamente com seus atributos, tudo de forma bem objetiva e mostrado através das telas para que você tenha uma melhor entendimento possível

nelitomarques · Mai 15, 2009

<html>

<head><title>Criação de Formulários</title></head>

<body>

<center>

<h2>Criação de Formulários</h2>

<br><br>

</center>

</body>

</html>
__________________

HTML Básico - Criação de Formulários - Parte 1

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

nelitomarques

Novo