HTML Input Etiketi Nedir, Nasıl Kullanılır, Input Türleri Nelerdir ?
HTML Input Etiketi Nedir, Ne İşe Yarar ?
HTML, web geliştirme sürecinde en temel yapı taşlarından biridir ve kullanıcıların bilgi girişi yapmasını sağlamak için form elemanları içerir. Bu form elemanlarının başında da “<input>” etiketi gelir. “<input>” etiketi, kullanıcının çeşitli veri tiplerini girmesine izin veren birçok özelliği barındıran esnek bir yapıdır.
<input type="text" name="username" placeholder="User Name">Yukarıdaki örnekte, “type” özelliği “text” olarak ayarlanmıştır, bu da kullanıcının metin girmesine izin verir. “name” özelliği, sunucuya gönderilecek verinin adını belirler ve “placeholder” özelliği, kullanıcıya hangi tür veriyi girmesi gerektiği konusunda bilgi verir.
Input Türleri:
Metin girişi için kullanılır. Kullanıcıya belirli bir metin veya karakter dizisi girmesi için izin verir.
<label for="firstname">Enter First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="First Name">
Sadece sayısal değer girmek için kullanılır.
<label for="quantity">Quantity (between: 1 and 10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">Kullanıcıların e-posta adresi girmelerini sağlayan bir giriş alanı oluşturur. Bu özellik kullanıcıların geçerli bir e-posta adresi girmelerini sağlar. Eğer input alanı boşsa veya geçerli bir e-posta adresi girilmemiş ise uyarı mesajı verir.
<label for="email">Your email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">Şifre girişi için kullanılır. Kullanıcının girdiği şifre karakterleri genellikle yıldız (*) veya nokta işareti gibi görünmez karakterlerle maskelenir.
<label for="password">Enter Password:</label>
<input type="password" id="password" name="password" placeholder="Your Password">Birden çok seçenek arasından birden fazla seçeneği işaretlemek veya işaretsiz bırakmak için kullanılır.
<p>Choose your favourite country/countries:</p>
<input type="checkbox" id="country1" name="country1" value="Spain">
<label for="country1">Spain</label>
<input type="checkbox" id="country2" name="country2" value="Italy">
<label for="country2">Italy</label>
<input type="checkbox" id="country3" name="country3" value="France">
<label for="country3">France</label>
<input type="checkbox" id="country4" name="country4" value="England">
<label for="country4">England</label>
Choose your favourite country/countries:
Bir grup içinde yalnızca bir seçeneği seçme olanağı sağlar.
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">18 - 25</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">25 - 35</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">35+</label><br><br>
Please select your age:
JavaScript fonksiyonlarını tetiklemek ya da formları göndermek için kullanılabilen tıklanabilir bir buton oluşturur.
<button type="button" onclick="buttonClick()">Click</button>
<script>
function buttonClick() {
alert("You clicked the button :)");
}
</script>
Formu sunucuya göndermek için kullanılan bir buton oluşturur.
<form action="/submit_form" method="post">
<label for="username">User Name:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
Kullanıcıların tarih girmesini sağlayan bir giriş alanı oluşturur. Aynı zamanda bir takvim arayüzü de oluşturulur.
<form action="#" method="post">
<label for="date">Select Date:</label>
<input type="date" id="date" name="date">
<input type="submit" value="Send">
</form>Sadece ay ve yıl bilgisi girilmesini sağlayan bir giriş alanı oluşturur. Aynı zamanda bir takvim arayüzü de oluşturulur.
<form action="#" method="post">
<label for="bdaymonth">Birthday:</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Send">
</form>Sadece hafta ve yıl bilgisi girilmesini sağlayan bir giriş alanı oluşturur. Aynı zamanda bir takvim arayüzü de oluşturulur.
<form action="#" method="post">
<label for="week">Select a Week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Send">
</form>Saat ve dakika bilgisi girilmesi sağlayan bir giriş alanı oluşturur. Aynı zamanda saat ve dakika seçilmesini sağlayan bir arayüz de oluşturur.
<form action="#" method="post">
<label for="time">Select a Time:</label>
<input type="time" id="time" name="time">
<input type="submit" value="Send">
</form>Tarih ve saat seçimi yapılabilen bir giriş alanı oluşturur.
<form action="#" method="post">
<label for="birthdaytime">Birthday:</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit" value="Send">
</form>Telefon numarası girişi sağlayan alan oluşturur.
<form action="#" method="post">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
<input type="submit" value="Send">
</form>Kullanıcıların renk seçmesini sağlayan bir giriş alanı oluşturur.
<form action="#" method="post">
<label for="color">Select a Color:</label>
<input type="color" id="color" name="color" value="#ff0000">
<input type="submit" value="Send">
</form>Kullanıcılara dosya yüklemeleri için bir giriş alanı sağlar.
<form action="#" method="post" enctype="multipart/form-data">
<label for="file">Select a File:</label>
<input type="file" id="file" name="file">
<input type="submit" value="Upload">
</form>Kullanıcıdan görünmeyen bir şekilde veri almak veya göndermek için kullanılır. Sayfada görüntülenmez ancak sunucuya verileri aktarmak için kullanılır.
<form action="submit.php" method="post">
<label for="username">User Name :</label>
<input type="text" id="username" name="username">
<!-- Hidden area -->
<input type="hidden" id="hiddenArea" name="hiddenArea" value="Secret Information">
<input type="submit" value="Send">
</form>
Kullanıcılara belli bir aralıkta değer seçilebilen kaydırma çubuğu sağlar.
<form action="#" method="post">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>Formun içindeki tüm giriş alanlarını ve seçenekleri sıfırlayan bir tıklanabilir buton oluşturur.
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
