Published
Edited
Jun 10, 2019
Insert cell
Insert cell
html`
<input type='button' value='버튼에 나타나는 글씨' >
`
Insert cell
html`이런 걸 자주 쓰다 보니 아예 따로 태그가 새로 추가되었다<br>
<button>버튼에 나타나는 글씨</button>
`
Insert cell
html` 타입을 따로 적어주지 않으면 text 입력 형식 <br>
<input type='text' value='기본값'>
`
Insert cell
html`여러 줄의 텍스트를 입력할 수 있는 textarea 요소
<textarea rows=5>기본값
기본값
기본값</textarea>
`
Insert cell
html`
같은 name 속성으로 만든 라디오 버튼들은 그중에 딱 하나만 선택가능
<br>
<input type='radio' value='red' name="color" >빨강
<input type='radio' value='blue' name="color" >파랑
<input type='radio' value='yellow' name="color" >노랑
`
Insert cell
html`
<input type='checkbox' value='red' checked>고기포함
<input type='checkbox' value='blue'>양파포함
<input type='checkbox' value='yellow'>올리브포함
`
Insert cell
md`
## 원래 자바스크립트와 별개로 form이라는 태그로 input을 감싸서 처리
`
Insert cell
html`
<form method='get' action='http://hnu.kr/' target='_blank'>
<label><input type='checkbox' value='cheese' name="chk_c" >치즈</label>
<label><input type='checkbox' value='bacon' name="chk_b" checked>베이컨</label>
<label><input type='checkbox' value='olive' name="chk_o" >올리브</label>
<br>
<input type='text' name='msg' value='hello'>
<br>
<input type='button' value='보통 버튼은 기본적으로 form을 제출시키지 않음'>
<input type='submit' >
</form>
`
Insert cell

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.
Learn more