Html Form Alanları (11. Form, İnput, Type, Name, Value ) | BilgeBank
Pazar , Ekim 22 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML Dersleri / Html Form Alanları (11. Form, İnput, Type, Name, Value )

Html Form Alanları (11. Form, İnput, Type, Name, Value )

Html’de form alanlarını kullanıcıların bilgilerini almak için kullanırız bu bilgiler sayesinde kullanıcılar çeşitli bilgileri sayfanıza ekleyebilirler kullanıcı giriş alanlarından tutun kayıt formu, anket formu gibi birçok yerde form özelliğini kullanırız form alanı oluşturmak için <form> etiketini kullanırız ve bunun içinde <input> alanlarımız olur input alanları ile kullanıcının veri girişini yapabileceği alanları oluştururuz. Form alanı oluştururken 2 parametreye ihtiyacımız olur action ve method parametreleridir bunlar formun nereye kaydedileceği ve hangi format olacağını belirler.

  • Action : Form alanında kullanıcının girdiği verilerin hangi sayfada işleneceğini gösterir. Örneğin action=”üyekaydi.php” yazılırsa girilen verilerin üyekaydi.php sayfasında işlemek için o dosyaya gönderir.
  • Method : Verilerin gönderilme biçimini belirler GET veya POST parametreleri kullanılır. GET ile gönderim yaptığınızda adres çubuğunda aramanızla ilgili bilgiler yer alır şifre gibi gizli bilgiler bu metotla kullanılmaz. POST ise daha güvenli bir veri gönderme yöntemidir gizli bilgilerin alınması veya gönderilmesinde POST yöntemi tercih edilmelidir.

<input> etiketimizde type=”” ve name=””  değerlerini bildirmemiz gerekir bu değerler sayesinde alanın tipini ve ismini belirleyerek alanın özelliklerini tanımlarız.

  • Type : Parametresini verdiğimiz özellikle o alanın nasıl bir yapıya sahip olmasını belirliyoruz text dersek ufak bir kullanıcı adı yazmak vb. gibi kısa bilgilerin yazılacağı bir alan oluştururuz type alanına password tanımı verirsek bu alanın parola alanı olmasını ve buraya yazılan yazıların *** biçiminde görünmesini sağlarız veya radio tanımını verirsek bu alanın seçenek alanı olmasını belirleriz bunlar gibi birçok tipi konu altında görebilirsiniz örnekte en çok kullanacağımız tiplerle bir çalışma yapacağız.
  • Name : Parametresine vermiş olduğumuz isim o alanın ismi olur ve veri alırken veya veri çekerken o alana vermiş olduğumuz isim değeri ile tanımlama yaparız programlama dillerine başladığınızda bu alanın önemini daha iyi anlayacaksınız.

Form oluşturmayı daha iyi anlamak için aşağıdaki örneğe göz atabilirsiniz.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Örneğimizde form alanımızı oluşturduk ve form alanımızın align=”center” komutu ile form alanımızı ortaladık.  action=”” komutunu boş bıraktık bu alana doldurulan form bilgilerinin nereye gitmesini istiyorsak oranın yolunu belirtiyoruz. method=”” Komutumuzda boş burada gönderim türünü belirtiyoruz GET veya POST metotları ile.

Adınız başlığında bir alan açtık ve hemen yanına text tipinde bir yazı alanı oluşturduk bu kısımda kullanıcının isim girmesini istedik. name alanına isimalani ismini  verdik veri çekerken ve veri gönderirken bu isimalani ismi ile istediğimiz verilere ulaşabileceğiz.

Sifreniz başlığında bir alan açtık ve bu alanı password tipinde oluşturduk bu alan text alanı gibi olacak ancak buraya yazılan yazılar **** formatın da olacak. name alanına sifrealani ismini  verdik veri çekerken ve veri gönderirken bu sifrealani ismi ile istediğimiz verilere ulaşabileceğiz.

Cinsiyetiniz başlığında bir seçim alanı oluşturduk bunun için type özelliğine radio komutunu verdik bu sayede seçim alanı oluşturduk 2 tane bay ve bayan için input oluşturduk bu sayede kullanıcının cinsiyetini seçim formatında istedik. iki seçimden birini veya daha fazla input ekleyerek bir seçim bilgisini istedik. Name isimlerini veri çekerken veya işlerken tanımlayıcı özellik olarak belirledik bu ismleri istediğiniz gibi yazabilirsiniz.

Bildiğiniz Diller başlığında bir seçim alanı oluşturduk bunun için checkbox özelliği komutunu verdik bu seçim alanı radio seçim alanından farklı olarak birden fazla seçim yapabilme özelliğini taşımaktadır ve Türkçe seçeneğine CHECKED tanımını yaparak bu alanın seçili olarak sunmasını istedik CHECKED tanımını kullanacağımız her alan önceden seçili olarak forum sayfamızda çıkar. Name isimlerini veri çekerken veya işlerken tanımlayıcı özellik olarak belirledik bu ismleri istediğiniz gibi yazabilirsiniz.

Yaşadığınız İl adında yine bir seçim alanı oluşturduk bunu select etiketi içinde açılır bir seçenek alanı olarak tanımladık option etiketleri içinde seçeneklerimizi sunduk.

Açıklama Alanı Adında textarea etiketi ile bir Yazı Alanı oluşturduk text yazı alanından farklı olarak textarea yazı alanı çok satırlı yazı alanı oluşturmamıza yarar rows=”4″ komutu ile bu alanımızın 4 satır yüksekliğinde ve cols=”35″ komutu ile de alanımızın 35 kolon genişliğinde olmasını belirttik.

Formumuza submit tipinde bir buton oluşturduk buna butonGonder ismini verdik ve butonun üstünde value komutu ile Gönder ismini yazdırdık. value değeri alanınızda yazmasını istediğiniz yazıyı belirlemenize yarar text alanında da bu değeri girerseniz yazı alanında belirlemiş olduğunuz yazı görünecektir.

Yine Aynı şekilde formumuza reset tipinde bir buton oluşturduk buna butonTemizle ismini verdik ve butonun üstünde value komutu ile Temizle ismini yazdırdık. value değeri alanınızda yazmasını istediğiniz yazıyı belirlemenize yarar text alanında da bu değeri girerseniz yazı alanında belirlemiş olduğunuz yazı görünecektir.

Bunların Dışında formunuza farklı seçim alanları, resim,video, dosya gibi yükleme alanları oluşturabilirsiniz daha kapsamlı form alanları yapmak için ilerleyen derslerde daha kapsamlı form alanları oluşturabiliriz.

Hakkında BilgeBank

İlgili Makale

html ile tablolama sistemi

Html Tablolama Dersleri (10. Ders Table, TH, TR, TD )

Html’de Tablolama yapmak için <table> etiketini kullanırız ve içinde Satırlar Ve Sütunlar oluştururuz. Satırları <tr> …

Bir Cevap Yazın