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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a 07 html formulários

Semelhante a 07 html formulários (20)

Mais de Centro Paula Souza

Mais de Centro Paula Souza (20)

Último

Último (20)

07 html formulários