[html] 웹 페이지의 기본 뼈대 - 다양한 Form 양식

 

<form> </form> 태그 :

사용자가 입력한 데이터를 수집하여 서버로 전송하는 처리를 한다. 

<form action = "url" method = "전송방식"> 
<input> 
</form>

전송방식에는 get 과 post 방식이 있다. 

get 방식은 입력 데이터를 url 에 연결하여 전송함으로 웹페이지 주소와 함께 그대로 노출 된다.

반면, post 방식은 패킷 안에 데이터를 담아서 전송하기 때문에 정보가 외부에 보이지 않으므로 데이터 보안에 좋다.

name 과  id 도 지정가능함으로 값을 불러오는 일 있을 때 간편하게 사용 가능하다. 이건 다음에 자세히 알아보도록 하쟈

<form action="/webApp1/Myservlet" method="post" name = "f" id= "myform">

---

1) 텍스트 박스 

 

한 줄 입력 박스로 input type에 text로 설정하고 텍스트를 입력 할 수 있는 박스이다. 텍스트박스의 속성에는 disabled 와 readonly 있다. disabled는 사용 불가로 만드는 것이고 readonly는 읽기만 가능한 상태로 설정 된다. 

disabled : <input type = "text" name = "name" disabled><br/> 
<br/>
readonly : <input type = "text" name = "email" value= "aaa@test.com" readonly><br/>
<br/>
기본 텍스트 박스 : <input type = "text" name = "id" > <br/>
 <br/>

---

2) 패스워드 박스 

 

패스워드 박스는 텍스트 박스와 동일하나 입력시에 데이터가 보이지 않는다. type 은 password로 설정한다. 

Pwd : <input type = "password" name = "pwd" > <br/>

---

3) 컬러 박스 

 

컬러 박스는 컬러를 선택 할 수 있는 박스가 생성 된다. type 은 color 로 지정해준다. 

Color : <input type = "color" name = "color" > <br/>
<br/>

---

4) 날짜 박스 

 

날짜를 선택 하는 캘린터가 나오는 박스로 type 을 date 라고 지정 한다. 

Date : <input type = "date" name = "date" > <br/>
<br/>

---

5) 체크 박스 

 

type 을 checkbox로 설정한다. 체크박스를 한 그룹으로 묶기 위해 name 을 같이 설정해준다.

value에는 체크 시 서버로 전송 되는 데이터 값을 지정해 준다. 아무것도 지정하지 않았다면 선택항목으로 지정 해준 text가 value 값으로 전달 된다.

 

즉, 하기 예시는 오렌지, 키위, 사과,배 를 클릭 하더라도 지정해준 value 값인 1,2,3,4 가 데이터 값으로 전달 된다. 

체크박스는 여러개 선택이 가능하다. 

<!-- 체크박스는 여러개 선택 가능 -->
<!-- checked 속성은 체크 된 상태로 시작한다.  -->
체크박스 : <input type = "checkbox" name = "ch" value = "1" checked  > 오렌지  
<input type = "checkbox" name = "ch" value = "2" > 키위 
<input type = "checkbox" name = "ch" value = "3" > 사과
<input type = "checkbox" name = "ch" value = "4" > 배 <br/>
<br/>

---

6) 라디오 버튼

 

type 을 radio 로 지정해준다. 해당 버튼 역시 체크박스와 비슷하게 선택을 하는 버튼이다. 라디오 버튼은 한개만  선택 가능하다. checked 속성은 체크 된 상태로 화면에 보여주는 기능이다.  

라디오 버튼 : <input type ="radio" name = "ra" value = "f" checked >  여성복
 <input type ="radio" name = "ra" value = "m"> 남성복 
 <input type ="radio" name = "ra" value = "c"> 아동복 <br/> 
<br/>

---

7) 콤보 박스 

 

콤보 박스는 목록을 드롭다운으로 보여주는 것으로 <select> 를 사용 한다. 

전체 목록을 <select></select> 묶고 각 항목은 <option></option>으로 구분한다.  

<select name = "sel"> 
<option value = "a"> 1학년 </option>
<option value = "b"> 2학년 </option>
<option value = "c"> 3학년 </option>
<option value = "d"> 4학년 </option>
</select> <br/> 
<br/>

---

8) 여러 줄을 입력 하는 텍스트 박스 

 

1번의 텍스트 박스는 한 줄만 입력이 가능하지만 해당 속성은 여러 줄 입력이 가능하다. <textarea> </textarea> 태그를 사용하고 row (세로),  cols(가로) 를 이용하여 텍스트 박스 크기 조절이 가능하다.  

여러줄 입력 하는 텍스트 박스 : <textarea rows = "5" cols= "40"> 여러줄 입력 하는 텍스트 박스 </textarea><br/>

---

9) 약관 박스 

 

<iframe> </iframe> 을 이용하여 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있는 속성이다. 

약관: <iframe src = "../img/네이버.gif" style = "width : 500px; height : 500 px"></iframe>

---

10) 일반 버튼 

 

type 을  button 이라고 지정해준다. value는 버튼에 출력 될 껍데기 글자를 말한다. 

버튼을 클릭 했을 때 원하는 동작을 적어 줄 수 있는데 그 단어가 onclick 이고 함수를 호출 한다거나("a()" 

) 혹은 alert 을 통해 팝업창에 메세지를 띄어 줄 수 도 있다. 

<input type = "button" value = "무슨버튼일가요" onclick = "a()"> <br/>
<input type = "button" value = "일반버튼" onclick = "javascript : alert ('button click!!')"> <br/>

---

11) 히든 버튼

 

실행화면에는 보이지 않지만 value 의 값은 서버로 전송 된다. 사용자에게는 보여줄 필요가 없지만 서버로 데이터를 전송해야 할 경우 사용하는 버튼이다. 

<input type = "hidden" name = "h" value = "ase">

---

12) 취소 버튼 

취소 버튼은 입력 양식에 입력한 데티어를 초기화 하는 버튼으로 type 는 reset 으로 설정한다.

 <input type = "reset" value = "초기화"> <br/>

---

13) 전송 버튼

 

전송 버튼은 사용자가 입력한 데이터를 서버로 전송하는 버튼이다. 이 버튼을 클릭하지 않으면 입력 양식에 입력한 데이터가 서버로 전송 되지 않는다. 해당 버튼은 <form> 생성 시 ( <form action = "url" method = "전송방식">  ) 지정했던 "url" 서버페이지로 데이터를 전송하고 선택 한 "전송방식"을 따른다. 

<input type = "submit" value = "데이터 전송">