<form> 태그

안녕하세요 오늘은 form 태그를 정리해보도록 하겠습니다.

 

일반적으로 form태그를 사용하는 이유는

사용자가 입력하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그입니다.

​

간단하게 로그인 할때 아이디와 패스워드의 공간을 만든다고 생각하시면 됩니다.

 

 

 

form태그 예시화면

 

form 태그의 속성

 

폼 태그 속성에는 name, action, method, target 등이 있습니다.

​

<form action = "/success.html" accept-charset="utf-8" name = "form_info" method = "get" target="_blank">

 

 

​

action : 폼 전송 버튼을 눌렀을때 이동하는 페이지의 경로를 지정해주면 됩니다.

 

 

name : 폼을 식별하기 위한 이름을 여기에 작성합니다.

 

 

accept-charset : 폼 전송시 사용할 문자 인코딩을 지정합니다.

(즉 한국어나 영어와 같은 언어 설정을 해준다고 생각하시면 됩니다.).

 

 

 

 

target : action에서 지정한 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

속성값	설명
_blank	서버로부터 받은 응답을 새로운 윈도우나 탭(tab)에서 보여줌.
_self	기본값으로 생략 가능. 서버로부터 받은 응답을 링크가 위치한 현재 프레임에서 보여줌.
_parent	서버로부터 받은 응답을 현재 프레임의 부모 프레임에서 보여줌.
_top	서버로부터 받은 응답을 현재 윈도우 전체에서 보여줌.
프레임 이름	서버로부터 받은 응답을 명시된 프레임에서 보여줌.

 

 

 

method : 폼을 서버에 전송할 타입을 정합니다. (GET 또는 POST)

​

GET = 파라미터를 정보를 전송 URL에 보이게 전송시키는 방법

(보안이 필요 없고 파라미터 정보를 한눈에 보기위해 사용)

​

POST = 파라미터를 정보를 전송 URL에 보이지 않게 전송시키는 방법

(보안이 필요한 로그인이나 이런 류의 정보를 처리할때 사용)

​

​

 

<input> 태그

 

이번에는 form태그안에서 사용하는 input 태그에 대해서 말씀드리겠습니다.

​

​

input 태그의 속성

 

속성값	설명
type	태그 모양을 다양하게 변경할 수 있습니다.
name	태그의 이름을 지정합니다.
readonly	읽기 전용으로 합니다. ( 수정할수 없이 볼수만 있음)
maxlength	최대 글자수를 지정합니다.
required	반드시 입력해야하는 태그를 지정할수 있습니다. 입력하지 않았을시 에러메세지가 출력됩니다.
autofocus	페이지가 로딩되자마자 자동으로 지정된 포커스로 이동합니다.
placeholder	입렵할 값에 대한 힌트를 줍니다 (예: 아이디를 입력하시오.)

 

​

type의 종류

 

text

<input type = "text" name = "name" required placeholder="이름을 입력하세요"/>

 

 

 

대부분 텍스트를 넣을때 기본적으로 사용하는 타입입니다.

 

 

 

 

---

password

<input type = "password" name = "password"/>

 

 

 

로그인화면에서 패스워드를 입력 할때 사용합니다.

 

 

 

 

---

radio

남<input type = "radio" name = "gender" /> 여<input type = "radio" name = "gender" />

 

 

 

보통 다수의 선택에서 하나만 선택을 할때 사용하는 타입입니다.

 

 

 

 

---

checkbox

연예<input type = "checkbox" name = "checkbox1" /> 스포츠<input type = "checkbox" name = "checkbox2" /> IT<input type = "checkbox" name = "checkbox3" />

 

 

 

다수의 선택을 가능하게 하고자 할때 사용하는 타입입니다.

 

 

 

 

---

file

<input type = "file" name = "file" accept=".gif, .jpg, .png" />

 

 

 

파일을 첨부할때 사용하는 타입이다

​

accept 속성은 해당 확장자로만 파일을 선택할수 있게합니다.

 

audio/* 은 모든 오디오 파일을 보여줍니다.

video/* 은 모든 비디오 파일을 보여줍니다.

image/* 은 모든 이미지 파일을 보여줍니다.

 

 

 

 

---

submit & reset

<input type = "submit" value = "저장"/> <input type = "reset" value = "초기화"/>

 

 

 

submit 은 form의 데이터를 전송하는 버튼이 생성됩니다.

reset은 폼안의 데이터를 초기화 시켜줍니다.

 

 

 

 

---

button

<input type="button" onclick="alert('클릭했습니다.')" value="눌러주세요!">

버튼을 생성해주고 클릭 이벤트는 onclick으로 사용가능하다

 

 

 

 

 

 

출처 : 

blog.naver.com/gksjs3468/221893489322