HTML - 폼(form)에 대해 알아보자

데이터를 웹사이트로 전송 할 때 사용하는 것.

ex) 회원가입 페이지 내 내용을 적을 수 있는 공간

 

인풋, 라벨, 버튼 등으로 구성되어 입력을 받을 수 있음

 

<form>
   <label><!- 첫번째 ->
      <input> 
   </label>
   <label for="signup-email">이메일</label><!-	두번째 ->
   <input id="signup-email">
</form>

 

form 안에 다른 입력 태그들을 넣을 수 있음

 

첫번째 쪽 라벨처럼 인풋을 감싸서 라벨 클릭 시 인풋박스에 커서가 생기도록도 할 수 있고,

두번째 쪽 처럼 인풋박스의 id와 라벨의 for안을 동일하게 하면 첫번째와 같은 결과를 낼 수 있다.

 

<input type="" name="" id="">

name 

- 인풋의 데이터에 이름을 부여해주는 것

- 인풋박스에 네임을 준 뒤 값을 입력 후 엔터를 하면 주소에 값이 넘어가는 걸 볼 수 있음

ex ) "테스트" 입력 후 엔터. -> 주소창 주소 ?뒤에 "name값=테스트" 값으로 넘어감

type

password : 작성시 *** 과 같이 보여짐

email :  폼 전송을 누를 때, 이메일 형식이 다른 경우 안내 문구를 보여줌

radio : name을 동일하게 해야 하나로 묶여서 동작(하나만 선택)된다. 

(첫번째. 남성만 라디오 버튼 /두번째, 둘 다 라디오. 네임 동일 / 세번째, 둘 다 라디오. 네임 다름)

placeholder : 값이 없을 떄 보여주는 텍스트

- placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 사용

required : 반드시 입력해야 하는 값. 비어있다면 전송되지 않음.

autocomplete : 예전 입력값 보여주는 인풋. 브라우저에 저장된 값을 불러와줌.

- autocomplete="on"  을 해야 동작. email을 채워넣게 해주고 싶으면, autocomplete="email" 전화번호를 넣게 해주고 싶으면 tel로 값을 넣어서 사용.

그 외 다양한 속성값 알아보기-MDN문서 이동

submit : 폼 안의 데이터 전송

reset : 폼 안의 내용 초기화

 

 

<form action="주소" method="post">

action  : 폼에서 현재 페이지에 쿼리문자열을 붙여서 보내는데, 다른 주소를 사용하고 싶을 때 사용.

method : 데이터 전송 시 리퀘스트 속성. post 또는 get

  - post : 데이터를 보낼 때 사용

  - get : 데이터를 받을 때 사용.

단, 사진 파일 업로드 같이 파일 크기가 큰 경우 post로 보내기도 함