form - input 태그 기초

form 태그는 사용자가 입력한 정보를 서버로 전송할 수 있게 해주는 기능을 가진 HTML의 기초적인 태그이다.

form 태그 구문은 input 태그로 이루어진 기본 골격을 가진다.

input 태그

• 사용자가 원하는 정보를 입력할 수 있는 입력 요소
• 기본적인 input 태그는 단순한 텍스트 입력창이지만 type 속성을 무엇으로 지정하느냐에 따라 그 성격과 모양이 달라진다.
• input 태그의 type attribute에 따른 input 태그의 모양 변화

<p>type="text" : <input type="text"></p>
<p>type="password" : <input type="password"></p>
<p>type="submit" : <input type="submit"></p>

• type에 따른 특징
  • type=”text” 가장 일반적인 텍스트 입력란
  • type=”password”브라우저는 이것이 비밀번호인지 알고 내용을 감춘다
  • type=”submit” : 입력한 내용을 서버로 전송할 때 사용하는 버튼

하지만 위와 같은 코드의 구조만으로는 무엇인가 부족하다. 무엇이 필요한가?

form 태그를 사용하여 서버 정보를 입력해보자

아래와 같은 아이디 비밀번호 입력 영역이 있다.

이 상태에서 제출버튼을 누르면 아직 정보가 부족하다. 무엇이 부족한가?

• 어디에 있는 서버로 전송될 것인지에 대한 정보가 전혀 없다.
• 이때 사용하는 태그가 form 태그이다.

form 태그의 action이라는 속성이 바로 서버 주소 정보를 나타낸다.

• 서버에 전달할 요소들을 form 태그로 감싼 후, action attribute를 사용해서 서버의 주소를 지정한다.
• 만약에 input 요소가 여러 개인 경우 name attribute 속성을 사용하여 특정 input 요소가 어떤 것인지를 명확하게 해준다.

코드 및 화면출력

<form action="http://localhost/login.php">
  <p>아이디: <input type="text" name="id"></p>
  <p>비밀번호: <input type="password" name="pwd"></p>
  <p>주소: <input type="text" name="address"></p>
  <input type="submit">
</form>

제출버튼 클릭 후, URL 주소가 변경된 모습

• name 속성으로 지정한 input 태그의 이름이 URL 주소의 쿼리스트링의 key로 들어갔고, 사용자 입력값은 value로 들어가있다
• form 태그를 필두로 그 안에 input 태그들로 구성된 form 구문을 만들었을 때, 이 처럼 서버로 정보를 전달하는 기능을 구현할 수 있다는 점을 기억하도록 하자.
• 이러한 사용법은 잊는다면 필요할 때 다시 찾아서 익히면 된다. form 태그가 이러한 역할을 하는 HTML 요소임을 기억하자.