Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Duyarlı (responsive) bir giriş formu oluşturmak için CSS kullanabiliriz. Duyarlı bir tasarım, farklı ekran boyutlarına ve cihazlara uyum sağlayacak şekilde tasarlanmıştır. İşte basit bir HTML ve CSS kullanarak duyarlı bir giriş formu oluşturmanın adımları:
[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form action="#" method="POST">
<h2>Login</h2>
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
[/CODE]
CSS Stil Dosyası (styles.css):
[CODE lang="css" title="css"]body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0#f2f2f2adding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
background-color: #fff;
padding: 20p#fff border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radiu#cccpx;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #f#007bff border: none#fff border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
[/CODE]
Bu#0056b3, bir giriş formu içeren bir HTML belgesi oluşturur ve CSS ile bu formun tarayıcı boyutlarına ve cihazlara duyarlı olmasını sağlar. Form, .container adlı bir div içine yerleştirilmiş ve formun genişliği max-width özelliğiyle sınırlanmıştır. Ek olarak, .input-group ve button stilleri form elemanlarını düzenlemek için kullanılmıştır.
Bu şekilde, tarayıcı boyutu değiştikçe veya farklı cihazlarda görüntülendiğinde formun düzeni otomatik olarak uyum sağlayacaktır. İhtiyacınıza göre stilleri ve yapıyı daha fazla özelleştirebilirsiniz.
[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form action="#" method="POST">
<h2>Login</h2>
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
[/CODE]
CSS Stil Dosyası (styles.css):
[CODE lang="css" title="css"]body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0#f2f2f2adding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
background-color: #fff;
padding: 20p#fff border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radiu#cccpx;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #f#007bff border: none#fff border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
[/CODE]
Bu#0056b3, bir giriş formu içeren bir HTML belgesi oluşturur ve CSS ile bu formun tarayıcı boyutlarına ve cihazlara duyarlı olmasını sağlar. Form, .container adlı bir div içine yerleştirilmiş ve formun genişliği max-width özelliğiyle sınırlanmıştır. Ek olarak, .input-group ve button stilleri form elemanlarını düzenlemek için kullanılmıştır.
Bu şekilde, tarayıcı boyutu değiştikçe veya farklı cihazlarda görüntülendiğinde formun düzeni otomatik olarak uyum sağlayacaktır. İhtiyacınıza göre stilleri ve yapıyı daha fazla özelleştirebilirsiniz.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
