Form-associated custom element

HTML kursu · Uzman · Ders 32/39

ElementInternals ve form özniteliği ile form bağlamayı öğrenirsin.

Form-associated custom element

Sıradan custom elementler form verisine katılmaz; form-associated custom elementler bir formun parçası gibi davranır. Sınıf içinde static formAssociated = true yazılır ve attachInternals() ile ElementInternals alınır.

HTML tarafında ise tek bir öznitelik yeter: form. Bir formun dışında duran bir custom element form="register" yazınca id="register" formuna bağlanır; tıpkı <button form="..."> gibi. Böylece yerleşim esnek kalır.

ElementInternals ile değer ve doğrulama

ElementInternals, custom elementin form ile konuşma köprüsüdür. JS tarafında internals.setFormValue() ile değer gönderir, internals.setValidity() ile doğrulama durumu bildirirsin. Tarayıcı bunu form gönderimine ve :invalid sözde sınıfına yansıtır.

HTML tarafında ise form özniteliği ve name yeter. Örneğin <rating-input form="register" name="rating"> doğru kurulmuş bir alan adı verir; JS tarafı değeri üretir, HTML tarafı bağlamı kurar.

Uygulama Form dışında form-associated custom element yaz

Bir <form id="register"> aç. İçinde şunlar olsun:

<label for="eposta"> — içeriği dolu
<input id="eposta" name="eposta" type="email">
Bir <rating-input form="register" name="rating"> (formun içinde veya dışında)
Bir <button type="submit"> — içeriği dolu

Sonuçta form, dışarıdaki custom elementi de kapsamalı.

Örnek çözümü göster

<form id="register" action="/kayit" method="post">
  <label for="eposta">E-posta</label>
  <input id="eposta" name="eposta" type="email" required>
  <rating-input form="register" name="rating"></rating-input>
  <button type="submit">Kaydet</button>
</form>

Kendini test et

Bir custom elementi dışarıdaki bir forma bağlayan HTML özniteliği nedir?
```
<rating-input ??="register" name="rating"></rating-input>
```
- for
- name
- aria-form
- form
Cevabı göster

form — Doğru. form özniteliği, custom elementi ilgili id'li form ile ilişkilendirir.

form özniteliği değerini tamamla

<rating-input form="____" name="rating"></rating-input>

Cevabı göster

<rating-input form="register" name="rating"></rating-input>

Form özelliğini anlamıyla eşleştir

form

Dış formu bağlar
name

Alan adı verir
formAssociated

JS bayrağı
setFormValue

Değer gönderir

Uzman bölümündeki tüm dersler

Form-associated custom element