Criando Formulário em HTML

CRIANDO FORMULÁRIO
1) Abra o editor de textos do Linux em seguida crie a tag que define a linguagem HTML, seguido pela tag de
cabeçalho, pela tag de titulo definido como “Ficha de locação de filmes” e finalmente fechando a tag cabeçalho.
<HTML>
<HEAD>
<TITLE>Ficha de locação de filmes</TITLE>
</HEAD>
2) Agora abra o corpo da página definido juntamente sua cor de fundo com valor “//”, que será escolhido por você.
<BODY BGCOLOR=” “>
3)Defina a fonte padrão como “Verdana”
<FONT FACE=”Verdana”>
4)Abra a tag formulário, para criá-lo.
<FORM>
5)Crie um parágrafo com alinhamento centralizado
<P ALIGN=”Center”>
6)Defina a fonte com tamanho 4
<FONT SIZE=”4”>
7)Digite a frase “Ficha de locação On-line” que será o titulo da página da ficha de inscrição. Coloque em negrite.
<B> Ficha de locação On-line</B>
8)Finalize a tag da fonte de tamanho 4 e também a tag de parágrafo respectivamente.
</FONT>
</P>
9)Crie outro tag de fonte, mas agora definindo seu tamanho com valor 2.
<FONT SIZE=”2”>
Vamos inserir atributos de estilos CSS, atributos de borda.

Border-style – configura a borda dos componentes.
Border-width – configura a espessura da borda.
Agora digite a palavra “Nome:” e logo em seguida crie uma caixa de texto de formulário com nome de “nome”
tamanho 50. Utilize também o atributo de estilo CSS da borda da caixa de texto com valor sólido “solid” e a largura
da borda com valor 1. No final da linha insira ainda duas quebras de linha.
Nome: < INPUT TYPE = “text” NAME = “nome” SIZE = “50” STYLE = “border-style: solid; border-width:1”>
<BR><BR>
10)Na outra linha digite: “Data de nascimento:” e na frente insira outra caixa de texto como nome de “data”, tamanho
10 caracteres. Insira também os mesmos atributos de estilo da caixa anterior.
Data nascimento:<INPUT TYPE =”text” NAME =”data” SIZE = “10” STYLE= “border-style:solid; border-width:1”>
11)Agora insira 8 espaços incondicionais, pois na frente da caixa de texto da data de nascimento ainda terá dois botões
de opção para escolha do sexo da pessoa e não na outra linha.

12)Nessa linha digite a palavra “Sexo:”
Sexo:
13)Crie agora um botão de opção(radio) com valor “v1” e nome “sexo”. Na frente da linha depois do fechamento do
tag insira a palavra “Masculino”
<INPUT TYPE = “radio” VALUE = “v1” NAME = “sexo”> Masculino
14)Nessa linha insira outro botão de opção mas desta vez com valor de “v2” e com o mesmo nome (“sexo”). Na frente
ao invés de masculino insira a palavra “Feminino”, com duas quebras de linha na frente.
<INPUT TYPE = “radio” VALUE = “v1” NAME = “sexo”> Feminino<BR><BR>
15)Em seguida digite “E-mail:”, seguida pelo código que cria outra caixa de texto com nome de “e-mail”, tamanho de
40 caracteres e mesmo estilo de borda das anteriores.
E-mail:<INPUT TYPE = “text” NAME = “email” SIZE=”40” STYLE=”border-style:solid; border-width:1”>
16) Insira 8 espaços incondicionais ao texto

17)Agora digite o texto “Telefone” e na frente insira o código que cria uma caixa de texto com o nome de “telefone”,
tamanho de 15 caracteres e estilo de borda como os anteriores. Não se esqueça das duas quebras de linha.
Telefone: <INPUT TYPE=”text” NAME=”telefone” SIZE=”15” STYLE=”border-style:solid; border-width: 1”>

<BR><BR>
18)Vamos criar mais uma caixa de texto “endereço”
Endereço:<INPUT TYPE=”text” NAME=”endereço” SIZE=”50” STYLE=”border-style:solid; border-width:1”>

<BR><BR>
19)Seguindo os mesmo procedimento das caixas de texto anteriores crie mais uma para o campo “Cidade”.
Cidade:<INPUT TYPE=”text” NAME=”cidade” SIZE=”30” STYLE=”border-style:solid; border-width:1”>
20)Insira 5 espaços incondicionais.

21)Agora você ira criar uma lista de opções representando os estados brasileiros para que o usuário quando estiver
preenchendo o formulário possa escolher facilmente em que estado ele reside. Insira então o texto “Estado” e logo na
frente uma lista de opções (menu suspenso) como o nome de “estado”.
Estado:<SELECT NAME=”estado”>
22)Com o menu suspenso criado você deverá criar 27 opções para cada estado brasileiro desse menu suspenso,
incluindo o Distrito Federal. Lembre-se que para criar uma opção de um menu suspenso utilizamos a tag <OPTION>.
Logo abaixo da linha de código da tag <SELECT> digite a seguinte lista:
<option>AC</option> <option>BA</option>
<option>AL</option> <option>CE</option>
<option>AM</option> <option>DF</option>
<option>AP</option> <option>ES</option>
<option>GO</option> <option>RJ</option>
<option>MA</option> <option>RN</option>
<option>MG</option> <option>RO</option>
<option>MS</option> <option>RR</option>
<option>MT</option> <option>RS</option>
<option>PA</option> <option>SC</option>
<option>PB</option> <option>SE</option>
<option>PE</option> <option>SP</option>
<option>PI</option> <option>TO</option>
<option>PR</option>
23)Feche a tag do menu suspenso
</SELECT>
24)Insira 5 espaços incondicionais

25)Vamos criar a caixa de texto CEP.
CEP:<INPUT TYPE=”text” NAME=”cep” SIZE=”8” STYLE=”border-style:solid; border-width:1”>

<BR><BR>
26)Digite “Observações:” e na frente insira uma tag de quebra de linha.
Observações:<BR>
27)Agora vamos criar uma caixa de texto de rolagem (área de digitação de textos), insira esse elemento definindo 5
linhas de tamanho da caixa, o nome de “obs.” com 50 colunas (caracteres) e também os atributos de estilo de borda
utilizados nessa página. No final mais duas quebras de linha.
<TEXTAREA ROWS = “5” NAME=”obs.” COLS=”50” STYLE=”border-style:solid; border-

width:1”></TEXTAREA><BR><BR>
28)Insira agora uma caixa de seleção com nome “receber” e valor OFF (que significa desativado)
<INPUT TYPE=”checkbox” NAME=”receber” VALUE=”off”>
Essa caixa será um item que você poderá marcar ou deixar desmarcado, onde optará por receber ou não informações
sobre os filmes da locadora no seu endereço de e-mail.
29)Agora digite a seguinte frase:

Desejo receber informações sobre lançamentos e/ou promoções no meu e-mail.<BR><BR>
30)Insira a tag de centralização
<CENTER>
31)Agora deverá criar o botão que seria encarregado de enviar ou manipular os dados preenchidos nos campos do
formulário. Insira então um botão (submit), com o valor de rótulo “Inscrever-se” e nome de “enviar”.
<INPUT TYPE=”submit” VALUE=”Inscrever-se” NAME=”enviar”>
32)Insira 3 espaços incondicionais

33)Agora você ira inserir o botão que limpará todos os dados do formulário de uma vez. Esse botão é do tipo “reset”
com o valor de rótulo “Limpar Campos” e nome de “limpa”
<INPUT TYPE=”reset” VALUE=”Limpar campos” NAME=”limpa”>
(34) E finalmente digite:
</CENTER>
</FORM>
</FONT>
</BODY>
</HTML>

Criando Formulário em HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Criando Formulário em HTML

Transféré par

Droits d'auteur :

Formats disponibles

CRIANDO FORMULÁRIO

<BODY BGCOLOR=” “>

3)Defina a fonte padrão como “Verdana”

4)Abra a tag formulário, para criá-lo.

5)Crie um parágrafo com alinhamento centralizado

6)Defina a fonte com tamanho 4

<B> Ficha de locação On-line</B>

8)Finalize a tag da fonte de tamanho 4 e também a tag de parágrafo respectivamente.

Vamos inserir atributos de estilos CSS, atributos de borda.

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

12)Nessa linha digite a palavra “Sexo:”

<INPUT TYPE = “radio” VALUE = “v1” NAME = “sexo”> Masculino

<INPUT TYPE = “radio” VALUE = “v1” NAME = “sexo”> Feminino<BR><BR>

E-mail:<INPUT TYPE = “text” NAME = “email” SIZE=”40” STYLE=”border-style:solid; border-width:1”>

16) Insira 8 espaços incondicionais ao texto

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Telefone: <INPUT TYPE=”text” NAME=”telefone” SIZE=”15” STYLE=”border-style:solid; border-width: 1”>

18)Vamos criar mais uma caixa de texto “endereço”

Endereço:<INPUT TYPE=”text” NAME=”endereço” SIZE=”50” STYLE=”border-style:solid; border-width:1”>

Cidade:<INPUT TYPE=”text” NAME=”cidade” SIZE=”30” STYLE=”border-style:solid; border-width:1”>

20)Insira 5 espaços incondicionais.

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

23)Feche a tag do menu suspenso

24)Insira 5 espaços incondicionais

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

25)Vamos criar a caixa de texto CEP.

CEP:<INPUT TYPE=”text” NAME=”cep” SIZE=”8” STYLE=”border-style:solid; border-width:1”>

26)Digite “Observações:” e na frente insira uma tag de quebra de linha.

<TEXTAREA ROWS = “5” NAME=”obs.” COLS=”50” STYLE=”border-style:solid; border-

<INPUT TYPE=”checkbox” NAME=”receber” VALUE=”off”>

29)Agora digite a seguinte frase:

30)Insira a tag de centralização

<INPUT TYPE=”submit” VALUE=”Inscrever-se” NAME=”enviar”>

32)Insira 3 espaços incondicionais

&nbsp; &nbsp; &nbsp;

(34) E finalmente digite:

Vous aimerez peut-être aussi