HTML 입력 양식 태그 <form>

입력 양식은 사용자에게 입력받는 공간을 의미합니다.

입력 양식 태그는 입력 양식을 만들 때 사용하는 태그이고, 회원 가입 양식이 대표적인 입력 양식입니다.

<form>

입력 양식은 form 태그를 사용해 생성합니다.  양식 안에는 input 태그를 입력하면 입력 양식이 생성됩니다.

<form>
  <input type="text" name="search"/>
  <input type="submit"/> //button 형태
</form>

 

입력 양식에 데이터를 입력하고 쿼리 전송 버튼을 누르면, 데이터가 지정된 장소에 지정된 방법으로 전달됩니다.

• action : 입력 데이터의 전달 위치를 지정합니다.
• method : 입력 데이터의 전달 방식을 선택합니다.
• name : 폼을 식별하기 위한 이름
• accept-charset : 폼 전송에 사용할 문자 인코딩
• target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

예를 들어 회원 가입 양식을 생각해본다면, 개인 정보를 입력하고 회원 가입 버튼을 누르면 정보가 서버로 전달됩니다.

form 태그에 지정된 action 속성의 장소로 method 속성에 적힌 방식으로 전달됩니다.

 

method에서 자주 사용되는 속성은 GET, POST입니다.

입력 양식에 데이터를 입력하고 <쿼리 전송> 버튼을 누른다면, 화면이 한 번 새로고침 됩니다. 변화는 없게 느껴질지라도 GET 방식의 주소를 살펴보면 url이 변경되어 있음을 볼 수 있습니다. GET 방식은 이렇게 주소에 데이터를 입력해서 보내는 방식입니다.

 

반면에 POST는 url이 변하지 않습니다. GET과 다르게 비밀스럽게 데이터를 전달하며 용량 제한이 없습니다.( GET은 크키가 한정)

폼 태그는 아래와 같이 동작됩니다.

폼 태그 동작방법

1. 폼이 있는 웹 페이지를 방문합니다.
2. 폼 내용을 입력합니다.
3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.
4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램을 넘깁니다.
5. 웹 프로그램은 폼 데이터를 처리합니다.
6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.
7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.
8. 브라우저는 박은 html 페이지를 보여줍니다.

 

<input>

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.

속성에는 type, readonly, maclength 등이 있으며,

type에는 text, radio, checkbox, password, button, hidden, filedupload, submit, reset 등을 지정할 수 있습니다.

form 태그 안에서 주로 text와 submit를 사용하여 구현할 수 있습니다.

 

※ 주의 사항!

input 박스가 하나일 경우 enter를 쳐서 submit 버튼 누른 효과를 낼 수 있지만, input 창이 2개 이상일 경우 안된다고 합니다.

이럴 때는 이벤트를 넣어주어 forname.submit() 메소드를 실행시킬 수 있습니다. 

input박스가 하나일 때는 검색창 같은 경우 사용할 수 있습니다. (form 태그에 method와 함께 입력하면 서버에 데이터 전송 가능)

 

또한, 값이 입력되지 않고도 enter키를 누르면 원치 않는 submit이 발생되는데 이벤트를 무효화하는 방법으로 처리해주면 됩니다. 

-> https://selosele.github.io/2020/07/30/prevent-form-submit-when-press-enter/

 

제가 궁금했던 것은 바로 button 태그와 input tag의 submit typa의 차이점입니다.

 

 

<button type='submit'> 과 <input type='submit'>의 차이

• 공통점 : 데이터를 서버에 제출하기 위한 버튼입니다.
• 차이점
  • button 태그는 여는 태그와 닫는 태그 모두 갖지만, input 태그는 opening 태그만 사용하는 경우 종료 태그를 따로 가질 수 없는 태그입니다.
  • 또한 input 태그에는 이미지나 svg와 같은 다른 노드를 추가할 수 없습니다.
  • 따라서 다채로운 방식으로 버튼을 디스플레이스하고 싶다면 buton을 사용하는 것이 맞습니다.

---

[ 참고한 자료 ]

• 책 ) 모던 웹을 위한 HTML5 + CSS3 바이블 3판
• https://88240.tistory.com/52
• https://365kim.tistory.com/64
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
• https://www.nextree.co.kr/p8428/
• https://webisfree.com/2017-08-07/input-%EC%9E%85%EB%A0%A5%ED%8F%BC-%EC%97%94%ED%84%B0%ED%82%A4-%EB%88%84%EB%A5%BC-%EA%B2%BD%EC%9A%B0-submit-%EB%A7%89%EA%B8%B0-prevent