Boot P

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
<link rel="stylesheet" href="css/bootstrap.css">
2 de 50 28/09/2017 14:02
<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
4 de 50 28/09/2017 14:02
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkout Mirror Fashion</title>
5 de 50 28/09/2017 14:02
</head>
<body>
<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
<link rel="stylesheet" href="css/bootstrap.css">
div
jumbotron
h1 p
<div> div class="jumbotron"
class="container"
<div class="jumbotron">


<p>Obrigado....</p>
</div>

</div>
7 de 50 28/09/2017 14:02
<div class="panel panel-default">

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

</div>

</div>
div container
panel
8 de 50 28/09/2017 14:02
</div>
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
$_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
<form>
<form action="/efetivar.php" method="POST">

</form>
method
post
get
<form>
11 de 50 28/09/2017 14:02
<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
type
<input type="text" name="nome_usuario">
name
value
text
<input type="password" name="senha">
input
13 de 50 28/09/2017 14:02
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">
</p>
<p>
value="15">
</p>
<p>
value="20">
</p>
input
14 de 50 28/09/2017 14:02
<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
<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
<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
<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
input
@ .com
<input type="number" max="100" step="5">
input
19 de 50 28/09/2017 14:02
<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
<input type="color" name="cor_olhos">
21 de 50 28/09/2017 14:02
<input type="search" results="10">
input
<input type="tel" name="telefone">
input
22 de 50 28/09/2017 14:02
<input name="nome" autofocus>
23 de 50 28/09/2017 14:02
<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
<span class="glyphicon glyphicon-thumbs-up"></span>
25 de 50 28/09/2017 14:02
26 de 50 28/09/2017 14:02
<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
name="nome">
</div>
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email">
</div>
<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
<label for="numero-cartao">Nmero - CVV</label>
<input type="text" class="form-control"
id="numero-cartao" name="numero-cartao">
</div>
<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>
<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
<button type="submit" class="btn btn-primary">

<span class="glyphicon glyphicon-thumbs-up"></span>
Confirmar Pedido
</button>
btn-lg
pull-right
<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
<input type="text" name="nome" required>
<input type="text" pattern="^@\w{2,}"

name="usuario_twitter">
pattern
31 de 50 28/09/2017 14:02
:invalid {
outline: 1px solid #cc0000;
}
submit
submit
32 de 50 28/09/2017 14:02
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
novalidate <form>
document.querySelector('input[type=email]').oninvalid =
function() {
// remove mensagens de erro antigas

this.setCustomValidity("");
// reexecuta validao
// se invlido, coloca mensagem de erro

this.setCustomValidity("Email invlido");
}
};
34 de 50 28/09/2017 14:02
.form-control:invalid {
border: 1px solid #cc0000;
}
35 de 50 28/09/2017 14:02
document.querySelector('input[type=email]').oninvalid =
function() {
// remove mensagens de erro antigas

this.setCustomValidity("");
// reexecuta validao
// se invlido, coloca mensagem de erro

this.setCustomValidity("Email invlido");
}
};
36 de 50 28/09/2017 14:02
<div class="row">
<div class="col-md-4">
...
</div>
...
</div>
</div>
<div class="row">
...
</div>
<div class="row">
...
</div>
37 de 50 28/09/2017 14:02
...
</div>
</div>
</div>
</div>
38 de 50 28/09/2017 14:02
<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
row
col-sm-4
col-sm-8
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">

</div>
</div>
<form class="col-sm-8">

</form>
40 de 50 28/09/2017 14:02
</div> 

</div>
<form ....>
<div class="row">
41 de 50 28/09/2017 14:02
....
</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
hidden-xs <img>
43 de 50 28/09/2017 14:02
<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
<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
<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
<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
48 de 50 28/09/2017 14:02


<button class="btn btn-primary btn-lg">Clique
aqui</button>


<button class="large button">Clique aqui</button>


<button class="large ui button">Clique aqui</button>


<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
Blog Caelum
Cursos
Online
Facebook
Newsletter
Casa do
Cdigo
Twitter
50 de 50 28/09/2017 14:02

Boot P

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Boot P

Transféré par

Droits d'auteur :

Formats disponibles

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

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

</div>

<div class="panel panel-default">

</div>

</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<select multiple name="cidades">

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

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

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

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

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

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

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

<input name="nome" autofocus>

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

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

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

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

<input type="email" class="form-control" id="email"

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

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

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

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

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

// checa validade e mostra alert

// remove mensagens de erro antigas

// se invlido, coloca mensagem de erro

// remove mensagens de erro antigas

// se invlido, coloca mensagem de erro

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

</div>

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

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

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

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

<span class="glyphicon glyphicon-home"></span>

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

body { padding-top: 70px; }

Voc encontra a Caelum tambm em:

Vous aimerez peut-être aussi