técnicas e processos - html / css - aula 8
DESCRIPTION
Aula para produção de html e css no curso de Design Anhanguera Unidade BrigadeiroTRANSCRIPT
Técnicas e processos de
produção
Profº Ritielle Souza
FORMULÁRIOSFormulários são utilizados para carregar informações cedidaspelo 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ÁRIOSCampos de TextoOs 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ÁRIOSCampos de TextoOs 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ÁRIOSBotões RadiaisBotõ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ÁRIOSCaixas de SeleçãoAs 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ÁRIOSCaixa dropdownCaixas 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ÁRIOSText multi-linhasUma caixa de texto que suporta maior quantidade de caracteres.
<form>
<textarea name=“texto”>Digite aqui</texarea>
</form>Digite aqui
FORMULÁRIOSBotão de envioBotão para disparar o envio do formulário
<form>
<input type="submit" value="Enviar">
</form>
FORMULÁRIOSOUTROS
Outros modelos de INPUT:
type=“hidden” - Invisível (Não aparece na tela)type=“password” - Para senhas [ ****** ]type=“reset” - Limpa os dados do formuláriotype=“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{
font-family:verdana;
color:white;
font-size:20px;
background-color:navy;
}
FORMULÁRIOS
h2{ font-family:verdana; color:black; font-size:14px;}p.esq{ font-size:14px; font-family:verdana; margin: 0px 0px 0px 0px; width:400px; position:relative; top:40px; left:10px;}
FORMULÁRIOS
p.dir{
font-size:14px;
font-family:verdana;
margin: 0px 0px 0px 0px;
width:300px;
position:relative;
top:14px;
left:400px;
}
p.tit{
text-align:left;
font-family:verdana;
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:[email protected]” 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>