Published
Edited
Apr 2, 2020
1 star
Insert cell
Insert cell
md`
<form action="http://hnu.kr/" method="get" target="_blank">
<input type="text" name="query">
<input type="submit" value="검색">
</form>

form 요소에서 method의 속성의 기본값은 get

get 방식으로 제출하면 form의 데이타가 URL에 포함되어 제출

input 요소의 type 속성값에 따라 적절한 value 속성값 지정 (기본값도 type 마다 다르다)
`
Insert cell
html`
<form action="https://postman-echo.com/get" method="get" target="_blank">
<input type="text" name="query">
<input type="submit" value="검색">
<input type="hidden" name="query2" value="secret">
<input type="reset">
</form>
`
Insert cell
html`
<form action="https://postman-echo.com/post" method="post" target="_blank">
<input type="text" name="query">
<input type="submit" value="검색">
<input type="hidden" name="query2" value="secret">
<input type="reset">
</form>
`
Insert cell
md`### 강의 관련 출석체크용 과제 (p. 151에 내용 추가하기)
아래 form이 위에서 설명한 예들처럼 postman-echo.com 사이트에 정보를 post 방식으로 넘겨주도록
맨 밑에 submit 버튼을 만들어 넣고, 또 입력했던 내용을 모두 지우고 초기화하도록 reset 버튼을 추가해 보라.

과제 제출란에는 \`<form>\`에서부터 \`</form>\`까지 제출하면 된다.

<form>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
<label><input type="radio" name="subject1" value="speaking">회화</label>
<label><input type="radio" name="subject1" value="grammar">문법</label>
<label><input type="radio" name="subject1" value="writing">작문</label>
<p>다음 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
<label><input type="radio" name="subject2" value="physics">물리</label>
<label><input type="radio" name="subject2" value="chemistry">화학</label>
<label><input type="radio" name="subject2" value="mathematics">수학</label>
</fieldset>
<fieldset>
<legend>메일링</legend>
<p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 선택 가능)</p>
<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
<label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
<label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
</fieldset>
</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