3. HTML 입력 양식

• 2장은 개발환경 설정이라 생략 (Chrome, Eclipse, Tomcat 설치)

1.1 HTML 태그

사용자 입력용 HTML 태그

태그	UI 형태	type 속성값	설명
<input>	텍스트 입력형	text	한 줄의 텍스트 입력
	텍스트 입력형	password	한 줄의 텍스트 암호화된 텍스트 입력
	텍스트 입력형	email	이메일 주소 입력
	텍스트 입력형	number	숫자 입력
	옵션 선택형	checkbox	체크 박스
	옵션 선택형	radio	라디오 버튼
	버튼형	submit	입력 데이터 전송 버튼
	버튼형	reset	압력 데이터 삭제 버튼
	기타	range	범위 지정
	기타	date	날짜 지정
	기타	color	색깔 지정
	기타	hidden	(UI 입력 없이) 데이터 전송
<textarea>	텍스트 입력형		여러 줄의 텍스트 입력
<select>	옵션 선택형		옵션 선택
<button>	버튼형		버튼

---

1. 텍스트 입력형: <input type="password">

   숫자를 입력받기 위한 UI가 제공, 증감버튼이 함께 표시

2. 텍스트 입력형: <input type = "email">

   <form> 태그와 <input type = "submit">이 있어야 정상 동작

3. 텍스트 입력형: <input type = "number">

   숫자를 입력받기 위한 UI, 증감 버튼이 함께 표시

4. 텍스트 입력형: <input type = "checkbox">

   다중 선택이 가능
   name 속성 값을 동일하게 지정

5. 옵션 선택형: <input type = "radio">

   단일 선택이 가능
   name 속성 값을 동일하게 지정

6. 버튼형: <input type = "submit">

   사용자 입력값을 서버로 전송 버튼
   <form> 태그가 있어야 정상 동작

7. 버튼형: <input type = "reset">

   사용자 입력값 초기화 버튼
   <form> 태그가 있어야 정상 동작

8. 기타 UI: <input type = "range">

   특정 범위 값을 입력

9. 기타 UI: <input type = "date">

   날짜를 입력받기 위한 UI 제공(value 속성이 지정되지 않을 경우, 현재 날짜가 디폴트)

10. 기타 UI: <input type ="color">

    색상을 16진수 RGB 값의 형태(#000000 ~ #ffffff)로 입력받기 위한 UI 제공

11. 기타 UI: `

    사용자의 개입 없이 미리 정의된 name과 value 속성을 서버로 전달
    별도의 UI는 제공되지 않음

12. Textarea 태그: <textarea name="comment" rows="10" cols="50" placeholder="Add your comment"></textarea>

    여러 줄의 텍스트를 입력받기 위한 UI 제공
    rows와 cols 속성 값을 이용해 크기 조정, <input>와 달리 듀얼 데크

13. Select 태그: <select name = "fruit">

    옵션 선택형, 드롭- 다운 리스트 형태의 UI
    내부에 <option> 태그를 이요하여 옵션 정의
    <input type = "radio"> 태그와 동일한 역할 수행
    <select> 태그에 multiple 속성을 추가하여 다중 선택
    multiple이 추가될 경우 checkbox 태그와 동일한 역할

14. Button 태그: <button>Write a commnet</button>

    버튼 모양의 UI

input 태그

속성	설명	필수 여부	적용 가능한 UI 형태
type	사용자 인터페이스 형식	필수	공통
name	입력 값을 서버 측에서 참조하기 위한 이름	선택	공통
value	입력 값(혹은 디폴트 값)	선택	공통
autofocus	포커스 자동 지정	선택	공통
placeholder	입력 값에 대한 설명문	선택	텍스트 입력형
required	필수 입력 여부 지정	선택	텍스트 입력형
checked	옵션에 대한 디폴트 선택 여부 지정	선택	옵션 선택형