[HTML] <form> 태그 종류 및 개념정리 [3/15 Study]

 

 

HTML <form>태그 종류 및 개념정리

 

 

https://www.w3schools.com/html/html_forms.asp

HTML Forms

 

 

<form>

 

: 입력 양식 전체를 감싸는 태그

폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송해주기도 하며 이밖에 웹페이지가 입력 데이터를 사용하기 위하여 사용할 수 도 있다.

폼 태그는 <input>, <label> 등과 같은 필수 양식 요소를 포함하는 컨테이너이다. 이 태그들을 조합하여 로그인 화면 과 같이 입력 양식 화면을 구성하게 되는 것이다.

* form 요소를 사용할 때 주의할 사항으로는 <form></form> 태그 사이에는 다른 <form> 태그가 삽입이 안되며, <form>의 이름 속성은 한 페이지에서 중복하여 사용하면 안 된다.

 

Attribute	Description
method	전송 방식 선택
name	form의 이름 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action	전송되는 서버 url 또는 html 링크
target	action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete	자동완성
더 많지만 아직 배우기에 너무 어려움..	더 많지만 아직 배우기에 너무 어려움..

 

 

<input>

 

: 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용

type에 따라 어떤 형식으로 폼 양식을 정할지 결정한다

 

Attribute	Description
type	input 태그의 타입을 지정
placeholder	힌트 표시(필드 클릭시 내용 사라짐)
autocomplete	자동완성
autofocus	페이지를 불러오자 마자 특정 부분에 마우스 커서가 표시되도록 하는 것
max/min	<input> 필드의 최대값과 최소값 지정
maxLength	텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
required	필수 입력 필드 지정(빈칸이면 안 넘어감)

 

 

input type 속성 종류

 

Attribute	Description
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
search	검색상자
password	비밀번호 입력 필드
number	숫자를 조절할 수 있는 필드
checkbox	체크박스(2개이상 선택 가능)
button	버튼을 만들어 클릭했을 때 이벤트를 발생시킬 수 있다. Submit과는 차이가 있다. JavaScript를 사용해 효과를 만들면 된다.
file	파일을 첨부할 수 있는 버튼
submit	서버전송 버튼
reset	리셋 버튼
더 많지만 아직 배우기에 너무 어려움..	더 많지만 아직 배우기에 너무 어려움..

 

 

 

<label>

 

: 레이블(label) 그 자체로는 효과가 없지만, input 태그를 제어하여 상태값을 변경 하도록 돕는 역할을 한다.

레이블 태그를 클릭하면 텍스트 컨트롤에 초점이 맞춰져 사용성이 높아진다. 특히 모바일이나 태블릿 환경에서 강점을 발한다.

 

​label 태그안의 영역을 클릭할 경우 for 속성이 지정된 banana 라는 id 값을 찾게 된다. 즉 아래의 input 태그가 원격으로, 자동으로 클릭한 것과 같이 동작하게 된다.

<input id="banana" type="checkbox" /> 
<label for="banana">바나나</label>

 

 

<button>

 

: 버튼 요소. 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용한다.

Attribute	Description
submit	form 제출
reset	form 리셋
button	버튼의 형태만 만든다. 아무 동작도 안한다. 눌리거나 했을때 다른 동작을 하려면 따로 함수를 연결해야함

 

 

 

<button> vs <input> 차이점

위에서 배운 <input type="button">과 차이점이 뭘까?

 

1. <input> 태그는 종료태그 없이 type 속성 이용해 버튼에 글자나 이미지 넣지만, <button> 태그는 시작태그와 종료태그 사이에 글자나 이미지 넣는다.

2. 항상 <button> 태그의 type 속성을 명시해줘야 한다. 왜냐하면, IE(익스플로러) 경우 기본 타입이 button 이지만, 타 브라우저 경우 기본 타입이 submit 이기 때문이다.

3. <form> 태그 안에서 버튼 만들 땐, 반드시 <input> 태그 이용해 버튼 만들어야 한다. 왜냐하면, 타 브라우저가 <button>태그의 속성값을 전송하는 반면, IE는 시작태그와 종료태그 사이의 텍스트나 이미지 전송하기 때문이다.

 

 

 

 

 

 

 

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

🏷️ 폼(Form) 태그 양식 & 종류 - 한방 정리

위 블로그를 참조해서 공부했다.

 

 

 

 

 

🔥마무리

오늘은 진짜 중요하기에 공부해야 할 게 많았다. form태그와 같이 써야 하는 태그들이 포스팅한 내용보다 훨씬 더 많았고 지금으로서는 공부한 내용만 찾아서 더 찾아보는식으로 공부했다. 후.. 오늘도 열공했다🥵

오늘도 화이팅😊