Published
Edited
May 28, 2020
md`# 3장 시험공부`
html`
⟨form⟩, ⟨input⟩태그 관련 예제
<form action="http://www.naver.com/" method="post" target="_blank">
<input type="text" name="query">
<input type="submit" value="검색">
</form>
`
// method 속성의 속성값은 기본적으로 get속성값 post속성값과 동작은 똑같이 함. 주소뒤에
// 데이터가 붙냐 안붙냐 차이
// type="text"일 때 value 속성을 생략하면 검색란이 기본적으로 빈칸이 생성되고 value="여기에 입력하시오"
// 이렇게 지정해주면 검색란에 텍스트가 입력되어 있는 상태로 검색할 수 있다.
// type="submit" 속성값도 마찬가지로 value 속성을 생략해주면 기본적으로 제출이라는 버튼이 생김
// input 요소의 type 속성값에 따라 적정한 value 속성값 지정(기본값도 type마다 다른다.)
html`
<form action="http://www.naver.com/" method="get" target="_blank">
<input type="text" value="" name="query">
<input type="submit" value="검색" >
<input type="hidden" name="query2" value="secret">
<input type="reset">
</form>
`// type="hidden"에서 value 속성에 속성값이 없으면 query2= 이렇게 뜨지만
// value="secret"이렇게 주면 이렇게 뜸
// 데이터는 주소에 query2=secret게 보여주지만 무슨 데이터를 보낸지는 모르기 때문에
// post방식과 비슷하다고 생각된다.
html`
<form action="https://www.naver.com/" method="post" target="_blank">
<input type="text" name="query">
<input type="submit" value="검색">
<input type="hidden" name="query2" value="secret">
<input type="reset">
</form>
`// 2번 예제와 비슷하지만 post방식임 주소뒤에 데이터 붙지 않고 naver.com/post만 붙어있음
html`
⟨label⟩태그 관련 예제
<br>
<label>아이디(6자리이상)<input type="text"></label>
<br>
<label for="user-id">아이디(6자리이상)</label>
<input type="text" id="user-id">
`
md`### 강의 관련 출석체크용 과제 (p. 151에 내용 추가하기)
아래 form이 위에서 설명한 예들처럼 postman-echo.com 사이트에 정보를 post 방식으로 넘겨주도록
맨 밑에 submit 버튼을 만들어 넣고, 또 입력했던 내용을 모두 지우고 초기화하도록 reset 버튼을 추가해 보라.
과제 제출란에는 \`<form>\`에서부터 \`</form>\`까지 제출하면 된다.
<form action="https://postman-echo.com/post" method="post" target="_blank">
<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>
<input type="submit">
<input type="reset">
</form>
`
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.
