<form id="reviewForm" autocomplete="off"> <div> <label>Overall rating</label> <div class="stars" id="starWidget" aria-label="Star rating" role="radiogroup"> <span class="star" data-value="1">☆</span> <span class="star" data-value="2">☆</span> <span class="star" data-value="3">☆</span> <span class="star" data-value="4">☆</span> <span class="star" data-value="5">☆</span> <span class="small" id="ratingValue">0</span> </div> </div>
title.addEventListener('input', () => titleCount.textContent = title.value.length); body.addEventListener('input', () => bodyCount.textContent = body.value.length);
// image previews const imagesInput = document.getElementById('images'); const imagePreview = document.getElementById('imagePreview'); imagesInput.addEventListener('change', () => imagePreview.innerHTML = ''; Array.from(imagesInput.files).slice(0,6).forEach(file => const img = document.createElement('img'); img.className = 'preview-img'; img.alt = file.name; const reader = new FileReader(); reader.onload = ev => img.src = ev.target.result; reader.readAsDataURL(file); imagePreview.appendChild(img); ); );
<div> <label>Would you recommend?</label> <div class="row"> <label><input type="radio" name="recommend" value="yes" /> Yes</label> <label><input type="radio" name="recommend" value="no" /> No</label> <label><input type="radio" name="recommend" value="unsure" checked /> Unsure</label> </div> </div>