Üçüncü bir Bootstrap örnek uygulaması olarak, bir "İletişim" formu oluşturabiliriz. Bu form, kullanıcıların iletişim bilgilerini göndermesine olanak tanıyacak. İşte adım adım nasıl yapabileceğiniz:
Adım 1: Bootstrap Kütüphanesini Dahil Etme
HTML dosyanızın <head> kısmına Bootstrap CSS ve JS dosyalarını ekleyin:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İletişim Formu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
Adım 2: İletişim Formu Oluşturma
<body> kısmına aşağıdaki kodu ekleyin. Bu kod, bir iletişim formu oluşturur.
<div class="container mt-5">
<h2 class="text-center mb-4">Bize Ulaşın</h2>
<form>
<div class="form-group">
<label for="name">Adınız</label>
<input type="text" class="form-control" id="name" placeholder="Adınızı girin" required>
</div>
<div class="form-group">
<label for="email">E-posta Adresiniz</label>
<input type="email" class="form-control" id="email" placeholder="E-posta adresinizi girin" required>
</div>
<div class="form-group">
<label for="message">Mesajınız</label>
<textarea class="form-control" id="message" rows="4" placeholder="Mesajınızı buraya yazın" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
Adım 3: Kapatma Etiketi
HTML belgenizi kapatmayı unutmayın:
</body>
</html>
Tam Kod
Aşağıda tam HTML kodunu bulabilirsiniz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İletişim Formu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-4">Bize Ulaşın</h2>
<form>
<div class="form-group">
<label for="name">Adınız</label>
<input type="text" class="form-control" id="name" placeholder="Adınızı girin" required>
</div>
<div class="form-group">
<label for="email">E-posta Adresiniz</label>
<input type="email" class="form-control" id="email" placeholder="E-posta adresinizi girin" required>
</div>
<div class="form-group">
<label for="message">Mesajınız</label>
<textarea class="form-control" id="message" rows="4" placeholder="Mesajınızı buraya yazın" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
</body>
</html>
Uygulamayı Çalıştırma
- Yukarıdaki kodu bir
.htmldosyası olarak kaydedin (örneğincontact.html). - Dosyayı bir tarayıcıda açın.
Bu örnek ile Bootstrap kullanarak basit bir iletişim formu oluşturmuş oldunuz. Formunuzu daha da geliştirmek için doğrulama veya stil eklemeyi düşünebilirsiniz!