다양한 폼을 활용해 설문조사 양식 작성하기
<!doctype html>
<html>
<head>
<title>web02.2.3</title>
<meta charset="utf-8">
</head>
<body>
<h1>설문조사</h1>
<fieldset name="basic">
<legend> 기본정보 </legend>
이름: <input type="text" name="name"/><br>
나이: <input type="number" name="age" min="0"/><br>
성별: <input type="radio" name="gender" value="m" checked/> 남성
<input type="radio" name="gender" value="f" checked/> 여성
</fieldset>
<br>
<fieldset name="interest">
<legend>관심분야(1개이상)</legend>
<input type="checkbox" name="interest" value="1" />디지털 콘텐츠
<input type="checkbox" name="interest" value="2" />웹프로그래밍
<input type="checkbox" name="interest" value="3" />데이터베이스
<input type="checkbox" name="interest" value="4" />기계학습
</fieldset>
<br>
<fieldset name="score">
<legend>다음 문항에 대해 5점 척도로 답하세요</legend>
본 세미나의 주제는 만족스러운가? 1 <input type="range" min="1" max="5"/> 5<br>
본 세미나의 초청강사는 만족스러운가? 1 <input type="range" min="1" max="5"/> 5<br>
본 세미나의 강의시간은 적절한가? 1 <input type="range" min="1" max="5"/> 5<br>
</fieldset>
<br>
기타 의견 사항
<br>
<textarea cols="100" rows="5" placeholder="의견을 입력하세요.">의견을 입력하세요.</textarea>
<br>
<input type="button" value="확인"/>
<input type="reset" value="취소"/>
</body>
</html>
* <input type="number" name="age" min="0"/>
나이를 입력하는 입력폼에서 input태그의 type을 "number"로 지정해 숫자만 입력받을 수 있도록 한다. 이 때 숫자외의 문자를 입력하면 입력한 내용이 보이긴 하지만 엔터를 누르면 사라진다.
chrome의 경우 마우스를 나이 입력창 위에 둘 때 스크롤바가 나타난다.
나이의 값을 입력받기 때문에 min값을 0으로 설정했다. 아무것도 입력되지 않은 상태에서 아래스크롤바(▼)를 누르면 0부터 시작된다.
* <input type="checkbox" name="interest" value="1" /> 디지털 콘텐츠
체크박스는 성별 입력란에서 사용한 라디오박스와 달리 다중선택이 가능하다.
checkbox의 name이 같은 체크박스들이 하나의 전체적인 체크박스로 묶인다.
이 때 checked 속성을 추가하면 초기화면에서 선택된 채로 표시된다.
* <textarea ~~ placeholder="의견을 입력하세요."> 의견을 입력하세요 </textarea>
처음 지정한 rows의 수보다 더 많이 입력할 경우 자동으로 스크롤바를 생성한다.
SMALL
'Web > Web Programming' 카테고리의 다른 글
| WEB 02.1.1 유튜브 영상 공유 (0) | 2020.07.22 |
|---|---|
| WEB 02.2.4 예약하기 (0) | 2020.07.22 |
| WEB 02.2.1 ~ WEB 02.2.2 (0) | 2020.07.21 |
| WEB02.1.4 이미지 삽입 및 이동 (0) | 2020.07.21 |
| WEB02.1.3 오디오 및 비디오 삽입 (0) | 2020.07.19 |