Published
Edited
Jun 9, 2020
1 star
form = html`
<form action="https://postman-echo.com/post" method="post" target="_blank">
<fieldset>
<legend>관심 뉴스 분야 선택 (1-4개)</legend>
<label><input name="politics" type="checkbox">정치</label>
<label><input name="economy" type="checkbox">경제</label>
<label><input name="national" type="checkbox">사회</label>
<label><input name="world" type="checkbox">세계</label>
<label><input name="science" type="checkbox">과학/기술</label>
<label><input name="lifestyle" type="checkbox">생활/문화</label>
<label><input name="entertainment" type="checkbox">연예/엔터테인먼트</label>
<label><input name="sports" type="checkbox">스포츠</label>
</fieldset>
<button type="submit">선택</button>
<button type="reset">초기화</button>
<output style="color:red"></output>
</form>
`
form.onsubmit = event => {
event.preventDefault() // submit의 기본 동작이 일어나지 못하도록
const output = form.querySelector("output")
const count = Array.from( form.querySelectorAll('[type="checkbox"]') )
.filter(b => b.checked).length
if (count < 1) {
output.textContent = "관심 뉴스를 한 분야 이상 선택해 주세요."
setTimeout( () => output.textContent="", 3000 )
return false;
}
if (count > 4) {
output.textContent = "관심 뉴스는 네 분야까지만 선택 가능합니다."
setTimeout( () => output.textContent="", 3000 )
return false;
}
form.submit() // 위의 validiation 검사에서 걸리지 않고 통과되면
}
form.onchange = event => {
// 여기에 핸들러를 적절히 작성
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
