07 html formulários

PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva

Formulários
• Os Formulários em HTML são usados para selecionar diferentes tipos de
entradas do usuário.

Campos de texto
• Este exemplo demonstra como criar campos de texto em uma página
HTML. Um usuário pode escrever o texto em um campo de texto.
<html>
<body>
<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastname">
</form>
</body>
</html>

Campos de senha
• Este exemplo demonstra como criar um campo de senha em uma página
HTML.
<html>
<body>
<form>
Nome do Usuário:
<input type="text" name="user">
<br>
Senha:
<input type="password" name="password">
</form>
<p>
Note que quando você digita caracteres
num campo de senha, o navegador exibe
Asteriscos.
</p>
</body>
</html>

Formulários
• Um formulário é uma área que pode conter elementos de formulário.
• Os elementos de formulário são elementos que permitem o usuário entrar
informação (como campos de texto, campos de área de texto, menus drop-
down, botões radiais, caixas de seleção, etc.) em um formulário.
• Um formulário é definido pela tag <form>.
<form>
....
.....
</form>

Entrada (Input)
A tag de formulário mais usada é a tag <input>. O tipo de input é especificado
com o atributo type (tipo). Os tipos de input mais cumumente usados são
explicados abaixo.
Campos deTexto
Os campos de texto são usados quando você quer que o usuário digite letras,
números, etc. em um formulário.
<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastname">
</form>

Botões Radiais
Botões Radiais são usados quando você quer que o usuário selecione uma
entre uma quantidade limitada de escolhas.
<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
</form>

Caixas de Seleção
• As Caixas de Seleção são usadas quando você quer que o usuário
selecione uma ou mais opções de uma quantidade limitada de escolhas
<form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta
<br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>

O Atributo Ação do Formulário (Form's Action) e o
Botão Enviar (Submit)
• Quando o usuário clica no botão "Enviar", o conteúdo do formulário é
enviado para outro arquivo. O atributo de ação do formulário define o
nome do arquivo para o qual enviar o conteúdo. O arquivo definido no
atributo action geralmente faz algo com a entrada recebida.
<form name="input" action="html_form_action.asp“ method="get">
Nome do Usuário:
<input type="text" name="user">
<input type="submit" value="Enviar">
</form>

Checkbox
• Este exemplo demonstra como criar caixas de seleção numa página HTML.Um
usuário pode selecionar ou de selecionar uma caixa de seleção.
<html>
<body>
<form>
Eu tenho uma bicicleta:
<input type="checkbox" name="Bike">
<br>
Eu tenho um carro:
<input type="checkbox" name="Car">
</form>
</body>
</html>

Radiobutton
• Este exemplo demonstra como criar botões radiais numa página HTML.
<html>
<body>
<form>
Masculino:
<input type="radio" checked name="Sex" value="male">
<br>
Feminino:
<input type="radio“ name="Sex" value="female">
</form>
<p>
Quando um usuário clica num botão
radial, o botão torna-se marcado, e
todos os outros botãos com o mesmo
nome tornam-se desmarcados.
</p>
</body>
</html>

Caixa drop down Simples
• Este exemplo demonstra como criar uma caixa drop down simples
numa página HTML. A caixa drop-down é uma lista selecionável.
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>

Outra caixa drop down
• Este exemplo demonstra como criar uma caixa drop down simples com um valor
pré-selecionado.
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>

Área deTexto
• Este exemplo demonstra como criar uma área de texto (um controle de
entrada de texto multi-linhas). Um usuário pode escrever texto na área de
texto. Numa área de texto você pode escrever uma quantidade ilimitada
de caracteres.
<html>
<body>
<p>
Este exemplo não pode ser editado
porque nosso editor usa uma textarea
para a entrada de dados, e o seu
navegador não permite uma área de
texto dentro de uma área de texto.
</p>
<textarea rows="10" cols="30">
O gato estava brincando no jardim.

Criar um botão
• Este exemplo demonstra com criar um botão. No botão você pode
definir o seu próprio texto.
<html>
<body>
<form>
<input type="button" value="Oi
mundo!">
</form>
</body>
</html>

Conjunto de campo em torno dos dados
• Este exemplo demonstra como desenhar uma borda com um título em
torno dos seus dados.
<html>
<body>
<fieldset>
<legend>
Informações de saúde:
</legend>
<form>
Altura <input type="text" size="3">
Pêso <input type="text" size="3">
</form>
</fieldset>
<p>
Se não houver borda em torno do formulário de entrada, o
seu navegador é muito antigo.
</p>
</body>
</html>

Formulário - Exemplo
<html>
<body>
<form name="input“ action="html_form_action.asp“ method="get">
Digite o seu primeiro nome: <input type="text" name="FirstName“ value="Mickey" size="20">
<br>Digite o seu último nome:
<input type="text" name="LastName“ value="Mouse" size="20">
<br>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</form>
<p>
Se você clicar no botão "Enviar", você envirá sua entrada para uma nova página chamada html_form_action.asp.
</p>
</body>
</html>

Formulário – Exemplo2
<HTML>
<HEAD>
<TITLE>EX10</TITLE>
</HEAD>
<FORM action="mailto:professora@lucilia.com.br" method="post" enctype="text/plain">
Nome <INPUT type="text" name="nome" size="30" maxlength="100"> <P>
E-mail <INPUT type="text" name="email" size="25" maxlength="100" value="@"> <P>
Cidade <INPUT type="text" name="cidade" size="20" maxlength="60"> <P>
Sexo <BR>
<INPUT type="radio" name="sexo" value="Masculino" checked> Homem <BR>
<INPUT type="radio" name="sexo" value="Feminino"> Mulher
<BR> <BR> Frequência das viagens <BR>
<SELECT name="utilização">
<OPTION value="1">Várias vezes por dia
<OPTION value="2">Uma vez por dia
<OPTION value="3">Várias vezes por semana
<OPTION value="4">várias vezes por mês
</SELECT>
<BR> <BR>Comentários sobre sua satisfação pessoal <BR>
<TEXTAREA cols="30" rows="7" name="comentários"></TEXTAREA>
<BR> <BR>
<INPUT type="checkbox" name="receber_info" checked>
Desejo receber notificação das novidades nas linhas de ônibus. <BR> <BR>
<INPUT type="submit" value="Enviar formulário">
<BR> <BR>
<INPUT type="Reset" value="Apagar tudo">
</FORM>
</HTML>

07 html formulários

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 07 html formulários

Ähnlich wie 07 html formulários (20)

Mehr von Centro Paula Souza

Mehr von Centro Paula Souza (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

07 html formulários