HTML, form kullanıcıların bir web sitesiyle etkileşime girmesine ve bir sunucuya veri göndermesine izin veren web geliştirmenin çok önemli bir parçasıdır. kullanıcı bilgilerini toplamak, kullanıcı girişini işlemek ve bir web sitesinde kullanıcı işlemlerini etkinleştirmek Form gibi çok çeşitli amaçlar için kullanılır. form Bu makalede, HTML'de yaygın olarak kullanılan giriş alanlarının, seçim öğelerinin, metin alanlarının ve düğmelerin özelliklerini ve farklı türlerini keşfedeceğiz form.
Giriş Alanları
<input type="text">: Kullanıcıların alfasayısal karakterler girebileceği bir metin giriş alanı oluşturur.<input type="password">: Girilen karakterleri maskeleyen bir parola giriş alanı görüntüler.<input type="email">: Geçerli bir e-posta adresi gerektiren giriş alanları için e-posta doğrulaması sağlar.<input type="number">: Girişi yalnızca sayısal değerlerle sınırlar.<input type="checkbox">: Kullanıcıların seçebileceği veya seçimini kaldırabileceği bir onay kutusunu temsil eder.<input type="radio">: Kullanıcıların bir grup seçenek arasından bir seçeneği belirlemesine izin veren bir radyo düğmesini temsil eder.<input type="file">: Kullanıcıların dosya seçmesini ve yüklemesini sağlar.<input type="submit">form: Tıklandığında gönderen bir düğme görüntüler .<input type="reset">form: Başlangıç durumuna sıfırlayan bir düğme görüntüler .<input type="date">: Tarihleri seçmek için bir tarih seçici sağlar.<input type="time">: Kullanıcıların zaman değerleri girmesine izin verir.
Öğeleri Seçin
<select>: Seçilebilir seçeneklerle bir açılır menü oluşturur.<option>: Açılır menüde,<select>etiketin içine yerleştirilmiş bir seçeneği tanımlar.<optgroup>: Açılır menüde ilgili seçenekleri bir arada gruplandırır.<select multiple>: Tıklarken Ctrl tuşunu(veya Mac'te Command tuşunu) basılı tutarak kullanıcıların aynı anda birden çok seçeneği belirlemesine olanak tanır.
metin alanları
<textarea>: Kullanıcıların daha uzun metin blokları girip düzenleyebileceği çok satırlı bir metin giriş alanı oluşturur. Boyutlarını tanımlamak için rows ve gibi özniteliklerle yeniden boyutlandırılabilir ve yapılandırılabilir. cols
düğmeler
<button>: Bir dosya içinde çeşitli eylemleri tetikleyebilen bir düğmeyi temsil eder form. form JavaScript işlevi başına bir e- posta göndermek form veya farklı bir sayfaya gitmek için kullanılabilir .
Örnek kullanım:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
Bu örnek, alanlar,, ve bir düğme form dahil olmak üzere çeşitli öğelerin kullanımını gösterir. Özel gereksinimlerinize göre öğeleri ve nitelikleri özelleştirmekten çekinmeyin. input textarea checkbox select dropdown submit form