Técnicas e processos - HTML / CSS - aula 8

Técnicas e
processos de
produção
Profº Ritielle Souza

FORMULÁRIOS
Formulários são utilizados para carregar informações cedidas
pelo usuário.
Ex: enviar uma mensagem através do site, efetuar um cadastro
e etc
Formulários sempre estarão dentro da TAG <FORM></FORM>
ENTRADA DE DADOS
A entrada de dados dos usuários na maioria das vezes é feito
através da TAG <INPUT>

FORMULÁRIOS
Campos de Texto
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>

FORMULÁRIOS
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>

FORMULÁRIOS
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>

FORMULÁRIOS
Caixa dropdown
Caixas de seleção com diversas opções listadas.
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>

FORMULÁRIOS
Text multi-linhas
Uma caixa de texto que suporta maior quantidade de caracteres.
<form>
<textarea name=“texto”>Digite aqui</texarea>
</form>
Digite aqui

FORMULÁRIOS
Botão de envio
Botão para disparar o envio do formulário
<form>
<input type="submit" value="Enviar">
</form>

FORMULÁRIOS
OUTROS
Outros modelos de INPUT:
type=“hidden” - Invisível (Não aparece na tela)
type=“password” - Para senhas [ ****** ]
type=“reset” - Limpa os dados do formulário
type=“submit” - Envia o formulário

FORMULÁRIOS
<form >
<Input type=“text” name=“email”>
<input type=“password” name=“senha”>
<select name=“dia-niver”>
<option value=“Jan”> Janeiro</option>
<option value=“Fev”> Fevereiro</option>
</select>
<input type=“radio” value=“Blue”>Blue
<input type=“checkbox” name=“interesse”
value=“news”> News
<input type=“checkbox” name=“interesse”
value=“sports”> Sports
</form>

FORMULÁRIOS
- vamos testar -
body{
background-color: LightSkyBlue;
margin-left:100px;
}
legend{
font-family:verdana;
font-size:20px;
background-color:navy;
color:white;
}
h1{
color:white;
font-size:20px;
background-color:navy;
}

FORMULÁRIOS
h2{
color:black;
font-size:14px;
}
p.esq{
font-size:14px;
margin: 0px 0px 0px 0px;
width:400px;
position:relative;
top:40px;
left:10px;
}

FORMULÁRIOS
p.dir{
font-size:14px;
margin: 0px 0px 0px 0px;
width:300px;
position:relative;
top:14px;
left:400px;
}
p.tit{
text-align:left;
font-size:18px;
font-weight:bold;
}

FORMULÁRIOS
input.botao{
margin-left:100px;
font-weight:bold;
}

FORMULÁRIOS
<html>
<head>
<title>Cadastro de usuários</title>
<link rel="stylesheet" href="formulario.css" type="text/css" />
</head>
<body>
<form action=“mailto:someone@somewhere.com” method="post"
enctype="text/plain">
<fieldset>

FORMULÁRIOS
<h1>Cadastro de usuários</h1>
<p class="tit"> Dados pessoais:</p>
<p class="esq"> Nome:   <input type="text" name="nome"
size="30" maxlenght="30" /></p>
<p class="dir">E-mail: <input type="text" name="mail" size="20"
maxlenght="30" /></p>
<p class="esq">Fone:    <input type="text"
name="fone" size="30" maxlenght="30" /></p>
<p class="dir"> Sexo:<input type="radio" name="sexo" value="feminino"
/>Feminino<input type="radio" name="sexo" value="masculino"
/>Masculino</p>
<p class="esq">Rua:     <input type="text"
name="rua" size=30 maxlenght="30" /></p><br />
<p class="esq">Compl:  <input type="text" name="compl" size=30
maxlenght="30" /></p>
<p class="dir">Núm: <input type="text" name="num" size=20
maxlenght="30" /></p><br />

FORMULÁRIOS
<p class="dir">CEP:  <input type="text" name="cep"
size=20 maxlenght="30" /></p>
<h2> Dados para acessar o sistema</h2><br />
<p class="esq">Nome de usuário: <input type="text"
name="usuario" size=30 maxlenght="30" /></p>
<p class="dir">Senha: <input type="password" name="senha"
size=30 maxlenght="30" /></p><br /><br />
<input type="submit" value="Enviar Dados" class="botao" />
<input type="reset" value="Limpar Dados" class="botao" /></p>
</fieldset>
</form>
</body>
</html>

Técnicas e processos - HTML / CSS - aula 8

Mais conteúdo relacionado

Semelhante a Técnicas e processos - HTML / CSS - aula 8

Mais de Ritielle de Souza

Técnicas e processos - HTML / CSS - aula 8