Formulários em websites são essenciais para a interação e comunicação na
web. Eles permitem que os usuários enviem informações, como dados
pessoais, comentários e pedidos, diretamente para os servidores web. Isso
facilita uma variedade de funções, desde o login em plataformas até a
realização de compras online.
HTML vs HTML5:
HTML é a linguagem de marcação padrão para criar páginas web. Ela define a
estrutura e o layout de uma página web usando uma variedade de elementos e
tags.
HTML5 é a quinta e mais recente versão do HTML, que introduz novos
elementos e APIs para suportar multimídia e gráficos avançados na web, sem a
necessidade de plugins externos. HTML5 também oferece novos tipos de
formulários, como date, time, email, e url, melhorando a experiência do usuário.
Contextualização: A atividade de criar um formulário HTML visa desenvolver
habilidades práticas em web design e programação. O objetivo é aprender a
implementar um meio eficaz de coleta de dados, garantindo que a informação
seja coletada de forma estruturada e possa ser facilmente processada pelo
servidor. Além disso, busca-se entender as melhores práticas de usabilidade e
acessibilidade, essenciais para a criação de formulários que proporcionem uma
boa experiência ao usuário.
CÓDIGO ELABORADO:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário</title>
<style>
body {
background-color: gray;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
margin-left: 20px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"],
input[type="reset"] {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Formulário</h1>
<form action="/processar-dados" method="POST">
<!-- Campos do formulário -->
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="telefone">Telefone:</label>
<input type="tel" id="telefone" name="telefone">
<br>
<label for="dataNascimento">Data de Nascimento:</label>
<input type="date" id="dataNascimento" name="dataNascimento">
<br>
<!-- Botão de envio -->
<input type="submit" value="Enviar">
<!-- Botão de limpar -->
<input type="reset" value="Limpar">
</form>
</body>
</html>
PARTE 2:
Desde já peço humildes desculpas, pois infelizmente não achei no site o botão
New Pen para criar um arquivo css. Como descrito nas instruções abaixo:
“Passo 3: Estilize com CSS Agora, crie o arquivo de estilo. Clique no botão "New Pen" acima do
editor HTML à esquerda. Insira o código CSS no novo painel.”
Então implementei o css dentro do mesmo arquivo HTML.
