Kayan Etiketli Input

Önizleme

kullanıcı adı

Kullanım durumları ve özellikleri

Kayan etiketler, Materyal Tasarımı ve diğer uygulamalarda yaygın olarak kullanılan modern, yerden tasarruf sağlayan bir giriş formu kullanıcı arayüzüdür.

Yerden Tasarruf: Etiket ve yer tutucu olarak da kullanılabilir; ekran alanı sınırlı olduğunda bile dikey alandan tasarruf sağlar.
Giriş içeriğinin açıklığa kavuşturulması: Kullanıcılara hem yazma sırasında hem de yazma sonrasında bir alanın ne anlama geldiği (etiket) her zaman gösterilir, böylece kullanıcıların kafası asla karışmaz.
Gelişmiş Etkileşimler: Odaktaki etiketin düzgün bir şekilde yükseltilmiş animasyonu, kullanıcıya girdinin artık mevcut olduğuna dair etkili görsel geri bildirim sağlar.

Tasarım ve kullanıcı deneyiminin önemli noktaları

Yer tutucu saldırısı: Herhangi bir JavaScript kullanmadan, yalnızca CSS kullanarak durumu (girdi veya değil) belirlemek için :placeholder-shown sözde sınıfını kullanır. (* HTML tarafında placeholder=" " zorunlu bir gerekliliktir)
Görünürlüğün sağlanması: Etiket yükseltildiğinde, yazı tipi boyutu azaltılarak (“scale(0,75)”) ve kalın yazı tipi (“font-weight: 500”) ve tema rengi uygulanarak görünürlük korunur.
Erişilebilirlik: “label” öğesinin “for” özelliğini ve “input” öğesinin “id”sini bağlayarak, etiket tıklandığında ekran okuyucuları ve odak hareketini destekler. Ayrıca, etiketin işlemi engellememesi için ‘pointer-events: none’ belirtildi.

Nasıl kişiselleştirilir

Aşağıdaki noktaları projenizin tasarım sistemine uyacak şekilde ayarlayabilirsiniz.

Renklendirme: .fli-input:focus ve .fli-input:focus ~ .fli-label (şu anda #6366f1) rengini marka rengiyle değiştirin.
Yuvarlatılmış köşeler ve gölgeler: .fli-input'un border-radius’unu ve `box-shadow’unu değiştirerek, daha düz bir tasarıma veya daha yuvarlak ve popüler bir tasarıma ayarlayabilirsiniz.
Yazı tipi boyutu: Etiketin yazı tipi boyutunu veya küçültme oranını (“ölçek(0,75)”) ayarlarsanız, lütfen etiket ve giriş metninin çakışmaması için “.fli-input”un “dolgusuna” (özellikle üst değere) ince ayar yapın.

Uygulama kodu

<div class="fli-group">

<input type="text" id="username" class="fli-input" placeholder=" " required />

<label for="username" class="fli-label">kullanıcı adı</label>

</div>



<style>
.fli-group {

position: relative;

width: 100%;

max-width: 320px;

}



.fli-input {

width: 100%;

padding: 1.5rem 1.25rem 0.5rem;

font-size: 1rem;

font-family: inherit;

color: #0f172a;

background-color: #ffffff;

border: 2px solid #e2e8f0;

border-radius: 0.75rem;

outline: none;

box-sizing: border-box;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

}



.fli-input:hover {

border-color: #cbd5e1;

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);

}



.fli-input:focus {

border-color: #6366f1;

box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);

background-color: #ffffff;

}



.fli-label {

position: absolute;

top: 1.1rem;

left: 1.25rem;

font-size: 1rem;

color: #64748b;

pointer-events: none;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

transform-origin: left top;

}



/* Giriliyor veya tamamlandı durumu */

.fli-input:focus ~ .fli-label,

.fli-input:not(:placeholder-shown) ~ .fli-label {

transform: translateY(-0.6rem) scale(0.75);

color: #6366f1;

font-weight: 500;

}



/* Odak dışı ama yine de giriş */

.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {

color: #475569;

}
</style>

Tarayıcı uyumluluk durumu

Chrome: en son sürüm
Safari: en son sürüm
Firefox: en son sürüm
Kenar: En son sürüm

:placeholder-shown sözde sınıfı tüm modern tarayıcılar tarafından desteklenir ve kullanımı güvenlidir.