Você está na página 1de 50

Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

1 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<link rel="stylesheet" href="css/bootstrap.css">

2 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<div class="jumbotron">
<div class="container">
<h1>tima escolha!</h1>
<p>Obrigado por comprar na Mirror Fashion.</p>
</div>
</div>

3 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

4 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkout Mirror Fashion</title>

5 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

</head>
<body>

<h1>tima escolha!</h1>
<p>Obrigado por comprar na Mirror Fashion!
Preencha seus dados para efetivar a compra.</p>

<h2>Sua compra</h2>
<dl>
<dt>Produto</dt>
<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>

6 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<link rel="stylesheet" href="css/bootstrap.css">

div
jumbotron

h1 p
<div> div class="jumbotron"
class="container"

<div class="jumbotron">
<div class="container">

<!-- h1 e p que j tnhamos -->


<h1>tima escolha!</h1>
<p>Obrigado....</p>

</div><!-- fim .container dentro do jumbotron -->


</div><!-- fim .jumbotron -->

7 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<div class="panel panel-default">


<div class="panel-heading">
<h2 class="panel-title">Sua compra</h2>
</div><!-- fim .panel-heading -->
<div class="panel-body">

<!-- ... aqui vai o <dl> que j temos hoje ... -->

</div><!-- fim .panel-body -->


</div><!-- fim .panel -->

div container

panel

<div class="container">

8 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

</div><!-- fim .container da pagina -->

panel-body
<dl>

img/produtos/foto<?= $_POST["id"] ?>-<?= $_POST["cor"]


?>.png

img-responsive
img-thumbnail

<dl>
panel-body

9 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

$_POST["cor"] ?>.png"
class="img-thumbnail img-responsive">

<img src="img/produtos/foto1-verde.png" alt="Fuzzy


Cardigan"
class="img-thumbnail img-responsive">

panel-default

10 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<form>

<form action="/efetivar.php" method="POST">


</form>

method
post

get

<form>

11 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<form action="/efetivar.php" method="POST">

<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">

<input type="submit">
</form>

<label>

label for
nome

label id
for
label
input

<label>

<input>

12 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

type

<input type="text" name="nome_usuario">

name

value

text

<input type="password" name="senha">

input

13 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

true

<input id="contrato" name="contrato" type="checkbox"


value="sim">
<label for="contrato">Aceito os termos do contrato.
</label>

<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>

input

14 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input type="button" name="mostra_dialogo" value="Clique


aqui!">

input

value

<input type="submit" name="enviar" value="Enviar">

input

action <form>

<input type="image" name="botao" src="images/enviar.png"


width="20" height="18">

<input type="reset" name="reset" value="Limpar">

15 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input>
<button>

type

<button type="button" name="enviar">Clique


aqui</button>

<input type="file" name="anexo">

input

enctype="multipart/form-data" <form>

<input type="hidden" name="codigo" value="abc012xyz789">

input

16 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<textarea name="texto"></textarea>

<select>

<select name="cidades">
<option value="bsb">Braslia</option>
<option value="rj">Rio de Janeiro</option>
<option value="sp">So Paulo</option>
</select>

select

multiple

<select multiple name="cidades">


<option value="bsb">Braslia</option>
<option value="rj">Rio de Janeiro</option>
<option value="sp">So Paulo</option>
</select>

17 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<select name="bairro">
<optgroup label="Braslia">
<option value="asan_bsb">Asa Norte</option>
<option value="asas_bsb">Asa Sul</option>
</optgroup>
<optgroup label="So Paulo">
<option value="vlmariana_sp">Vila Mariana</option>
<option value="centro_sp">Centro</option>
</optgroup>
<optgroup label="Rio de Janeiro">
<option value="botafogo_rj">Botafogo</option>
<option value="centro_rj">Centro</option>
</optgroup>
</select>

18 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

input

@ .com

<input type="number" max="100" step="5">

input

19 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input type="url" name="endereco">

input
www
.com

<input type="range" name="volume">

input

value
input number

<input type="date" name="validade">

20 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input type="color" name="cor_olhos">

21 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input type="search" results="10">

input

<input type="tel" name="telefone">

input

22 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input name="nome" autofocus>

23 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input type="text" name="nome" placeholder="Insira seu


nome">

<input type="text" list="cidades" autocomplete="on">


<datalist id="cidades">
<option value="Braslia">
<option value="Rio de Janeiro">
<option value="So Paulo">
</datalist>

inputs
name

24 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<span class="glyphicon glyphicon-thumbs-up"></span>

25 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

26 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<form>
<legend>

btn-primary

<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>

input
email

<fieldset>
<legend>Dados pessoais</legend>

<div class="form-group">
<label for="nome">Nome completo</label>

27 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

name="nome">
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email">
</div>

<div class="form-group">
<label for="cpf">CPF</label>
<input type="text" class="form-control" id="cpf"
name="cpf">
</div>

<div class="checkbox">
<label>
<input type="checkbox" value="sim" name="spam"
checked>
Quero receber spam da Mirror Fashion
</label>
</div>
</fieldset>

form-group
form-control

<fieldset>

28 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<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">
<label for="validade-cartao">Validade</label>
<input type="month" class="form-control"
id="validade-cartao" name="validade-cartao">
</div>
</fieldset>

<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">

<input type="text" class="form-control" id="nome"

29 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<button type="submit" class="btn btn-primary">


<span class="glyphicon glyphicon-thumbs-up"></span>
Confirmar Pedido
</button>

btn-lg

pull-right

<div class="form-group">
<label for="email">Email</label>

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" class="form-control"
id="email" name="email">
</div>
</div>

30 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<input type="text" name="nome" required>

<input type="text" pattern="^@\w{2,}"


name="usuario_twitter">

pattern

31 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

:invalid {
outline: 1px solid #cc0000;
}

submit

submit

32 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

document.querySelector('form input').oninvalid =
function(evt) {
// cancela comportamento padro do browser
evt.preventDefault();

// checa validade e mostra alert


if (!this.validity.valid) {
alert("Nome obrigatrio!");
}
};

33 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

novalidate <form>

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");
}
};

34 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

.form-control:invalid {
border: 1px solid #cc0000;
}

35 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

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");
}
};

36 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<div class="row">
<div class="col-md-4">
...
</div>

<div class="col-md-8">
...
</div>
</div>

<div class="row">
<div class="col-md-4">
...
</div>

<div class="col-md-8">
<div class="row">
<div class="col-md-6">
...
</div>

37 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

...
</div>
</div>
</div>
</div>

38 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<div class="row">
<div class="col-xs-6 col-sm-4">
...
</div>

<div class="col-xs-6 col-sm-8">


...
</div>
</div>

39 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

row

col-sm-4

col-sm-8

<div class="container">
<div class="row">

<div class="col-sm-4">
<div class="panel panel-default">
<!-- ... painel todo aqui ... -->
</div>
</div>

<form class="col-sm-8">
<!-- ... todos os campos aqui ... -->
</form>

40 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

</div> <!-- fim .row -->


</div><!-- fim .container -->

<form ....>
<div class="row">

41 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

....
</fieldset>
<fieldset class="col-md-6">
....
</fieldset>
</div>
<button ....>
</form>

<form class="col-sm-8 col-lg-9">

42 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

hidden-xs <img>

43 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<div class="navbar-header">
<a class="navbar-brand" href="index.php">Mirror
Fashion</a>
</div>
<ul class="nav navbar-nav">
<li><a href="sobre.php">Sobre</a></li>
<li><a href="#">Ajuda</a></li>
<li><a href="#">Perguntas frequentes</a></li>
<li><a href="#">Entre em contato</a></li>
</ul>
</nav>

<style>
.navbar {
margin: 0;
}
</style>

<nav> navbar-static-top

44 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<ul>

<ul class="nav navbar-nav collapse navbar-collapse">

navbar-header <a>

<button class="navbar-toggle" type="button"


data-target=".navbar-collapse"
data-toggle="collapse">
menu
</button>

</body>

45 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>

data-

navbar-default navbar-inverse

46 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<link rel="stylesheet" href="css/bootstrap-flatly.css">

<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>

<span class="glyphicon glyphicon-align-justify"></span>

color

.navbar .glyphicon {
color: yellow;
}

body { padding-top: 70px; }

47 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

48 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

<!-- 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>

Voc encontra a Caelum tambm em:

49 de 50 28/09/2017 14:02
Bootstrap e formulrios HTML5 - Desenvolvimento Web com HTML... https://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-f...

Blog Caelum

Cursos
Online

Facebook

Newsletter

Casa do
Cdigo

Twitter

50 de 50 28/09/2017 14:02