Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
CAPTULO 11
1/70
15/8/2014
2/70
15/8/2014
Como o prprio nome diz, uma forma de comear o projeto logo com um
design e recursos base sem perder tempo com design no incio.
S isso j nos traz uma srie de benefcios. Um reset aplicado, e nossas tags
ganham estilo e tipografia base. Isso quer dizer que podemos usar tags como um
H1 ou um P agora e elas tero um estilo caracterstico do Bootstrap.
Alm disso, ganhamos muitas classes com componentes adicionais que
podemos aplicar na pgina. So vrias opes. Por exemplo, pra criar um ttulo
com uma frase de abertura em destaque, usamos o jumbotron:
<div class="jumbotron">
<div class="container">
<h1>tima escolha!</h1>
<p>Obrigado por comprar na Mirror Fashion.</p>
</div>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
3/70
15/8/2014
</div>
4/70
15/8/2014
compra.
Nossa loja foi otimizada pra compra direta, sem carrinho de compras. O cliente
escolhe o produto e compra direto, com um clique. S precisamos coletar os dados
de dele, do pagamento e da entrega.
O foco dessa nova pgina ento a coleta de informaes para efetivao da
compra. Um grande formulrio complexo com os campos necessrios. Vamos usar
o Bootstrap para desenvolver essa pgina com mais facilidade e rapidez.
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
5/70
15/8/2014
6/70
15/8/2014
Bootstrap depois.
7/70
15/8/2014
8/70
15/8/2014
<dd>Fuzzy Cardigan</dd>
<dt>Cor</dt>
<dd>verde</dd>
<dt>Tamanho</dt>
<dd>40</dd>
<dt>Preo</dt>
<dd>R$ 129,00</dd>
</dl>
</body>
</html>
9/70
15/8/2014
tipogrficos.
Coloque no <head>da pgina de checkout o CSS do bootstrap:
<link rel="stylesheet" href="css/bootstrap.css">
10/70
15/8/2014
11/70
15/8/2014
Repare como os nomes das classes, apesar de serem muitos, fazem sentido para
isolar cada parte do painel.
Teste novamente a pgina no navegador e veja o resultado. Temos um painel
arredondado com ttulo em destaque no topo.
Para saber mais sobre painis do Bootstrap:
http://getbootstrap.com/components/#panels
4. Repare no exerccio anterior do jumbotron que o divcontainer responsvel
por centralizar e dar espaamento na tela. Muito parecido alis com o container
que havamos criado antes em nosso projeto, mas agora uma classe do Bootstrap.
Crie um outro div container pra conter o panelque acabamos de criar e veja como
ele fica melhor posicionado no centro da tela.
<div class="container">
<!-- ... panel aqui ... -->
</div>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
12/70
15/8/2014
Com Bootstrap, podemos ainda acrescentar algumas classes nessa imagem para
obter resultados interessantes. A classe img-responsivefaz a imagem ficar
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
13/70
15/8/2014
14/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
15/70
15/8/2014
Atributos do Form
<form action="/efetivar.php" method="POST">
</form>
Componentes
Porm, neste exemplo, no temos nenhum elemento para capturar as
informaes. Na verdade, somente a marcao da tag <form>no mostra nenhum
elemento visvel no navegador. Vamos supor que precisemos de uma informao
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
16/70
15/8/2014
Label
Adicionamos a marcao do elemento <label>. Esse elemento uma tag de
contedo, e seu texto exibido de maneira comum dentro do nosso formulrio, a
nica diferena que essa marcao faz uma ligao com outro elemento qualquer
em nosso formulrio. Note que nosso labeltem o atributo for, que recebe o valor
nome.
Quando clicamos com o mouse sobre o texto marcado com a tag label, o
elemento que tem o atributo idcom o mesmo valor que o atributo fordo label
selecionado para que possamos interagir com ele. No exemplo, esse elemento
vinculado ao label um campo de texto que declaramos com a tag input.
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
17/70
15/8/2014
Input
A maioria dos elementos que utilizamos nos formulrios para capturar
informaes dos usurios so da tag <input>. No exemplo anterior, utilizamos
duas variaes dessa tag.
Os tipos diferentes de inputsso determinados pelo valor do seu atributo type,
e no exemplo ns utilizamos dois muito comuns. A seguir, vamos detalhar os tipos
aceitos para essa tag.
text
<input type="text" name="nome_usuario">
18/70
15/8/2014
lado do servidor por meio do atributo name, utilizado para identificar cada
informao contida nos parmetros da requisio. Para ter acesso informao
digitada quando tratamos o formulrio com algum tipo de script, para validar o
contedo por exemplo, necessrio obter o contedo da propriedade valuedo
objeto no DOM.
password
O input que recebe o atributo type="password" similar ao anterior, do tipo
text, com a diferena de que ele no exibe exatamente o texto digitado pelo
usurio, e sim uma srie de smbolos *ou outro, dependendo do navegador e
sistema operacional.
<input type="password" name="senha">
checkbox
O elemento inputdo tipo checkbox exibe uma caixa para marcao, muito
utilizado quando temos uma opo que pode ser marcada como sim ou no, por
exemplo "Aceito os termos de contrato do usurio", ou "Manter a sesso ativa" em
formulrios de login.
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
19/70
15/8/2014
radio
<p>
<input type="radio" name="idade" id="idade5" value="5">
<label for="idade5">Menos de 5 anos</label>
</p>
<p>
<input type="radio" name="idade" id="idade10" value="10">
<label for="idade10">Menos de 10 anos</label>
</p>
<p>
<input type="radio" name="idade" id="idade15" value="15">
<label for="idade15">Menos de 15 anos</label>
</p>
<p>
<input type="radio" name="idade" id="idade20" value="20">
<label for="idade20">Menos de 20 anos</label>
</p>
Quando desejamos que o usurio escolha somente uma entre uma srie de
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
20/70
15/8/2014
21/70
15/8/2014
<input> e <button>
A tag <input>dos tipos button, submit e reset pode ser substituda pela tag
<button>. Neste caso, o texto do boto passa a ser indicado como contedo
da tag. Ainda assim necessrio especificar o valor do atributo type,
inclusive se ele for button:
<button type="button" name="enviar">Clique aqui</button>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
22/70
15/8/2014
file
<input type="file" name="anexo">
Textarea
Quando desejamos que o usurio insira uma quantidade grande de informaes
textuais, incluindo quebras de linha, necessrio o uso da tag textarea
<textarea name="texto"></textarea>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
23/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
24/70
15/8/2014
25/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
26/70
15/8/2014
number
<input type="number" max="100" step="5">
27/70
15/8/2014
28/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
29/70
15/8/2014
Ou o iPhone:
color
<input type="color" name="cor_olhos">
O elemento inputdo tipo color permite que seja exibido um "color picker" para
o preenchimento do seu valor. O Chrome no Mac, por exemplo, exibe o color
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
30/70
15/8/2014
search
<input type="search" results="10">
31/70
15/8/2014
tel
<input type="tel" name="telefone">
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
32/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
33/70
15/8/2014
autofocus
Sua presena indica que aquele campo deve iniciar com foco quando a pgina for
carregada. O usurio j pode comear a digitar algo sem nenhum clique.
<input name="nome" autofocus>
placeholder
<input type="text" name="nome" placeholder="Insira seu nome">
34/70
15/8/2014
</datalist>
35/70
15/8/2014
So 180 cones no total, das mais diversas razes. Basta olhar o nome da
documentao e usar na pgina.
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
36/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
37/70
15/8/2014
http://getbootstrap.com/components/#glyphicons
A vantagem de se usar fontes para cones que o desenho fica escalvel, como
uma letra. Ele no perde qualidade em nenhum tamanho ou resoluo por ser
vetorial. E, assim como uma letra, podemos aplicar efeitos de texto como sombras
e cores.
A desvantagem que cada cone s pode ter um path no desenho e uma nica
cor. No possvel usar cones complexos com fontes.
38/70
15/8/2014
<form>
<fieldset>
<legend>Dados pessoais</legend>
</fieldset>
<fieldset>
<legend>Carto de crdito</legend>
</fieldset>
<button type="submit" class="btn btn-primary">
Confirmar Pedido
</button>
</form>
2. O primeiro fieldset, dos Dados Pessoais, deve conter os campos Nome, Email,
CPF e um checkbox para o usurio optar ou no por receber spam.
Implemente os campos dentro do primeiro fieldset. Use as classes do Bootstrap
para formulrios. Use tambm um input emaildo HTML5.
<fieldset>
<legend>Dados pessoais</legend>
<div class="form-group">
<label for="nome">Nome completo</label>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
39/70
15/8/2014
Repare que cada campo possui um input e um label. Para agrup-los, usamos um
div form-groupdo Bootstrap. Cada input deve ter uma classe form-control.
Teste a pgina e observe o estilo padro que ganhamos apenas por usar o
Bootstrap.
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
40/70
15/8/2014
3. O fieldset de dados do carto tem trs campos: um com cdigo do carto, outro
com a bandeira do carto e outro com data de validade. Neste ltimo, usaremos o
input month do HTML5.
Implemente os campos dentro do segundo fieldset:
<fieldset>
<legend>Carto de crdito</legend>
<div class="form-group">
<label for="numero-cartao">Nmero - CVV</label>
<input type="text" class="form-control"
id="numero-cartao" name="numero-cartao">
</div>
<div class="form-group">
<label for="bandeira-cartao">Bandeira</label>
<select name="bandeira-cartao" id="bandeira-cartao"
class="form-control">
<option value="master">MasterCard</option>
<option value="visa">VISA</option>
<option value="amex">American Express</option>
</select>
</div>
<div class="form-group">
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
41/70
15/8/2014
<label for="validade-cartao">Validade</label>
<input type="month" class="form-control"
id="validade-cartao" name="validade-cartao">
</div>
</fieldset>
4. Adicione o atributo placeholder do HTML5 nos campos email e CPF com dicas
de preenchimento:
<input type="email" class="form-control" id="email" name="email"
placeholder="email@exemplo.com">
...
<input type="text" class="form-control" id="cpf" name="cpf"
placeholder="000.000.000-00">
5. Vamos incentivar o clique no boto de pedido com um cone alm do texto. Use
os glyphicons do Bootstrap pra isso. Dentro do boto, apenas adicione a linha que
declara o cone:
<button type="submit" class="btn btn-primary">
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
42/70
15/8/2014
43/70
15/8/2014
</div>
</div>
required
Podemos indicar na marcao do formulrio quando um campo de
preenchimento obrigatrio.
<input type="text" name="nome" required>
44/70
15/8/2014
pattern
Conseguimos tambm especificar um formato requerido atravs do atributo
pattern, adicionando uma expresso regular como valor:
<input type="text" pattern="^@\w{2,}" name="usuario_twitter">
Validao no CSS
A maioria dos novos componentes de formulrio e os atributos que funcionam
como validadores de campos na verdade somente aplicam uma pseudo-classe
especfica no campo que no est atendendo ao padro ou requisito especificado.
Essa pseudo-classe a :invalid, e pode ser utilizada para dar um retorno visual
imediato caso o usurio no esteja atendendo aos requisitos dos campos do
formulrio.
:invalid {
outline: 1px solid #cc0000;
}
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
45/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
46/70
15/8/2014
47/70
15/8/2014
Isso nos permite trocar, por exemplo, todo o visual e forma de apresentao dos
erros. E, o melhor, caso o usurio esteja com JavaScript desabilitado, ser
executada a validao padro sem problemas. Um timo fallback. (nas solues
tradicionais de validao dom jQuery, por exemplo, tudo se perde quando o usurio
desabilita JavaScript).
Outra forma de desabilitar a validao, afetando o formulrio inteiro,
colocando o atributo novalidatena tag <form>.
Alm de desabilitar completamente a validao do navegador, podemos apenas
trocar a mensagem de erro mas ainda usar o mecanismo e design padro:
document.querySelector('input[type=email]').oninvalid = function() {
// remove mensagens de erro antigas
this.setCustomValidity("");
// reexecuta validao
if (!this.validity.valid) {
// se invlido, coloca mensagem de erro
this.setCustomValidity("Email invlido");
}
};
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
48/70
15/8/2014
49/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
50/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
51/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
52/70
15/8/2014
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
</div>
Responsivo
Um dos pontos mais interessantes dos grids que eles so responsivos. Isso
quer dizer que podemos aplicar diferentes layouts de colunas no nosso cdigo ao
mesmo tempo e cada um deles vai valer s em determinada situao.
Nos cdigos anteriores, por exemplo, usamos classes como col-md-6. O md
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
53/70
15/8/2014
nessa classe significa que vamos ocupar 6 colunas do grid apenas em telas maiores
que 992px de largura. Em telas menores, automaticamente nosso grid ser de uma
coluna s.
E, claro, temos classes pra outros tamanhos de tela tambm. No Bootstrap
temos essas famlias de classes de grids j prontas:
col-xs- : Extra small. < 768px
col-sm- : Small (tablets). >= 768px
col-md- : Medium (Desktops). >= 992px
col-lg- : Large (Desktops). >= 1200px
Podemos aplicar mais de uma classe ao mesmo tempo no mesmo elemento:
<div class="row">
<div class="col-xs-6 col-sm-4">
...
</div>
<div class="col-xs-6 col-sm-8">
...
</div>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
54/70
15/8/2014
</div>
Nesse exemplo, nosso grid divide no meio (6 pra cada lado) em telas muito
pequenas mas depois divide em 4 e 8 pra telas um pouco maiores.
55/70
15/8/2014
56/70
15/8/2014
57/70
15/8/2014
58/70
15/8/2014
o formulrio. Mas se, em telas maiores, voc quiser mudar essa proporo para
3/12 e 9/12, basta adicionar as classes col-lg-3 e col-lg-9 em conjunto as que
tnhamos antes.
Implemente essa mudana no projeto.
Exemplo:
<form class="col-sm-8 col-lg-9">
59/70
15/8/2014
http://getbootstrap.com/css/#responsive-utilities
60/70
15/8/2014
61/70
15/8/2014
.navbar {
margin: 0;
}
</style>
62/70
15/8/2014
Se voc testar agora, vai notar que o menu some nas telas menores. Para exibi-lo,
precisamos fazer o prximo passo: criar o cone que ativa o menu.
Dentro do navbar-header, logo abaixo do <a>, crie um boto de ativao. O boto
apenas o texto "menu" mas possui a classe navbar-toggle. Alm disso, dois
outros parmetros configuram seu funcionamento com o collapse que usamos
antes:
<button class="navbar-toggle" type="button"
data-target=".navbar-collapse" data-toggle="collapse">
menu
</button>
Se testar agora, vai notar que o menu aparece mas no funciona quando clicado.
porque essa funcionalidade no Bootstrap implementada com JavaScript. A boa
notcia que no precisamos escrever uma linha de cdigo JS sequer, mas para
tudo funcionar precisamos adicionar o JavaScript do Bootstrap.
No fim da pgina, logo antes de fechar o </body>, chame o arquivo do Bootstrap e
do jQuery:
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
63/70
15/8/2014
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
64/70
15/8/2014
7. (opcional) Use cones do glyphicons no menu. Basta coloc-los dentro dos itens
que quiser. Algumas sugestes:
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="glyphicon glyphicon-bullhorn"></span>
Outra sugesto trocar a palavra "menu" que usamos no navbar colapsado pelo
cone do sanduche:
<span class="glyphicon glyphicon-align-justify"></span>
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
65/70
15/8/2014
Se quiser
mudar
a cor do cone,
basta
usar CSS
CSSE JAVASCRIPT
e a propriedade color:
APOSTILA
DESENVOLVIMENTO
WEB
COM HTML,
.navbar .glyphicon {
color: yellow;
}
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
66/70
15/8/2014
67/70
15/8/2014
http://semantic-ui.com/
Pure: Do Yahoo, outra alternativa, mais recente. http://purecss.io/
De maneira geral, esses frameworks permitem fazer as mesmas coisas, mas
cada um com seu estilo. Um boto principal por exemplo:
<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Clique aqui</button>
<!-- Foundation -->
<button class="large button">Clique aqui</button>
<!-- Semantic UI -->
<button class="large ui button">Clique aqui</button>
<!-- Pure -->
<button class="pure-button pure-button-primary pure-button-large">
Clique aqui
</button>
68/70
15/8/2014
CAPTULO ANTERIOR:
PRXIMO CAPTULO:
jQuery
dados
Blog Caelum
Cursos Online
Newsletter
Casa do Cdigo
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
69/70
15/8/2014
http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-19-discussao-em-aula-os-problemas-do-bootstrap-e-quando-nao-usa-lo
70/70