Escolar Documentos
Profissional Documentos
Cultura Documentos
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...
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...
div
jumbotron
h1 p
<div> div class="jumbotron"
class="container"
<div class="jumbotron">
<div class="container">
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...
<!-- ... aqui vai o <dl> que j temos hoje ... -->
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...
panel-body
<dl>
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">
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>
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...
<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
name
value
text
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
<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
value
input
action <form>
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
input
enctype="multipart/form-data" <form>
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
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
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
www
.com
input
value
input number
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...
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
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...
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...
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...
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>
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>
...
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...
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...
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();
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() {
// reexecuta validao
if (!this.validity.valid) {
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() {
// reexecuta validao
if (!this.validity.valid) {
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>
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...
<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>
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>
navbar-header <a>
</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...
color
.navbar .glyphicon {
color: yellow;
}
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...
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
Newsletter
Casa do
Cdigo
50 de 50 28/09/2017 14:02