Html form örnekleri hakkında bilgi sağlayan bu makalede, farklı HTML form özelliklerini ve kullanımlarını bulabilirsiniz. Aşağıda, makalenin alt başlıklarını bulabilirsiniz ve her bir başlık altında form özelliklerine ilişkin ayrıntılı açıklamaları bulabilirsiniz.
Html form örnekleri makalemizi okuyarak, form geliştirme sürecinde ihtiyaç duyduğunuz koda ulaşabilir ve nasıl kullanılacağını öğrenebilirsiniz. Her bir form özelliği için örnek kodlar ve ayrıntılı açıklamalar sunulmaktadır. Bu makale, başarılı bir şekilde HTML form oluşturma becerinizi artırmak için tasarlanmıştır.
Form İçinde Metin Girişi
Form içerisinde metin girişi yapmak için öncelikle input etiketini kullanmamız gerekmektedir. Bu etiketi kullanarak kullanıcıdan metin girişi alabiliriz.
Örneğin, aşağıdaki örnekte bir ad soyad alanı için bir metin girişi oluşturulmuştur:
| Kod Örneği: |
|
Kod örneğinde, form etiketi içerisinde bir label etiketi kullanarak kullanıcıya hangi bilginin girmesi gerektiğini açıkladık. Ardından bir input etiketiyle metin girişi alanını oluşturduk. Bu alanın type özelliği text olarak belirtildi ve id ve name özellikleriyle alanın isimlendirilmesi sağlandı.
Bu örnekte formun action özelliği “/” olarak belirtilmiştir. Bu, formun gönderildiği URL’yi temsil eder. Ayrıca, formun method özelliği “POST” olarak belirtilmiştir, yani form verileri sunucuya iletilirken HTTP POST yöntemi kullanılır.
Bu şekilde, kullanıcının ad soyad gibi metin girişi yapmasını sağlayabilir ve formun gönderilmesini sağlayabiliriz. Böylece kullanıcıların girdiği bilgileri elde edebilir ve kullanıcı deneyimini geliştirebiliriz.
Checkbox ve Radio Button Kullanımı
Checkbox ve radio button özellikleri, HTML form içerisinde seçeneklerin nasıl oluşturulduğunu ve kontrol edildiğini sağlar.
Checkbox kullanımı:
Checkboxlar, kullanıcının birden fazla seçenek arasından istediği seçenekleri işaretleyebilmesini sağlar. Bu seçenekler, formun gönderilmesiyle birlikte sunucuya iletilir. Bir checkbox oluşturmak için <input type=”checkbox”> etiketini kullanırız. Checkboxun seçili olup olmadığını anlamak için “name” ve “value” özelliklerini kullanırız.
Aşağıda, tekli ve çoklu checkbox kullanımlarını gösteren örnek bir kod bulunmaktadır:
<form> <input type="checkbox" name="seçenek1" value="1"> Seçenek 1<br> <input type="checkbox" name="seçenek2" value="2"> Seçenek 2<br> <input type="checkbox" name="seçenek3" value="3"> Seçenek 3<br></form>
Radio button kullanımı:
Radio buttonlar, kullanıcının sadece bir seçeneği seçebilmesini sağlar. Checkboxlardan farklı olarak, radio buttonlar arasında birbirini dışlayan seçenekler bulunur. Bu seçenekler, formun gönderilmesiyle birlikte sunucuya iletilir. Radio button oluşturmak için <input type=”radio”> etiketini kullanırız. Her radio buttonun aynı “name” özelliğine sahip olması gerekir.
Aşağıda, radio button kullanımını gösteren örnek bir kod bulunmaktadır:
<form> <input type="radio" name="seçenek" value="1"> Seçenek 1<br> <input type="radio" name="seçenek" value="2"> Seçenek 2<br> <input type="radio" name="seçenek" value="3"> Seçenek 3<br></form>
Bu şekilde checkbox ve radio button özelliklerini kullanarak form içerisinde seçenekler oluşturabilir ve kontrol edebilirsiniz.
Checkbox Kullanımı
=Checkbox özelliğini kullanarak birden fazla seçenek arasından istenilenleri seçmek ve formun nasıl gönderildiği.
Checkbox özelliği, kullanıcının birden fazla seçenek arasından istediği seçenekleri işaretlemesine olanak tanır. Formlar üzerinde çoklu seçim yapmak için ideal bir seçenektir. Checkboxlar, kullanıcının seçim yapabileceği kutucuklar şeklinde gösterilir ve istenilen sayıda checkbox oluşturulabilir.
Öncelikle, checkbox kullanabilmek için <input> etiketi kullanılır ve type özelliği “checkbox” olarak ayarlanır. Her checkbox için unique bir “name” özelliği belirtilmelidir. Bu şekilde, hangi seçeneğin seçildiği form sunucuya bilgi olarak iletilir.
Aşağıda bir örnek kod bulunuyor:
<form action="form_handler.php" method="post"> <input type="checkbox" name="seçenek" value="seçenek1"> Seçenek 1
<input type="checkbox" name="seçenek" value="seçenek2"> Seçenek 2
<input type="checkbox" name="seçenek" value="seçenek3"> Seçenek 3
<input type="submit" value="Gönder"></form>
Yukarıdaki kodda, kullanıcı tarafından seçilen checkbox değerleri “form_handler.php” adlı bir dosyaya POST metoduyla gönderiliyor. Seçilen değerlerin nasıl işleneceği ve hangi işlemlerin yapılacağı bu dosyada belirlenir.
Form gönderildiğinde seçilen checkbox değerleri form sunucuya iletilir ve ilgili işlemler gerçekleştirilir. Bu şekilde, kullanıcı tarafından seçilen seçeneklerin değerlerine ulaşabilir ve bu değerlere göre işlem yapabilirsiniz.
Single Checkbox Kullanımı
Single Checkbox Kullanımı: Single checkbox kullanarak sadece tek bir seçenek yapma ve gönderme işlemleri yapabilirsiniz. Checkbox, kullanıcıya bir seçenek sunar ve kullanıcının bu seçeneği işaretleyip işaretlememe özgürlüğünü verir. Bir formda single checkbox kullanarak, kullanıcının sadece belirli bir seçeneği seçmesine izin verebilirsiniz.
Single checkbox kullanımı oldukça basittir. Kullanıcı, checkbox’ı işaretleyerek seçeneği seçebilir veya işareti kaldırarak seçimi iptal edebilir. Bu seçenekler, kullanıcının belirli bir eylem gerçekleştirmesini veya bir tercih yapmasını sağlamak için kullanılabilir.
Örneğin, bir abonelik formunda, kullanıcının e-posta bildirimlerini almak isteyip istemediğini sormak için single checkbox kullanabilirsiniz. Kullanıcı, checkbox’ı işaretlediğinde e-posta bildirimlerini almaya razı olduğunu belirtmiş olur. İşaret kaldırıldığında ise bildirimleri almak istemediğini ifade etmiş olur.
Single checkbox kullanmanın bir diğer yaygın uygulaması, kullanıcıya bir sözleşme veya kullanım şartlarına onay vermek için bir seçenek sunmaktır. Kullanıcı, checkbox’ı işaretleyerek sözleşmeyi veya şartları kabul ettiğini beyan eder.
Single checkbox kullanımı oldukça esnektir ve birçok farklı senaryoda kullanılabilir. Kullanıcının sadece tek bir seçeneği seçmesini istediğiniz durumlarda single checkbox tercih edebilirsiniz.
Multiple Checkbox Kullanımı
=Multiple checkbox kullanılarak birden fazla seçenek yapma ve gönderme işlemleri.
Multiple checkbox kullanımı, HTML form içinde birden fazla seçenek yapmak ve bu seçenekleri form üzerinde göndermek için kullanılan bir özelliktir. Bu özellik, kullanıcının birden fazla seçeneği seçmesini sağlar ve seçilen değerleri form üzerinde işlemek için kullanılır.
Multiple checkbox kullanarak bir form oluşturmak oldukça kolaydır. İlk olarak, formun içinde multiple checkbox alanını oluşturmalısınız. Bunun için etiketini kullanabilirsiniz. Birden fazla seçenek oluşturmak için bu etiketi gerektiği kadar tekrarlayabilirsiniz.
Her bir checkbox seçeneği için ayrı bir değer atanabilir. Bunun için value özelliğini kullanabilirsiniz. Kullanıcının seçtiği değerler, form gönderildiğinde, sunucuya aktarılacaktır.
Aynı zamanda, her checkbox seçeneği için name özelliği belirtmek de önemlidir. Bu, seçimlerin gruplandırılmasını sağlar ve sunucu tarafında kolayca işlenebilir hale getirir.
Birden fazla seçeneğin işaretlenip işaretlenmediğini kontrol etmek için JavaScript veya server-side kodlama kullanabilirsiniz. Seçimler sunucuya gönderildiğinde, işaretlenen checkbox’ların değerleri sunucu tarafında işlenebilir ve istenen işlemler gerçekleştirilebilir.
Multiple checkbox kullanımı, kullanıcılara birden fazla seçenek sunan ve bu seçenekleri kolayca işleyebilen kullanışlı bir HTML form özelliğidir.
Radio Button Kullanımı
Radyo düğmesi (radio button), HTML formunda yalnızca tek bir seçeneği seçmek için kullanılan bir özelliktir. Radyo düğmeleri, kullanıcının sadece bir seçenek yapabilmesini ve bunu diğer seçeneklerle çakışmamasını sağlar. Bu nedenle, birden fazla seçenek arasından yalnızca birini seçmek istediğinizde radyo düğmelerini tercih edebilirsiniz.
HTML formunda radyo düğmeleri oluşturmak için <input> etiketi kullanılır. Bu etiketin type özelliği “radio” olarak belirlenir. Her radyo düğmesi seçeneği, bir <input> etiketi içinde yer alır ve name özelliği ile bir grup oluşturulur. Bu sayede, aynı isme sahip olan radyo düğmeleri birbiriyle ilişkilendirilir ve sadece bir seçenek yapılabilir.
Formun nasıl gönderildiği konusuna gelince, seçenek yapıldığında seçilen radyo düğmesinin değeri, formun sunucuya gönderilmesi için kullanılır. Bu değer, value özelliği olarak belirlenen veridir. Kullanıcı seçimini yaptığında, formun diğer verileriyle birlikte sunucuya gönderilir ve sunucudaki işlemlerde kullanılır.
Select ve Option Kullanımı
Select ve Option özellikleri, HTML form içerisinde kullanılarak bir dropdown menü oluşturmayı ve bu menüden değer seçmeyi sağlar. Dropdown menü, kullanıcının bir seçenek listesinden istediği değeri seçmesine olanak tanır. Select özelliği, dropdown menünün genel yapılandırmasını sağlarken, Option özelliği ise seçenekleri belirleyerek değerlerini ayarlar.Select özelliği kullanılarak, HTML form içerisinde bir dropdown menü oluşturulur. Bu menü, kullanıcının farklı seçenekler arasından birini seçmesine imkan tanır. Select etiketi içine yerleştirilen Option etiketleri ise, seçeneklerin listesini oluşturur. Her bir Option etiketi, bir seçeneği ve bu seçeneğin değerini temsil eder.Örneğin, bir ülke seçmek amacıyla bir dropdown menü oluşturmak istediğimizde, Select etiketi içinde Option etiketleri kullanabiliriz. Her Option etiketi, bir ülkeyi temsil eder ve içerisine yerleştirdiğimiz değer, seçeneğin değerini belirler. Böylece, kullanıcı dropdown menüden bir ülke seçtiğinde, o ülkenin değerine erişebiliriz.Dropdown menü oluşturmanın yanı sıra, Select ve Option özelliklerini kullanarak, kullanıcıya önceden belirlenmiş değerleri sunma özelliği de bulunur. Bu sayede, kullanıcının istediği değeri seçmesi daha kolay hale gelir ve hatalı girişlerin önüne geçilir.Sonuç olarak, Select ve Option özellikleri, HTML form içerisinde kullanılarak kullanıcıya bir dropdown menü sunmayı ve bu menüden istenilen değerin seçilmesini sağlar. Dropdown menü oluştururken, Option etiketleri kullanılarak seçenekler listesi oluşturulur ve her bir seçeneğin değeri belirlenir. Böylece kullanıcının kolaylıkla istediği değeri seçip göndermesi sağlanır.
Select Kullanımı
Select özelliği, HTML formunda bir dropdown menü oluşturarak kullanıcının belirli bir seçeneği seçmesini sağlar. Dropdown menü, kullanıcının seçenekler arasından birini seçmesi için bir liste sunar. Kullanıcının seçtiği değer, formun gönderildiğinde sunucuya iletilir ve işlenebilir.Select özelliğini kullanarak bir dropdown menü oluşturmak oldukça basittir. Öncelikle
| Kod | Sonuç |
|---|---|
<select> <option value="1">Seçenek 1</option> <option value="2">Seçenek 2</option> <option value="3">Seçenek 3</option></select> |
Yukarıdaki örnekte, üç seçenekli bir dropdown menü oluşturduk. Her bir seçeneğin değeri, value özelliği ile belirlendi. Kullanıcı seçenekler arasından birini seçebilir ve form gönderildiğinde seçtiği değer sunucuya iletilir.Select özelliği, kullanıcıya belirli bir seçenek kümesi sunmak istediğiniz durumlarda oldukça kullanışlıdır. Örneğin, bir ülke seçimi veya bir liste seçimi gibi durumlarda select özelliği çok işe yarar.
Option Kullanımı
Option özelliği, HTML formunun içindeki dropdown menüdeki seçeneklerin belirlenmesi ve değerlerinin ayarlanması için kullanılır. Dropdown menü, kullanıcının form içindeki bir dizi seçenek arasından birini seçmesine olanak tanır. Bu seçenekler, option etiketi içinde tanımlanır ve kullanıcının seçebileceği farklı değerlere sahip olabilir.
Option etiketi, select etiketi içinde kullanılır ve her bir seçeneği temsil eder. Option etiketi, value özelliği sayesinde seçeneğin değerini tanımlar. Kullanıcı seçenekler arasından birini seçtiğinde, form gönderildiğinde bu değer sunucuya iletilir. Option etiketi ayrıca, kullanıcıya gösterilecek olan metni içeren içerik etiketi de içerebilir.
Örneğin, aşağıdaki kod parçası bir dropdown menü oluşturur:
<select> <option value="1">Seçenek 1</option> <option value="2">Seçenek 2</option> <option value="3">Seçenek 3</option></select>
Bu kod parçasında, her bir option etiketi farklı bir değere (1, 2, 3) sahiptir. Kullanıcı dropdown menüden bir seçenek seçtiğinde, seçeneğin değeri formun gönderilmesiyle sunucuya iletilir. Böylece sunucu, hangi seçeneğin seçildiğini belirleyebilir ve buna göre işlem yapabilir.
