[HTML] Form과 Input 태그 (1)

form

페이지의 정보 전달을 위한 하나의 영역으로, submit을 통해서 다른 페이지 혹은 서버로 정보를 전달

input

정보 입력/전달을 위한 태그

 

 

form과 input을 이용해 간단한 로그인 폼 만들기

action 속성을 이용하여 로그인 후 이동할 페이지를 선택한다. 그리고 폼 요소에 이름을 붙이기 위해 라벨 속성을 이용

아이디 부분에 placeholder속성을 이용하여 텍스트 안에 "아이디를 입력하세요"라는 문구를 집어넣었다.

그리고 비밀번호는 password 타입을 이용하여 패스워드를 입력할 시 "*****" 이런식으로 입력되게 하였다.

마지막으로 submit을 이용하여 버튼을 누를 시 입력된 정보가 전달되도록 하였다.

 

 

 

 

그 결과, 아이디와 비밀번호를 입력할 수 있는 로그인 폼을 만들었다. 로그인 시, 다른 페이지로 넘어가게 된다.

 

 

 

 

기타 input 예

아이디, 비밀번호 뿐만 아니라 다른 input 요소들도 존재한다. 검색을 위한 search, 이메일, 전화번호, 넘버, RANGE...

캡쳐에는 없지만, 원하는 곳에 체크 가능한 체크버튼, 둘중 하나에만 체크해야할 시, 라디오버튼 등 여러 요소들이 존재