웹프로그래밍첫걸음 5장. 폼 활용하기

5장. 폼 활용하기

5.1 폼 이해하기

• <form> 요소의 사용
  • 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때
  • 사용자와 애플리케이션이 상호작용
  • (사용자 입력⇒전송버튼⇒애플리케이션(서버 측)에 전달⇒실행결과 반환)
• <form> 요소의 역할
  • 사용자가 입력하는 정보를 하나로 묶어서 애플리케이션에 전달
    • 다양한 입력 양식을 그룹핑하고 전송방법을 설정
  • <form> 요소 내 사용자의 정보 입력 방식
    • <input>, <textarea>, <select> 등의 입력 요소를 이용

<form name="이름" method="get/post" action="애플리케이션 주소">

• method 속성: 데이터 전송 방식 지정
  • get 방식: 전송할 데이터를 URL 주소 뒤에 포함
  (엽서의 특징 ㅡ 데이터가 한정적, 보안에 취약. 적은 양 데이터 보낼 때)
  • post 방식: 프로그램의 입출력 방식을 사용, 데이터 양에 제한 없다.
  (편지의 특징 ㅡ 데이터 양의 제한 X, 보안 유지 가능. 많은 양 데이터 보낼 때)
• action 속성: 데이터 처리할 애플리케이션 주소 (웹서버 경우 URL)
• name 속성: 폼 요소에 대한 이름

5.2 기본 형식으로 입력하기

• 가장 기본적인 입력 폼: <input>, <textarea>, <select> 등 요소
• <input> 요소의 속성

<input type="입력형식" name="변수명" value="입력 값">

• type 속성은 입력 폼의 유형
  • 텍스트 관련: text, password
  • 선택 관련: radio, checkbox
  • 버튼: submit, reset, button, image
  • 기타: file, hidden

5.2.1 텍스트 입력

• text: 문자열 입력 필드 (한 줄)

<input type="text" name="변수명" value="초기값(입력받은 값 전달)">

• password: 암호 입력 필드

<input type="password" name="변수명">

• <textarea> 요소: 텍스트 영역 필드 (여러 줄)

<textarea name="이름" cols="열의 수(글자 수)" rows="행의 수(줄 수)"></textarea>

5.2.2 선택항목의 입력

• radio: 라디오 버튼 → <특징> 단일선택>

<input type="radio" name="변수명" value="선택값" checked>

• checkbox: 체크박스 선택 → <특징> 다중(중복)선택

<input type="checkbox" name="변수명" value="선택값" checked>

• <select> 요소 내에 <option> 항목
  • 드롭다운 형태(size=1) 혹은 스크롤 박스 형태(size>1)
  • multiple 속성: 다중 선택
  • 각 항목은 <select> 요소 내에서 <option> 요소로 정의

<select name="job" size="1">
	<option value="student" selected>학생</option>
	<option value="company">회사원</option>
</select>

5.2.3 버튼 입력

• submit: 전송 버튼
• reset: 초기화 버튼
• button: 일반 버튼
• image: 이미지 버튼

5.2.4 기타 입력 필드

• file: 파일 선택하기(업로드)
• hidden: 데이터 숨김

5.2.5 입력 필드의 그룹화

5.3 고급 형식으로 입력하기

5.3.1 서식이 있는 텍스트 입력

5.3.2 날짜와 시간 입력