HTML input form öznitelikleri
Önceki ders required, placeholder ve aralıklarla alanı inceltti. Input form öznitelikleri başka soru sorar: hangi form sahibi, bir düğme action'ı geçici değiştirebilir mi? Yıldız form dışında form="id". Submit'teki form* yalnızca o tıklamanın hedefini değiştirir.
Form ilişkilendirme neden önemli
Çoğu alan form içinde. Bazen düzen denetimi başka yere koyar. İlişki yoksa payload'a girmez. form, form id'siyle bağlar. İç içe varsayılan olarak daha net; ilişki zor düzenler için kaçış yoludur.
Doğrudan yanıt
1) form'a id. 2) Dışarıda form="aynı-id". 3) name ve label hâlâ gerekir. 4) Submit düğmesinde isteğe bağlı formaction, formmethod, formenctype, formnovalidate, formtarget yalnızca o tıklama. 5) Sahiplik ve yönlendirme — önceki değer kuralları değil.
📊 Form association and submit overrides
| Attribute | Where | Beginner tip |
|---|---|---|
| form | input (or other control) | Value must match the form’s id exactly |
| formaction | submit button | Overrides form action for that click only |
| formmethod | submit button | Overrides method (get/post) for that click |
| formenctype | submit button | Overrides enctype when uploading via that button |
| formtarget | submit button | Overrides where the response opens (_blank, etc.) |
Ödeme: form dışında alan
Kısa checkout e-posta ve adedi içeride tutar. Promo sonra gelir — label ve name ile — form="checkout" ile katılır.
<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">
<button type="submit">Pay</button>
</form>
<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">
Ödeme demosunu okuyun
- id=checkout kanca
- form=checkout promo'yu gönderime bağlar
- name=promo hâlâ anahtar
- İçerideki e-posta/adet form= istemez
- Her görünür denetimde label
- required/min olabilir; odak ilişki
İki düğme: action override
Bazen bir form, iki hedef — taslak ve yayınla. Bir form; düğme başına farklı formaction. Yalnızca o tıklama.
<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>
<label for="body">Body</label>
<input id="body" name="body" type="text">
<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>
İki düğme demosunu okuyun
- Varsayılan yol form action
- Taslak formaction ile başka URL
- formmethod=post niyeti korur
- İkisi de aynı adlı alanları gönderir
- form= sahiplik; formaction düğme yönlendirme
- Sonraki: çok satırlı textarea
İlişki mi override mu
- Ağaç dışında alan: form="form-id"
- Aynı alanlar, farklı URL: formaction
- Bir tıklamada farklı method: formmethod
- Yükleme enctype: formenctype
- Doğrulamayı atla (nadir): formnovalidate
- Yanıtı başka yerde aç: formtarget
- Düzen izin verirse iç içe tercih edin
- required/placeholder ile karıştırmayın
Alıştırma — sahiplik ve override
- Checkout; promo'dan form= kaldırıp geri koyun
- id yazım hatası — ilişki bozulur
- İkinci dış notes alanı form=checkout ile
- Taslak formaction yer değiştirin
- Kısa formmethod=get deneyin
- Cümle: form= sahibini seçer; formaction yalnızca o düğme
- Promo'yu içe alıp form= kaldırın
Kolay hatalar
- id ile form= yazım farkı
- name'siz form=
- Gereksiz ayrık alanlar
- Önceki yardımcılarla karışıklık
- form= ile formaction karıştırmak
- Her denetimin form= istediğini sanmak
- Alanları düzeltmek yerine formnovalidate
Özet
- form="id" dış denetimi bağlar
- Eşleşen id; name ve label önemli
- Düğmeler formaction/formmethod/form* ile override
- Mümkünse iç içe; düzen zorlarsa ilişkilendir
- Sahiplik/rota ≠ önceki alan kuralları
- Sonraki: textarea
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek