Web geliştirme sürecinde, formlar sıklıkla kullanılır ve kullanıcıların bilgilerini girmeleri için önemli bir arayüz sağlar. CSS kullanarak form tasarlama, kullanıcı deneyimini geliştirmek ve estetik açıdan hoş bir görünüm elde etmek için önemli bir adımdır. İşte CSS ile form tasarlamanın bazı örnekleri ve kodları:
1. Basit Bir Form Tasarımı:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Design</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" placeholder="Kullanıcı Adınızı Girin">
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" placeholder="Şifrenizi Girin">
<input type="submit" value="Giriş Yap">
</form>
</body>
</html>
/* styles.css */
form {
max-width: 300px;
margin: 0 auto;
}
label, input[type="text"], input[type="password"], input[type="submit"] {
display: block;
margin-bottom: 10px;
width: 100%;
}
input[type="text"], input[type="password"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
2. Görsel İşaretlemeli (Checkbox) Form Tasarımı:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Form Design</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label for="terms">
<input type="checkbox" id="terms" name="terms">
Kullanım Koşullarını Kabul Ediyorum
</label>
<input type="submit" value="Kaydol">
</form>
</body>
</html>
/* styles.css */
form {
max-width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
Bu örneklerde, basit bir form tasarımı ve görsel işaretlemeli (checkbox) bir form tasarımı bulunmaktadır. CSS kullanarak form elemanlarını stilize ederken, formun kullanılabilirliğini artırmak ve görsel olarak çekici bir görünüm elde etmek için dikkatli olmak önemlidir.