Bölüm 14 (HTML Dersleri), Formlar ve Girişler

Bölüm 14 (HTML Dersleri), Formlar ve Girişler

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.

HTML, Formlar ve Girişler

En önemli konu bence. Benim en çok zorlandığım konuydu zamanında yanlış öğrendiğim için. Ama siz, daha şanslısınız.

HTML formları bir server’a veya kurucuya Türkçesi ile, veri göndermek için kullanılır. Daha doğrusu kullanıcıdan veri elde etmek için.

Bir form, giriş elemanları içerebilir. Yazı alanları(text fields), checkbox’lar(çoklu seçim kutuları, üzerlerinde tik olabilen kare kutucuklar), radio-button’lar (radyo butonları tekli seçime izin verirler), submit button’lar (onaylama butonları, girilen verileri göndermeye yarar) ve daha fazlası gibi… Bir form, seçim listeleri, textarea, fieldset, legend ve etiket elemanları da içerebilir. Hepsi açıklanacak bu derste.

Misal;

<form>
.
input elements
.
</form>

HTML Formları – Giriş Elemanları

En önemli form elemanlarından biri giriş elemanlarıdır.

Giriş elementleri kullanıcının bilgisini seçmesini ya da girmesini sağlar.

Bir giriş elemanı type özelliğine göre değişiklik gösterir. Bir giriş elemanı yazı alanı girebilmek için, kendisine uyan şıklara tik atmak için, şifre girmek için password yani, radio button’dan seçim yapmak için, girdiği verileri onaylamak ya da resetlemek gibi daha fazla şey olabilir.

En çok kullanılan girişler aşağıda anlatılacaktır.

Text Fields / Yazı Alanları

<input type=”text” /> Bir kullanıcının yazı yazabileceği bir satırlık giriş alanı tanımlar.

Misal;

<form>
First name: <input type=”text” name=”firstname” /><br />
Last name: <input type=”text” name=”lastname” />
</form>

Sonucu da;

First name:
Last name:

gibidir.

Uygulama yapmalısınız. Veya aşağıdaki uygulamaları denemelisiniz.

İpucu; form ‘un kendisi gözükmez. Ayrıca varsayılan text alanı 20 karakterdir.

Şifre alanı /Password Field

<input type=”password” /> bir şifre alanı tanımlar.

Misal;

<form>
Password: <input type=”password” name=”pwd” />
</form>

Sonucu da;

Password:

gibidir.

İpucu; password alanındaki girişler maskelenmiş olarak gözükecektir.

Radyo butonları /Radio Buttons

<input type=”radio” /> bir radyo butonu tanımlar. Seçimlerden bir tane yapılmasına izin verir.

Misal;

<form>

<input type=”radio” name=”cinsiyet” value=”erkek” /> Erkek<br />

<input type=”radio” name=”cinsiyet” value=”kadın” />Kadın<br />

</form>

Sonucu da;

Erkek

Kadın

Tik kutucukları / Checkboxes

<input type=”checkbox” /> bir kutucuk tanımlar. Kullanıcıya birden fazla seçenek seçmelerini/seçebilmelerine izin verir/sağlar.

Misal;

<form>
<input type=”checkbox” name=”Taşıt” value=”Bisiklet” /> Bisikletim var<br />
<input type=”checkbox” name=”Taşıt” value=”Araba” /> Arabam var
</form>

Sonucu da;

Bisikletim var

Arabam var

Onay butonu /Submit Button

<input type=”submit” /> bir onay butonunu tanımlar.

Bir onay butonu form verilerini server’a yani kurucuya gönderimi için kullanılır. Veri form’un action özelliğinde belirtilen sayfaya gönderilir. Action özelliğinde belirtilen dosya genel olarak alınan girdilerle bir işlemde bulunur.

Misal;

<form name=”input” action=”html_form_action.asp” method=”get”>
Kullanıcı adı: <input type=”text” name=”kullanıcı” />
<input type=”submit” value=”Onay” />
</form>

Sonucu da;

Kullanıcı adı:

Yukarıdaki yere bir dizi karakter girdiğinizde ya da girerseniz ve onay butonuna basarsanız, tarayıcı verilerinizi html_form_action.asp ‘ye gönderir. Sayfa da alınan girişleri gösterecektir.

Input uygulamaları w3schools.com online editöründen

Radyo butonları
Radyo butonu oluşturma uygulaması.

Kutucuklar
Kutucuk uygulamaları, çoklu seçim için…

Basit açılır liste
Basit açılır liste uygulaması…

Öntanımlı değeri olan açılır liste
Öntanımlı değeri olan açılır liste uygulaması.

Textarea
Çok satırlı, ve sınırsız sayıda kullanıcı girişine izin veren textarea uygulaması

Buton oluşturma
Buton oluşturma uygulaması.

Form Örnekleri

Form verisi etrafındaki Fieldset
Bir form içindeki elementlerin çevresine çerçeve uygulaması.

Yazı alanlı form ve onay butonu
Çift girişli form alanı ve onay butonu ile gönderim uygulaması

Kutucuklu form
İki kutucuklu form ve onay butonlu uygulama.

Radyo butonlu form
2 radyo butonlu ve onay butonlu form.

Bir form ile e-posta gönderimi
Bir formdan e-posta gönderimi.

HTML Form Etiketleri