HTML 6. form 태그

form 태그

• 주로 회원가입, 블로그 글 쓰기등 서버에 데이터를 전송하기위한 양식 작성 태그
• 위 같은 이유로 post방식에서 주로 볼 수 있다.
• get방식도 사용할 수 있다.

form 사용 태그와 키워드 설명

• form : 전체 폼 영역의 부모 역할 태그
• action : 데이터 전송의 목적지를 기재하는 속성. 전송시 호출될 서버 프로그램 주소 지정
• method : http 전송 방식 설정. get|post

name 속성

• 데이터 전송시 서버측은 name 속성의 값으로 데이터를 식별한다.

input 태그 속성

• name : 서버측에서 데이터 식별자
• type="text" : 텍스트 입력을 위한 입력박스 속성값
• type 속성값 목록 : email, number, password, search, tel, text, url, radio, checkbox
• value : 해당 요소의 기본값
• palceholoder : 힌트 내용. value와 공존할 수 없음

button 태그 속성

• type="submit" : 전송용 버튼을 만들기 위한 속성값
• type="reset" : form의 내용을 리셋(쵸기화)하는 버튼을 만들기 위한 속성값

form 기본 예제

• 전송 방식을 get으로 하면 url이 변경됨이 확인 가능
• http://127.0.0.1:5500/index.html?name=이름&phone=전화번호
• post로 하면 서버에 전송하는데, 해당 서버가 구현되있지않으므로 현재는 에러가 난다.

  <form action="" method="GET">
    <input type="text" name="name" value="이름">
    <input type="text" name="phone" value="전화번호">
    <button type="submit">전송</button>
    <button type="reset">삭제</button>
  </form>