Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
atividade72908
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Atividade da Aula 05
Crie uma página HTML que contenha um formulário com os dados para inserção de uma passagem. Esse formulário deve possuir todos os campos que foram criados no bando de dados.
Código html
<!DOCTYPE html>
<html long="pt">
<head>
<meta charset="UTf-8"/>
<meta nome="viewport" content="width=device-width, initial-scale=1.0"/>
<title>passagem aérea</title>
<link rel="stylesheet" href="main.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2? família=Poppins:wght@400;500;600;700;900&display=swap"
rel="stylesheet">
</head>
<body>
<div class="conteiner">
<div class="header">
<h3>Dados da passagem</h3>
</div>
<form id="form" class="form">
<div class="form-control ">
<label for="username">Nome</label>
<input type="text" id="username"
placeholder="digite seu nome"/>
<i class="fas fa-exclamation-circle"></i>
<i class="fas fa-check-circle"></i>
<br>
</div>
<div class="form-control">
<label for="cidade">Cidade de destino</label>
<input type="text" id="cidade"
placeholder="digite a cidade de destino"/>
<i class="fas fa-exclamation-circle"></i>
<i class="fas fa-check-circle"></i>
<br>
</div>
<div class="form-control ">
<label for="Cidade">Cidade de origem</label>
<input type="text" id="Cidade"
placeholder="digitea a Cidade de origem"/>
<i class="fas fa-exclamation-circle"></i>
<i class="fas fa-check-circle"></i>
</div>
<div class="form-control ">
<label for="número">Número da proltona</label>
<input type="number" id="número"
placeholder="insira número da proltona"/>
<i class="fas fa-exclamation-circle"></i>
<i class="fas fa-check-circle"></i>
</div>
<div class="form-control">
<label for="data">Data</label>
<input type="date" id="data" value="2022-11-01"/><br>
</div>
<div class="form-control">
<label for="hora">Hora da viagem</label>
<input type="time" id="hora" name="hora" min="08:00" max="22:00" required>
<small>o horário de expediente é das 8h às 22h</small><br>
</div>
<button type="submit">Enviar</button>
<script src="https://kit.fontawesome.com/f9e19193d6.js"
crossorigin="anonymous"></script>
<script src="./main.js"></script>
</body>
</html>
Codigo css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
width: 100%;
min-height: 100vh;
background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: #fafafa;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width: 400px;
max-width: 100%;
overflow: hidden;
}
.header {
background-color: #eee;
padding: 20px;
}
.form {
padding: 20px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
display: block;
border-radius: 10px;
font-size: 14px;
width: 100%;
padding: 10px;
}
.form-control i {
position: absolute;
top: 45px;
right: 10px;
visibility: hidden;
}
.form-control small {
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form button {
background-color: #fc00ff;
border: 2px solid #fc00ff;
color: #fff;
font-size: 14px;
width: 100%;
border-radius: 10px;
padding: 10px;
}
/* Error and Success */
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control.error small {
visibility: visible;
color: #e74c3c;
}
Como enviar para correção?
Crie a página em um editor de sua preferência
Salve (ou exporte) em HTML
Envie o arquivo HTML para correção
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar