Formlar: Kullanıcı Girdisi Toplama
Metin kutuları, düğmeler ve daha fazlasıyla basit formlar oluşturun
Formlar: Kullanıcı Girdisi Toplama, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 4 dersten oluşur.
Formlar: Kullanıcı Girdilerini Toplama
Sonraki derse hoş geldiniz! Bugün HTML'de nasıl form oluşturacağınızı öğreneceğiz. Formlar, kullanıcıların web sayfanızda adları veya e-posta adresleri gibi verileri girmesini sağlar.
Formlar Nedir?
Formlar, kullanıcılardan bilgi toplamak için kullanılır. Örneğin, bir hesap oluştururken adınız ve e-posta adresiniz gibi alanları içeren bir form doldurursunuz.
HTML'de formlar <form> etiketi kullanılarak oluşturulur.
Temel Bir Form Oluşturma
Form, <form> etiketi kullanılarak oluşturulur. Bu etiketin içine giriş alanları, düğmeler ve daha fazlasını ekleyebilirsiniz.
Örnek:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
Form Giriş Türleri
HTML formları farklı türlerde giriş alanlarını destekler. Yaygın kullanılanlardan bazıları şunlardır:
text: Kısa metin girişi içinemail: E-posta adresleri içinpassword: Parolalar içinnumber: Sayılar için
Örnek:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
Radyo Düğmeleri ve Onay Kutuları Ekleme
Tek seçenekli tercihler için radyo düğmelerini, birden fazla seçenek için onay kutularını kullanabilirsiniz.
Örnek:
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
Açılır Menüler Ekleme
Kullanıcıların seçenekler listesinden seçim yapabileceği açılır menüler oluşturmak için <select> etiketini kullanabilirsiniz.
Örnek:
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
Form Düğmeleri
Düğmeler, kullanıcıların formu göndermesini veya sıfırlamasını sağlar. Genellikle <button> etiketi kullanılır.
Örnek:
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Formunuza Stil Verme
Formunuzun daha çekici görünmesini sağlamak için CSS kullanarak stil verebilirsiniz. Örneğin alanların boyutunu ayarlayabilir veya renklerini değiştirebilirsiniz.
Örnek:
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
Harika İş!
Tebrikler! Form oluşturmayı, farklı giriş türlerini kullanmayı ve formlara stil vermeyi öğrendiniz. Formlar, kullanıcı verilerini toplamak ve web sayfalarınızı etkileşimli hâle getirmek için gereklidir. Sonraki derste sayfalarınızı daha dinamik hâle getirmek için videolar ve ses gibi çoklu ortamları nasıl kullanacağımızı inceleyeceğiz. Daha fazla yaratıcılığa hazır olun!
Sıkça Sorulan Sorular
“Formlar: Kullanıcı Girdisi Toplama” dersi ücretsiz mi?
Evet — “Formlar: Kullanıcı Girdisi Toplama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 4 dersten oluşur.
“Formlar: Kullanıcı Girdisi Toplama” dersinde ne öğreneceğim?
Metin kutuları, düğmeler ve daha fazlasıyla basit formlar oluşturun HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Formlar: Kullanıcı Girdisi Toplama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tablolar: Verileri Düzenleme
- Formlar: Kullanıcı Girdisi Toplama
- HTML Öznitelikleri
- Çoklu Ortam: Video ve Ses Ekleme