<HTML 입력 관련 태그들>
-form 태그
○ 입력태그들을 묶어주는 태그
○ 속성
- action : 요청할 URL - 요청 파라미터를 전송할 CGI의 URL 지정
- method : 요청방식(기본 : GET)
- 기본속성
- name : 전송할 값에 name 값
- 입력태그 : <select>, <textarea>, <input>
- <select> 태그
○ 목록 리스트중 선택하도록 하는 태그
○ 속성 : multiple : 다중 선택
○ 하위태그
-<option> : 선택한 item 등록
-<textarea> 태그
○ 여러줄 입력폼
○ 속성
- cols : 열수
- rows : 행수
-<input> 태그
○ 다양한 입력폼을 만드는 태그
○ 입력폼의 모양은 Type 속성을 이용하여 지정한다.
○ type
º text : 한줄짜리 text 입력 폼
º password : 패스워드 입력 폼
º checkbox : yes/no를 선택하기 위한 선택 폼
º radio : 여러개중 하나만을 선택하기 위한 선택 폼(여러개중 한개만 선택할 경우 쓰이게 된다)
º file : 전송할 파일을 선택하기 위한 폼
º hidden : 클라이언트에게 보이지 않고 전송할 값을 지정하는 폼
º submit : 전송 버튼
º reset : 초기화 버튼
º button : 그냥버튼(버튼 모양) .javascript와 연동하여 사용한다.
º image : 이미지 전송 버튼
ex)<input type="text">
<직접 HTML구현>
1. WebContent 밑에 form폴더를 만들어준다.
2. 그리고 form폴더에 basic.html을 만들어준다.
3. form 태그를 이용하여 입력태그들을 묶어주게 코딩한다.
4. http://127.0.0.1:8088/myweb/form/basic.html에 들어가면 빈 화면으로 나온다면 성공한 것이다.
5. Select태그를 구현해 볼 것이다. 다음과 같이 구현해본다.
값이 넘어가는 과정은 name="select"로 지정되었기 때문에 select=010과 같이 적용된다.
6. 웹페이지를 실행했을때 다음과 같이 익숙해보이는 화면이 나온다면 성공한 것이다.
7. 만약 사용자가 011을 선택했을때 다른값(SKT)를 보내고 싶다면 <option value="SKT">로 작성하면 된다.
8. 값을 여러개 선택하고 싶다면 select쪽에 multiple을 추가해주면 된다.
9. 다음과 같이 출력된다. 동시에 여러개를 선택하고 싶다면 드래그를 이용하여 지정해주고, 순서적이지 않은 값을 선택하고 싶다면
ctrl을 이용하여 선택하면 된다.
이렇게 여러 선택된 값들이 넘어갈때에는 select=010&select=017&select=019로 &으로 묶여서 넘어간다.
10. 이번에는 TextArea태그를 이용해보도록 하겠다.
TextArea코드는 위와 같이 코딩하면 된다.
11. 위 사진과 같이 웹페이지에서 많이 봐오던 텍스트 영역이 나오면 성공한 것이다.
12. 이번에는 TextArea에다가 행과 열 수를 지정해보겠다.
앞에서 언급한것처럼 cols : 열수, rows : 행수를 의미한다. 위와 같은 상황이라면 한줄에 80자를 입력할 수 있으며
10줄이 늘어난다는 뜻이다.
13. 밑과 같은 그림처럼 텍스트영역이 늘어난것을 확인할 수 있다.
14. 참고로 <TextArea>와 </TextArea> 사이에 문자열을 입력하면 웹페이지에 출력된다. 이게 TextArea의 Default 값이다.
사이에다가 Default값 : 자기소개라고 넣고 돌려보기로 한다.
돌려보았더니 텍스트영역에 Default값 : 자기소개가 Default값으로 같이 출력된다.
15. 참고로 <textarea>와 </textarea>사이는 엔터와 스페이스바를 모두 인식하기 때문에 작성할떄 유의해야 한다.
다음 그림과 같이 엔터와 스페이스바를 많이 입력해보겠다.
17. 엔터와 스페이스바를 인식하기 때문에 다음과 같이 출력된다. 이에 유의하고 코딩을 해야 한다.
