HTML formları, kullanıcıların web sitelerindeki bilgileri göndermelerine ve web sitesi sahiplerinin bu bilgileri alıp işlemelerine olanak tanır. Bu formlar için bir dizi form elemanı vardır ve bunlar genellikle kullanıcıların verilerini almak veya kullanıcılarla etkileşimde bulunmak için kullanılır.
İşte bazı temel HTML form elemanları ve kullanımları:
<form>: Bir formun başlangıcını belirtir. Form elemanları bu etiketin arasına yerleştirilir.
Örnek:
<form action="/form-submit" method="POST"> <!-- Form elemanları buraya gelecek --> </form>
<input>: En sık kullanılan form elemanıdır ve kullanıcının girdiği verileri almak için kullanılır.typeözelliği ile farklı türlerde input alanları oluşturabilirsiniz.
Örnek:
<input type="text" name="username" placeholder="Kullanıcı Adı"> <input type="password" name="password" placeholder="Şifre"> <input type="email" name="email" placeholder="E-posta"> <input type="checkbox" name="agree" value="yes"> Kullanım Şartlarını Kabul Ediyorum <input type="radio" name="gender" value="male"> Erkek <input type="radio" name="gender" value="female"> Kadın <input type="submit" value="Gönder">
<label>: Form elemanlarının yanında yer alan etiketlerdir. Kullanıcılara hangi veriyi girmeleri gerektiğini açıklamak için kullanılır.
Örnek:
<label for="username">Kullanıcı Adı:</label> <input type="text" id="username" name="username">
<select>ve<option>: Seçeneklerin yer aldığı bir açılır menü oluşturmak için kullanılır.
Örnek:
<label for="country">Ülke:</label> <select id="country" name="country"> <option value="turkey">Türkiye</option> <option value="usa">Amerika Birleşik Devletleri</option> <option value="japan">Japonya</option> </select>
<textarea>: Kullanıcıların uzun metinleri girerek göndermelerine olanak tanır.
Örnek:
<label for="message">Mesajınız:</label> <textarea id="message" name="message"></textarea>
Bu sadece temel HTML form elemanlarıdır ve daha fazla form elemanı mevcuttur. Form elemanlarının tüm özelliklerini ve kullanımlarını incelemek için HTML belgeleri veya kaynaklarına başvurabilirsiniz.
Örnek bir sayfa
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Örnek Form Sayfası</title>
</head>
<body>
<h1>Örnek Form Sayfası</h1>
<form action="/form-submit" method="POST">
<label for="name">İsim:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Mesaj:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<br>
<input type="submit" value="Gönder">
</form>
</body>
</html>
Bu örnekte, kullanıcıların bir isim, e-posta adresi ve mesaj göndermelerine olanak tanıyan basit bir form yer almaktadır. Form elemanlarının yanında <label> etiketleri kullanılarak, kullanıcıların hangi bilgiyi girmeleri gerektiği açıklanmıştır. Ayrıca, required özelliği ile kullanıcıların formu gönderebilmeleri için tüm alanları doldurmaları gerektiği belirtilmiştir.Bunu Paylaş
