Örnek Form; HTML form, HTML’de bir sayfada kullanıcıdan veri toplamak için kullanılan bir yapıdır. Formlar, kullanıcıların bir web sayfasına veri girmesi ve göndermesi için kullanılır. Örneğin, bir web formu kullanıcıların bir sitede ürün siparişi vermesini, bir hesap açmasını veya bir anket doldurmasını sağlayabilir.
HTML formları, <form> etiketi ile tanımlanır ve içerisinde birçok farklı türde form elemanı bulunabilir. Örneğin, bir form içerisinde bir metin kutusu, bir onay kutusu, bir menü veya bir düğme gibi elemanlar yer alabilir. Form elemanları, kullanıcıdan veri toplamak için kullanılır ve <input>, <select> ve <textarea> gibi etiketlerle tanımlanır.
Bir HTML formunun nasıl kullanılacağına dair bir örnek aşağıdaki gibidir:
<form action="/form-submission-url" method="post">
<label for="name">İsim:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">E-posta:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Gönder">
</form>
Bu örnekte, bir form oluşturulmuş ve içerisinde iki adet metin kutusu bulunmaktadır. Bu formun verilerinin gönderileceği URL’si /form-submission-url ve verilerin gönderim yöntemi post olarak belirtilmiştir. Formun içerisinde yer alan iki metin kutusu da name ve email olarak adlandırılmıştır. Formun içerisinde yer alan bir düğme sayesinde kullanıcı verilerini gönderebilir.
Örnek Form-1
*HTML*
<form action="/form-submission-url" method="post" enctype="multipart/form-data">
<label for="name">İsim:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">E-posta:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="age">Yaş:</label><br>
<input type="number" id="age" name="age" min="18" max="100"><br>
<label for="gender">Cinsiyet:</label><br>
<select id="gender" name="gender">
<option value="">Seçiniz</option>
<option value="male">Erkek</option>
<option value="female">Kadın</option>
<option value="other">Diğer</option>
</select><br>
<label for="interests">İlgi Alanları:</label><br>
<input type="checkbox" id="interests" name="interests[]" value="books"> Kitaplar<br>
<input type="checkbox" id="interests" name="interests[]" value="movies"> Filmler<br>
<input type="checkbox" id="interests" name="interests[]" value="music"> Müzik<br>
<input type="checkbox" id="interests" name="interests[]" value="sports"> Spor<br>
<input type="checkbox" id="interests" name="interests[]" value="travel"> Gezi<br>
<label for="profile-picture">Profil Resmi:</label><br>
<input type="file" id="profile-picture" name="profile-picture"><br>
<input type="submit" value="Gönder">
</form>
Örnek Form-1 de, required özelliği ile kullanıcının adı ve e-posta alanlarını doldurması zorunlu hale getirilmiştir. Ayrıca, yaş alanında min ve max özellikleri ile 18 ve 100 yaş arasında değer girmesi istenmiştir. Altta da üste bulunan forma biraz CSS kodu eklenip daha kullanışlı bir hal almasını sağladık.
Örnek Form-1 CSS
*CSS*
<style>
form {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin-top: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>