안녕하세요
로로봉입니다 : )
오늘은 HTML의 폼 양식에 대해 알아보도록 하겠습니다.
뷰 페이지는 사용자에게 요청의 결과를 보여주기도 하지만 사용자의 입력을 받기도 합니다.
아이디나 패스워드, 신호 데이터 등의 입력을 필요로 하는 페이지를 만들려면 폼 양식이 필요합니다.
<form></form> 태그는 사용자가 입력한 데이터를 수집하여 서버로 전송하는 처리를 합니다.
<form action="url" method="전송방식">
<input>
</form>속성 action은 폼 태그가 전송한 데이터를 받을 서버 페이지의 url과 method는 전송 방식을 설정합니다.
전송 방식에는 GET 방식과 POST 방식이 있는데, GET 방식은 입력 데이터를 URL에 연결하여 전송하므로 웹 페이지 주소와 함께 그대로 노출이 됩니다.
그렇기 때문에 보안에 취약합니다.
POST 방식은 패킷 안에 데이터를 담아서 전송하기 때문에 정보가 외부에 보이지 않으므로 보안이 필요한 데이터는 POST 방식을 사용합니다.
폼 태그는 입력 양식들을 하나의 단위로 묶어 서버로 전송하므로 내부에 여러 종류의 입력 양식을 사용할 수 있습니다.
1) 텍스트 박스
한 줄 입력 박스로 input type에 text로 설정합니다.
<form>
이름 : <input type="text" name="id"><br/>
번호 : <input type="text" name="number" value="123456">
</form>
텍스트 박스의 속성에는 disabled와 readonly 속성이 있습니다.
disabled는 이름대로 사용 불가로 만드는 것이고, readonly는 읽기만 가능한 상태로 설정됩니다.
<form>
사용불가 : <input type="text" name="id" disabled><br/>
읽기전용 : <input type="text" name="number" value="123456" readonly>
</form>
2) 패스워드 박스
패스워드 박스는 텍스트 박스와 동일하나 입력시에 데이터가 보이지 않게 됩니다.
type은 password로 설정하면 됩니다.
<form>
패스워드 : <input type="password" name="pwd">
</form>
3) 체크 박스
체크 박스는 type을 checkbox로 설정합니다.
한 그룹으로 묶기 위해선 name값을 동일하게 해주며, 체크 시 서버로 전송되는 데이터는 value 값이므로 체크 박스마다 value 값을 다르게 해주면 됩니다.
<form>
선택사항<br/>
<input type="checkbox" name="select" value="1">선택항목 1<br/>
<input type="checkbox" name="select" value="2">선택항목 2<br/>
<input type="checkbox" name="select" value="3">선택항목 3<br/>
</form>
4) 라디오 박스
라디오 박스는 한 그룹에 하나만 선택할 수 있는 입력 방식입니다.
type에 radio로 설정하면 됩니다. 체크 박스와 동일하게 한 그룹으로 묶으려면 name값을 동일하게 해주면 됩니다.
<form>
라디오 버튼 선택<br/>
<input type="radio" name="select" value="1">선택항목 1<br/>
<input type="radio" name="select" value="2">선택항목 2<br/>
<input type="radio" name="select" value="3">선택항목 3<br/>
</form>
5) 텍스트 영역
텍스트 박스는 한 줄만 입력이 가능하지만 텍스트 영역은 여러 줄을 입력할 수 있습니다.
텍스트 영역은 <textarea> 태그를 사용합니다.
<form>
<textarea name="content" rows="5" cols="30">
텍스트 영역 기본 값
</textarea>
</form>
6) 콤보 박스
콤보 박스는 목록을 드롭 다운으로 보여주는 것으로 <select>를 사용합니다.
전체 목록을 <select></select>로 묶고 각 항목은 <option></option>으로 구분합니다.
<form>
<select name="select">
<option value="1">선택 1</option>
<option value="2">선택 2</option>
<option value="3">선택 3</option>
</select>
</form>
7) 히든
웹 페이지를 실행하면 화면에는 안 보이지만 value 값은 서버로 전송 됩니다. type 속성은 hidden을 사용합니다.
주로 사용자에게는 보여줄 필요가 없지만 서버로 데이터를 전송해야 할 경우 사용합니다.
<form>
<input type="hidden" name="type" value="HiddenData"/>
</form>8) 일반 버튼
버튼은 type을 button으로 설정하고, 버튼에 표시될 텍스트는 value로 설정합니다.
<form>
<input type="button" value="버튼"/>
</form>
9) 전송 버튼
전송 버튼은 사용자가 입력한 데이터를 서버로 전송하는 버튼입니다.
이 버튼을 클릭하지 않으면 입력 양식에 입력한 데이터가 서버로 전송되지 않습니다.
전송 버튼을 클릭하면 action에 지정한 서버 페이지로 데이터를 전송하는데 method에 설정한 전송 방식을 따릅니다.
<form action="a.jsp" method="post">
<input type="submit" value="전송"/>
</form>
10) 취소 버튼
취소 버튼은 입력 양식에 입력한 데이터를 초기화하는 버튼으로 type은 reset으로 설정합니다.
좋아요♥ + 구독 부탁드립니다 : )
'개발 정보 > 웹개발' 카테고리의 다른 글
| [웹개발] HTML iframe 만들기 (0) | 2020.12.02 |
|---|---|
| [웹개발] HTML 블록 만들기 (0) | 2020.12.02 |
| [웹개발] HTML 테이블 만들기 (0) | 2020.12.01 |
| [웹개발] HTML 페이지 이동, 이미지 출력, 리스트 출력 (0) | 2020.12.01 |
| [웹개발] HTML 스타일 (0) | 2020.12.01 |
댓글