HTML - 3 [FORM]

폼(Form)이란?

사용자의 데이터를 서버에 전송하는 방법이다.

• 로그인 기능을 구현하여 아이디 및 비밀번호를 입력하는 경우
• 회원가입 기능을 위해 개인정보를 입력하는 경우
• 글을 작성하거나 파일을 전송하는 경우

<form action="데이터를 수신할 URL" method="데이터 전송 방법">

</form>

method - GET / POST

 

GET

• URL에 정보가 담겨서 전송된다.
• 전송할 수 있는 정보의 길이가 제한되어 있다.
• 퍼머링크로 사용될 수 있다.

POST

• header의 body에 담겨서 전송된다.
• URL 상에 전달한 정보가 표시되지 않는다.
• GET에 비해서 보안상 약간의 우위에 있다.
• 전송할 수 있는 데이터의 길이 제한이 없다.
• 퍼머링크로 사용할 수 없다.
• 서버 쪽에 어떤 작업을 명령할 때 사용한다.
  (데이터의 기록, 삭제, 수정 등)

<input type="" name="" value="" disabled="" readonly="">

• type : text, password, radio, checkbox, file
• name : 데이터의 이름
• value : 데이터의 기본 값
• disabled : 값으로 disabled로 설정하면 텍스트 필드 비활성화, 데이터 전송도 불가
• readonly : 값으로 readonly로 설정하면 텍스트 필드 비활성화, 데이터 전송은 가능

hidden data : 화면상에 노출되지 않는 컨트롤을 생성, 서버로 전달은 가능

 

textarea : 여러줄에 텍스트를 입력할때 사용

<textarea name="" rows="" cols="" disabled="" readonly=""> 값 </textarea>

rows : 입력한 행의 수 만큼 높이가 설정

cols : 입력한 열의 수 만큼 폭이 설정

 

라디오버튼

<input type="radio" name="" value="" checked="checked">

여러개의 항목 중에서 하나의 항목만 선택 할 수 있게 하는 태그

라디오 버튼 생성 시 name값 일치, value값은 상이 해야한다.

 

콤보박스

<select name="이름" multiple="multiple"> # multiple로 지정하면 여러 개의 항목을 선택할 수 있음

<option value="" selected="selected"> 값 </option>

</select>

 

체크박스

<input type="checkbox" name="" value="">

name의 이름 끝에 []을 붙이면 서버쪽에서 배열로 인식한다.

 

파일 업로드

<form action="" method="" enctype="multipart/form-data"> #enctype 코드 작성 필수

<input type="file" name="">

</form>