System.out.println("Hello, World");

'input'에 해당되는 글 2건

  1. 2012.04.20 HTML - Input 태그
  2. 2012.04.19 HTML(입력 관련 태그들) & 구현

 <, >

 - 꺽쇠의 의미. 

&lt -> "<"

&gt -> ">"


○ type = "text"


value는 텍스트창에 기본값으로 넣는 용도로 쓰이며, size는 화면에 길이가 X인 텍스트창을 표시하며 maxlength는 최대 입력 길이 제한을 의미한다.



○ type = "password"

패스워드 입력을 할 수 있는 입력폼이 생성된다. 텍스틑 입력할때에는 안보이게 표시된다.


○ type = "checkbox"

위 그림과 같이 체크박스가 생긴다.


○ type = "checkbox" label 연결하기

하루동안 안보이기를 선택해도 체크박스에 체크가 된다. 


라벨 연결은 다음과 같이 연결해도 되지만 전자처럼하는 방법이 정석이니 참고만 한다.


○ type = "radio"


○ type = "radio" 그룹묶기

type="radio"에서 name을 모두 동일하게 하면 그룹으로 묶여진다. 위와 같은 결과 화면에서 no를 선택한 후 ok를 선택하면 되면 
no에 있던 버튼이 사라지고 ok에 표시된다. 

○ type = "file"

위와 같은 화면에서 찾아보기를 선택하면

위 화면과 같이 파일을 선택하는 화면이 출력된다.


파일을 선택하면 위와 같이 표시된다. 서버로 보낼때에는 경로가 보내지는게 아니라 파일이 전송된다.


○ type = "hidden"

화면에서는 아무것도 표시가 안된다. 


○ type = "button"

type="button"은 단독으로 쓰이지 않고 자바 스크립트랑 같이 연동해서 쓰인다. 뒤에 있는 onclick은 자바스크립트다.

value는 버튼에 쓰여질 문구로 쓰인다.



○ type = "reset"



위와 같이 체크박스와 버튼 등을 선택한 다음 [초기화버튼]을 누르게 되면


위와 같이 선택된것이 모두 초기화 된다. 


○ type = "button"

전송버튼을 누르게 되면 input에 입력된 모든 값들이 넘어가게 된다. 












Posted by 김마농

<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. 엔터와 스페이스바를 인식하기 때문에 다음과 같이 출력된다. 이에 유의하고 코딩을 해야 한다.


Posted by 김마농