HTML & CSS için yeni başlayanlar için

HTML ve CSS'ye Giriş (Bölüm 13): Formlar (1)

Eğitimdeki tüm videolar HTML ve CSS için başlangıç kılavuzu

Formlarlar form öğesi aracılığıyla tanımlanır. form içinde bulunan tüm öğeler, ilgili formun bir parçası olarak kabul edilir.

<form>
…
</form>

Başlangıç <form> etiketi içinde action özniteliği beklenir. Bu aracılığıyla form verilerinin ne olacağı belirtilir. Genellikle bu, bir PHP uygulaması olur.

<form method="post" action="form.php">
…
</form>



Belirtilen dosyanın bulunabilmesine dikkat edin. Doğru yolu belirtmelisiniz.

Bir betik yerine bir e-posta adresi de belirtilebilir.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>



Bu durumda form verileri e-posta yoluyla gönderilir. Bu elbette zarif değil, bu yüzden çoğu zaman betik seçeneğine başvurulur. Ancak elinizde şu anda bir betik yoksa, formun gönderimini acil olarak e-posta ile de yapabilirsiniz.

form-Öğesi için başka bir önemli öznitelik de method'dur. Bu, form içeriğinin gönderilmesi için HTTP aktarım yöntemini belirler. İki farklı seçenek mevcuttur.

post = Form verileri burada belirtilen adrese iki adımda iletilir. İlk olarak tarayıcı belirtilen adresi ziyaret eder. Bu başarılı olduktan sonra form verileri betiğe aktarılır.

get = Bu yöntemde form verileri, action özniteliğine atanmış olan URL'nin sonuna eklenir. Form verileri böylece tarayıcının adres çubuğunda da görülebilir.

Tabii ki, form verilerinin gönderiminde hangi seçeneğin kullanılması gerektiği sorusu ortaya çıkar. İlkesel olarak her ikisini de kullanabilirsiniz. Ancak büyük veri miktarları ve sunucuya dosya yükleme durumunda, form verilerinin gönderiminde post'a başvurmanız önerilir.

Basit Form Alanları

Şimdiye kadar sadece formun dış yapısı tanımlandı. Ancak tarayıcıda formun kendisi henüz görünmüyor.

<form method="post" action="form.php">
 …
 </form>



Şimdi formu içerikle/doldurmak gerekiyor.

Muhtemelen en sık kullanılan alan türü, tek satırlı giriş alanıdır. Örneğin, isimler, soyadlar ve e-posta adreslerini sormak için bunu kullanabilirsiniz. Tek satırlı giriş alanları şu şekilde tanımlanır:

<input type="text" name="vorname" />



input öğesine type="text" özniteliği değeri atandı. Ayrıca her giriş alanına bir iç isim vermelisiniz. Bu isim, belgede benzersiz olmalıdır. Özellikle betikle form verilerinin işlenmesi söz konusu olduğunda önemlidir. İsim içinde boşluk veya özel karakterler kullanmayın.

Tarayıcıda sonucu gördüğünüzde, aşağıdaki sonuç ortaya çıkacaktır:

HTML & CSS için başlangıç ​​seviyesi (Bölüm 13): Formlar (1)

Şu aşamada çok göz alıcı görünmüyor. Ancak metin alanına tıkladığınızda, oraya giriş yapabileceğinizi fark edeceksiniz.

HTML ve CSS'ye Giriş (Bölüm 13): Formlar (1)

Ziyaretçilerin alanlara ne girmeleri gerektiğini bilmesi için tabii ki bir etiket eksik.

İsim: <input type="text" name="vorname" />



Buradaki tarayıcıya bakarak sağlanan istenen sonucu tekrar elde edebilirsiniz.

HTML & CSS için başlangıç ​​seviyesi (Bölüm 13): Formlar (1)

Özniteliğe size ile alan genişliğini belirleyebilirsiniz.

İsim: <input type="text" name="vorname" size="30" />
<br />
Posta Kodu: <input type="text" name="plz" size="5" />



size özniteliğine istenilen alan genişliği atanır.

HTML ve CSS'ye Yeni Başlayanlar için (Bölüm 13): Formlar (1)

Burada, 5 tam beş karaktere denk gelir. Bu bağlamda, maxlength özniteliği de ilginçtir. Çünkü burada, alanlara girilebilecek maksimum karakter sayısı belirtilir. Buna ilişkin bir örnek:

İsim: <input type="text" name="vorname" size="30" maxlength="40" />



maxlength'te belirtilen değer, size'da belirtilen değerden büyükse, daha uzun girişler otomatik olarak alandan kaydırılacaktır.

value özniteliği aracılığıyla bir alanın önceden doldurulmuş olmasını sağlayabilirsiniz.

Ad: <input type="text" name="vorname" value="Adınız" />



value atanan değer, alanın önceden doldurulması olarak görülmelidir.

HTML & CSS'ye Giriş (Bölüm 13): Formlar (1)



Kullanıcılar bu önceden doldurulmuş değeri silebilirler.

Ayrıca alanlardan değerlerin silinmesini engelleyebilirsiniz. Bu durumda, aslında bir giriş alanı olmayan bir giriş alanı tanımlarsınız. Aslında bu tür alanlar genellikle çıktılar için kullanılır. Örneğin, betimlenen değerlerin betimlenmesi için bir betimleme scriptiyle ilgilenmek ilginç olabilir. Bir hesap makinesini düşünün. Ayrıca ziyaretçiler tarafından daha fazla değiştirilemeyen bir metinle alanı da manuel olarak doldurabilirsiniz. (Not: Euro işareti PDF görünümünde maalesef doğru şekilde görüntülenmez).

<input name="fiyat" type="text" value="€ 699.-" readonly />



Bir alanı salt okunur olarak ayarlamak için readonly özniteliğini atarsınız. Sonucu kontrol etmek için tekrar bir bakış:

HTML ve CSS'ye Giriş (Bölüm 13): Formlar (1)



Ön tanımlı metin hemen görülebilir. Ancak bu metin silinemez.

Şifre alanları tanımlama

Evet, şifre alanlarını biliyorsunuz. Kaydolduğunuz her yerde bir şifre belirtmeniz gerekiyor. (Genellikle iki kez girmeniz gerekebilir).

HTML ve CSS'ye Giriş (Bölüm 13): Formlar (1)

Giriş alanına girilen veriler görünmezdir, ancak tarayıcı tarafından otomatik olarak yıldızlar/noktalarla değiştirilir. Bu yöntemin avantajı: Belki de size şifrenizi giriş sırasında omzunuzun üstünden izleyen insanlar, şifreyi çözemeyecekler. Ancak şifre alanlarının otomatik olarak güvenli olduğu yanılgısıyla yanılgıya düşülmemelidir. Gerçekte, şifreler normal HTTP'de form gönderildiğinde düz metin olarak iletilir.

Şifre alanları şu şekilde tanımlanır:

<input type="password" name="şifre" />



type özniteliğine password değeri atandı. Sonucu kontrol etmek için tekrar bir bakış.

HTML ve CSS'ye Giriş (Bölüm 13): Formlar (1)



Oraya bir şeyler yazarsanız, tarayıcılar direkt olarak giriş sırasında bunu anlaşılmaz hale getirir.