Bu tasarım, bir üye kayıt formu oluşturur. Formda, kullanıcının adı soyadı, e-posta adresi, şifre ve şifre tekrarı girişi için dört adet giriş alanı vardır. Tüm alanlar zorunlu olduğundan, formu göndermeden önce doldurulması gerekir. Formun kenarları yuvarlatılmıştır ve zeminle ayırt edilir. Sayfa arka planı hafif bir gri renktedir ve font, Arial veya benzer bir sans-serif yazı tipidir.
Stil sayfası
/* Genel stiller */
body {
font-family: Arial, sans-serif;
background-color: #F4F4F4;
padding: 0;
margin: 0;
}
/* Form stilleri */
form {
background-color: #FFFFFF;
max-width: 400px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3E8E41;
}Form Öğeleri
<form action="post edilecek sayfa" method="POST">
<h2>Register (Üye Kayıt)</h2>
<label for="name">Ad Soyad</label>
<input type="text" id="name" name="name" required>
<label for="email">E-posta</label>
<input type="email" id="email" name="email" required>
<label for="password">Şifre</label>
<input type="password" id="password" name="password" required>
<label for="confirm-password">Şifre Tekrar</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<input type="submit" value="Kayıt Ol">
</form>Tüm Kodlar bir arada
<!DOCTYPE html>
<html lang="TR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register (Üye Kayıt) Sayfası</title>
<style>
/* Genel stiller */
body {
font-family: Arial, sans-serif;
background-color: #F4F4F4;
padding: 0;
margin: 0;
}
/* Form stilleri */
form {
background-color: #FFFFFF;
max-width: 400px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3E8E41;
}
</style>
</head>
<body>
<form>
<h2>Register (Üye Kayıt)</h2>
<label for="name">Ad Soyad</label>
<input type="text" id="name" name="name" required>
<label for="email">E-posta</label>
<input type="email" id="email" name="email" required>
<label for="password">Şifre</label>
<input type="password" id="password" name="password" required>
<label for="confirm-password">Şifre Tekrar</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<input type="submit" value="Kayıt Ol">
</form>
</body>
</html>Bunu Paylaş
