/* Configurações Gerais e Cores de Fundo */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333333;
padding: 10px;
margin: 10px;
}
/* Estilização dos Títulos */
h2 {
color: #2c3e50;
font-size: 1.3rem;
margin-top: 10px;
margin-left: 10px;
border-bottom: 2px solid #3498db;
padding-bottom: 8px;
}
/* Estilização dos Blocos de Formulário */
form {
background-color: #ffffff;
padding: 15px;
border-radius: 25px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
/* Alinhamento e Estilo dos Textos de Pergunta (Nível e Tecnologias) */
form p {
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
margin-top: 15px;
}
/* Estilização dos Rótulos (Labels) Principais */
label {
font-weight: 600;
display: inline-block;
margin-bottom: 5px;
}
/* Campos de Entrada de Texto, Números, Senha e Seleção */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select {
width: 100%;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Garante que o padding não quebre a largura */
font-size: 1rem;
background-color: #fafafa;
}
/* Efeito de Destaque ao Clicar nos Campos */
input:focus, select:focus {
border-color: #3498db;
outline: none;
background-color: #ffffff;
}
/* Ajustes Específicos para Radio e Checkbox */
input[type="radio"],
input[type="checkbox"] {
margin-right: 8px;
transform: scale(1.1); /* Deixa os botões ligeiramente maiores */
cursor: pointer;
}
/* Alinhamento das Labels do Radio e Checkbox para ficarem na mesma linha */
input[type="radio"] + label,
input[type="checkbox"] + label {
font-weight: normal;
display: inline-block;
cursor: pointer;
margin-bottom: 8px;
}
/* Botão de Envio (Submit) */
input[type="submit"] {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
font-size: 1rem;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-top: 10px;
transition: background-color 0.2s ease;
}
/* Efeito de Passar o Mouse no Botão */
input[type="submit"]:hover {
background-color: #2980b9;
}
/* Linha Divisória Intermediária */
hr {
border: 0;
height: 1px;
background: #cbd5e1;
margin: 40px 0;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Formulários HTML para PHP</title>
<link rel='stylesheet' href='estilo.css'>
</head>
<body>
<h2>Envio de dados do formulário via GET (dados visíveis na URL)</h2>
<form action="lerGET.php" method="get">
<label for="nome_get">Nome:</label>
<input type="text" id="nome_get" name="usuario_nome" value="Robson">
<br><br>
<label for="idade_get">Idade:</label>
<input type="number" id="idade_get" name="usuario_idade" value="46">
<br><br>
<label for="tabuada">Escolha um número para ver a tabuada:</label>
<select id="tabuada" name="tabuada">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br><br>
<input type="submit" value="Enviar via GET">
</form>
<hr>
<h2>Envio de dados do formulário via POST (dados ocultos na URL)</h2>
<form action="lerPOST.php" method="post">
<label for="email_post">E-mail:</label>
<input type="email" id="email_post" name="usuario_email" value="robson.alberghini@cps.sp.gov.br">
<br><br>
<label for="senha_post">Senha:</label>
<input type="password" id="senha_post" name="usuario_senha" value="123456">
<br><br>
<p>Qual o seu nível de experiência?</p>
<input type="radio" id="exp_iniciante" name="nivel_experiencia" value="Iniciante">
<label for="exp_iniciante">Iniciante</label>
<br>
<input type="radio" id="exp_intermediario" name="nivel_experiencia" value="Intermediário" checked>
<label for="exp_intermediario">Intermediário</label>
<br>
<input type="radio" id="exp_avancado" name="nivel_experiencia" value="Avançado">
<label for="exp_avancado">Avançado</label>
<br>
<input type="radio" id="exp_lendario" name="nivel_experiencia" value="Lendário">
<label for="exp_lendario">Lendário</label>
<br><br>
<p>Quais tecnologias você conhece?</p>
<input type="checkbox" id="tecHTML" name="tecHTML" value="HTML" checked>
<label for="tecHTML">HTML</label>
<br>
<input type="checkbox" id="tecCSS" name="tecCSS" value="CSS" checked>
<label for="tecCSS">CSS</label>
<br>
<input type="checkbox" id="tecJS" name="tecJS" value="Javascript" checked>
<label for="tecJS">Javascript</label>
<br>
<input type="checkbox" id="tecPHP" name="tecPHP" value="PHP">
<label for="tecPHP">PHP</label>
<br><br>
<input type="submit" value="Enviar via POST">
</form>
</body>
</html>
lerPOST.php
(Apenas Leitura)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Dados Recebidos - POST</title>
<link rel='stylesheet' href='estilo.css'>
</head>
<body>
<h2>Dados recebidos por POST</h2>
<?php
$email = $_POST['usuario_email'];
$senha = $_POST['usuario_senha'];
echo "<strong>E-mail enviado:</strong> " . $email . "<br>";
echo "<strong>Senha enviada:</strong> " . $senha . "<br><br>";
$nivel = $_POST['nivel_experiencia'];
echo "<strong>Nível de Experiência:</strong> " . $nivel . "<br><br>";
echo "<strong>Tecnologias selecionadas:</strong><br>";
if (isset($_POST['tecHTML'])) {
echo "- HTML<br>";
}
if (isset($_POST['tecCSS'])) {
echo "- CSS<br>";
}
if (isset($_POST['tecJS'])) {
echo "- Javascript<br>";
}
if (isset($_POST['tecPHP'])) {
echo "- PHP<br>";
}
?>
</body>
</html>
lerGET.php
(Apenas Leitura)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Dados Recebidos - GET</title>
<link rel='stylesheet' href='estilo.css'>
</head>
<body>
<h2>Dados recebidos por GET</h2>
<p>Nome: <?php echo $_GET['usuario_nome']; ?></p>
<p>Idade: <?php echo $_GET['usuario_idade']; ?></p>
<hr>
<h2>Tabuada</h2>
<?php
$numero = $_GET['tabuada'];
echo "Tabuada do $numero:<br><br>";
for ($i = 0; $i <= 10; $i++) {
echo $numero . " x " . $i . " = " . ($numero * $i) . "<br>";
}
?>
</body>
</html>