Meydan okuma - Karmaşık form
Hidden, file, range, color ve output içeren bir form yazarsın.
Karmaşık form meydan okuması
Bu meydan okuma, ileri seviye form konusunu tüm yönleriyle yoklar: <fieldset> ve <legend> ile gruplama, gizli alan (type="hidden"), dosya alanı (type="file") multiple ve accept ile, kaydırıcı (type="range"), renk seçici (type="color"), canlı sonuç için <output>.
Formun action ve method="post" öznitelikleri olmalı; enctype="multipart/form-data" dosya yüklemeyi sağlar. Her alanın bir <label>'i olmalı; for ve id aynı değere eşitlenince ikisi bağlanır. autocomplete ile tarayıcı otomatik doldurma yapar.
Uygulama Karmaşık formu sıfırdan yaz
Body içine bir <form action="/kayit" method="post" enctype="multipart/form-data"> aç. İçine bir <fieldset> ve <legend> ekle (legend içine 'Profil' yaz). fieldset içinde sırayla şunlar olsun: bir <input type="hidden" name="adim" value="1">; bir <label> + <input type="file" name="avatar" accept="image/*" multiple>; bir <label> + <input type="range" name="yas" min="18" max="99">; bir <label> + <input type="color" name="renk">; bir <label> + <output name="sonuc">Bekliyor</output>. Bitirirken bir <button type="submit">Kaydet</button> ekle.
Örnek çözümü göster
<body>
<form action="/kayit" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Profil</legend>
<input type="hidden" name="adim" value="1">
<label for="avatar">Avatar</label>
<input id="avatar" name="avatar" type="file" accept="image/*" multiple>
<label for="yas">Yaş</label>
<input id="yas" name="yas" type="range" min="18" max="99">
<label for="renk">Renk</label>
<input id="renk" name="renk" type="color">
<label for="sonuc">Durum</label>
<output id="sonuc" name="sonuc">Bekliyor</output>
<button type="submit">Kaydet</button>
</fieldset>
</form>
</body>Kendini test et
-
Bir kaydırıcı (slider) alanı yazmak istiyorsun. input etiketinin type özniteliğine ne yazmalısın?
- type="slider"
- type="range"
- type="number"
- type="scroll"
Cevabı göster
type="range" — Doğru. type="range" sayısal bir kaydırıcı verir; min ve max ile sınırları belirlersin.
-
output elemanını yaz
<form> <label for="miktar">Miktar</label> <input id="miktar" type="range" min="0" max="100"> <____ id="sonuc" for="miktar">0</output> </form>Cevabı göster
<form> <label for="miktar">Miktar</label> <input id="miktar" type="range" min="0" max="100"> <output id="sonuc" for="miktar">0</output> </form> -
input türünü rolüyle eşleştir
- type="hidden"
- Gizli veri
- type="file"
- Dosya yükleme
- type="range"
- Kaydırıcı
- type="color"
- Renk seçici
- <output>
- Canlı sonuç