Formlarla ilgili etiketler

Articles

HTML'e Giriş

Bu makale, formlarla ilgili etiketleri açıklar.

Bu, metin girişleri ve açılır menüler gibi çeşitli form alanlarını açıklar.

YouTube Video

Formlarla ilgili etiketler

`<form>` etiketi

1<form action="/submit" method="post">...</form>

<form> etiketi, formun tamamını tanımlamak için kullanılır.
action özniteliği hedefi, method özniteliği ise yöntemi (GET veya POST) belirtir.
<a> etiketiyle benzer şekilde target özelliğini de belirtebilirsiniz.

`<input>` etiketi (metin giriş alanı)

1<input type="text" name="username" placeholder="Enter your username">

<input type="text"> tek satırlık bir metin giriş alanı oluşturur. Kullanıcılar herhangi bir metin girebilir.
placeholder özelliği, giriş alanı boş olduğunda görünen açıklayıcı metni belirtir. Bu, kullanıcıların beklenen girişi kolayca anlamalarına yardımcı olur. Bu metin, giriş başladığında otomatik olarak kaybolur.
- placeholder, ek bilgi sağlamak için uygundur ve gerekli giriş gibi önemli talimatlar için uygun değildir. Bu gibi durumlarda, bir etiket kullanmalısınız.

`<input>` etiketi (şifre giriş alanı)

1<input type="password" name="password" placeholder="Type your password here">

<input type="password"> şifre girişi için bir alan oluşturur. Girilen karakterler güvenliği sağlamak için gizlenir ve maskelenir.

`<input>` etiketi (e-posta adresi giriş alanı)

1<input type="email" name="email" placeholder="Enter your email">

<input type="email"> bir e-posta adresi girişi için bir alan oluşturur ve doğru e-posta formatını doğrulamak için kontrol içerir.

`<input>` etiketi (onay kutusu)

Subscribe to newsletter

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

<input type="checkbox"> bir onay kutusu oluşturur. Birden fazla seçenek mevcutken, kullanıcılar birden fazla öğe seçebilir.

`<input>` etiketi (radyo düğmesi)

Male
Female

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

<input type="radio"> bir radyo düğmesi oluşturur ve kullanıcılara bir grup içinden yalnızca bir seçenek seçme imkanı sağlar.

`<input>` etiketi (gönderme düğmesi)

1<input type="submit" value="Submit">

<input type="submit"> formdaki verilerin gönderilmesi için bir düğme oluşturur.
value özniteliğinin değeri, form gönderildiğinde form verilerine dahil edilir.

`<input>` etiketi (Sıfırlama Düğmesi)

1<input type="reset" value="Reset">

<input type="reset">, formdaki tüm giriş değerlerini sıfırlayan bir düğme oluşturur.

`<input>` etiketi (gizli alan)

1<input type="hidden" name="userid" value="12345">

<input type="hidden"> ekranda görüntülenmeyen ve form gönderildiğinde arka plana veri göndermek için kullanılan bir gizli alan oluşturur.

`<input>` etiketi (renk seçici)

1<input type="color" name="favcolor" value="#ff0000">

<input type="color"> bir renk seçici görüntüler ve kullanıcıların bir renk seçmesi için bir giriş alanı oluşturur.

`<input>` etiketi (tarih giriş alanı)

1<input type="date" name="birthday">

<input type="date"> bir tarih seçmek için takvim görüntüleyen bir tarih giriş alanı oluşturur.

`<input>` etiketi (zaman giriş alanı)

1<input type="time" name="appointment_time">

<input type="time"> saat girişi için bir alan oluşturur ve bir saat seçici görüntülenir.

`<input>` etiketi (dosya yükleme alanı)

1<input type="file" name="resume">

<input type="file"> kullanıcıların dosya seçip yüklemesi için bir giriş alanı oluşturur.
form etiketinin enctype özniteliği multipart/form-data olarak ayarlanmalıdır.

`<input>` etiketi (sayı)

1<input type="number" name="quantity" min="1" max="10">

<input type="number">, minimum değeri, maksimum değeri ve artış/azalış miktarını (step) ayarlamayı sağlayan bir sayısal giriş alanı oluşturur.

`<input>` etiketi (sayılar için aralık seçim alanı)

1<input type="range" name="volume" min="0" max="100" value="50">

<input type="range">, kullanıcıların bir kaydırıcı kullanarak belirli bir aralıktaki bir değer seçmesini sağlayan bir giriş alanı oluşturur.

`<textarea>` etiketi

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

<textarea> etiketi, çok satırlı bir metin giriş alanı oluşturur. Uzun metinler veya yorumlar girmek için uygundur.

`<select>` etiketi

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

<select> etiketi, bir açılır menü oluşturur ve seçenekler <option> etiketiyle tanımlanır. Kullanıcılar bir veya birden fazla öğe seçebilir.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

Birden fazla seçim yapabilmek için multiple özelliğini ekleyin. Bu özelliği belirlemek, seçenekleri bir liste kutusu olarak görüntüler.

`<optgroup>` etiketi

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

<optgroup> etiketi, ilgili öğeleri bir araya gruplamak için kullanılır. label özelliği, liste uzun olsa bile kullanıcılara net seçenekler sunarak bir grup adı belirlemenize olanak tanır.

`<label>` etiketi

Username:

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

<label> etiketi, giriş alanları, onay kutuları ve radyo düğmeleri için etiketler tanımlar, böylece kullanılabilirlik ve erişilebilirlik artırılır.
Örneğin, bir etikete tıklamak, bir giriş alanına odaklanabilir veya bir onay kutusunu açıp kapatabilir.

`<fieldset>` etiketi

Personal Information Name:

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

<fieldset> etiketi, ilgili form kontrollerini gruplar ve <legend> etiketi grup için bir başlık sağlar.

`<button>` etiketi

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

<button> etiketi, form gönderimini veya diğer işlemleri tetikleyen tıklanabilir bir düğme tanımlar.

type="button" belirtildiğinde, düğme standart bir düğme olarak işlev görür. Tıklandığında, formu göndermez veya başka herhangi bir varsayılan işlemi tetiklemez. JavaScript ile özel işlemler tanımlamak istediğinizde kullanılır.

type="submit" belirtildiğinde, düğme form için bir gönderme düğmesi olarak işlev görür. Bu düğmeye tıklandığında, düğmeyi içeren form gönderilir.

type="reset" belirtildiğinde, düğme form için bir sıfırlama düğmesi olarak işlev görür. Tıklandığında, formdaki tüm giriş alanlarını sıfırlar ve ilk durumlarına döndürür.

type özelliği belirtilmezse, bazı tarayıcılar bunu type="submit" olarak değerlendirebilir, bu nedenle beklenen davranışın sağlanması için türün açıkça belirtilmesi önerilir.
<button> etiketi, açılış ve kapanış etiketleri arasında diğer HTML içeriğini içerebilir, bu da simgeler veya karmaşık metin içeren düğmeler oluşturmayı mümkün kılar.
<input> etiketiyle kullanılan bir gönderme düğmesi için, value özniteliğinin değeri form verilerine dahil edilir, ancak <button> etiketi varsayılan olarak gönderilmez.

<button> etiketi için name ve value özniteliklerini belirterek, değerini form verisi olarak gönderebilirsiniz.

`<datalist>` etiketi

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

<datalist> etiketi, <input> öğesi için seçilebilir seçenekler listesi sağlar. Kullanıcılar listeden seçim yapabilir ya da kendi değerlerini girebilir.

`<output>` etiketi

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

<output> etiketi, hesaplamaların veya kullanıcı etkileşimlerinin sonucunu gösterir. Formlar veya betikler içinde hesaplama sonuçlarını dinamik olarak görüntülemek için kullanılır.
for özelliği için, ilişkilendirmek istediğiniz form elemanlarının kimliklerini boşluklarla ayırarak belirtin.

`<progress>` etiketi

70%

1<progress value="70" max="100">70%</progress>

<progress> etiketi, bir görevin ilerlemesini kullanıcılara gösterir. Örneğin, bir dosya indirme veya yükleme işleminin ilerlemesini görsel olarak gösterebilir.

`<meter>` etiketi

60%

1<meter value="0.6">60%</meter>

<meter> etiketi, bilinen bir aralık içindeki sayısal bir ölçümü temsil eder. Belirli bir aralıktaki disk kullanımı veya yakıt göstergesi gibi ölçümleri göstermek için kullanılır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Medya ile İlgili Etiketler Form Doğrulama

Formlarla ilgili etiketler

YouTube Video

Formlarla ilgili etiketler

<form> etiketi

<input> etiketi (metin giriş alanı)

<input> etiketi (şifre giriş alanı)

<input> etiketi (e-posta adresi giriş alanı)

<input> etiketi (onay kutusu)

<input> etiketi (radyo düğmesi)

<input> etiketi (gönderme düğmesi)

<input> etiketi (Sıfırlama Düğmesi)

<input> etiketi (gizli alan)

<input> etiketi (renk seçici)

<input> etiketi (tarih giriş alanı)

<input> etiketi (zaman giriş alanı)

<input> etiketi (dosya yükleme alanı)

<input> etiketi (sayı)

<input> etiketi (sayılar için aralık seçim alanı)

<textarea> etiketi

<select> etiketi

<optgroup> etiketi

<label> etiketi

<fieldset> etiketi

<button> etiketi

<datalist> etiketi

<output> etiketi

<progress> etiketi

<meter> etiketi

YouTube Video

`<form>` etiketi

`<input>` etiketi (metin giriş alanı)

`<input>` etiketi (şifre giriş alanı)

`<input>` etiketi (e-posta adresi giriş alanı)

`<input>` etiketi (onay kutusu)

`<input>` etiketi (radyo düğmesi)

`<input>` etiketi (gönderme düğmesi)

`<input>` etiketi (Sıfırlama Düğmesi)

`<input>` etiketi (gizli alan)

`<input>` etiketi (renk seçici)

`<input>` etiketi (tarih giriş alanı)

`<input>` etiketi (zaman giriş alanı)

`<input>` etiketi (dosya yükleme alanı)

`<input>` etiketi (sayı)

`<input>` etiketi (sayılar için aralık seçim alanı)

`<textarea>` etiketi

`<select>` etiketi

`<optgroup>` etiketi

`<label>` etiketi

`<fieldset>` etiketi

`<button>` etiketi

`<datalist>` etiketi

`<output>` etiketi

`<progress>` etiketi

`<meter>` etiketi