ZeroCho Blog

안녕하세요. 이번 시간에는 폼 관련 태그들에 대해 알아보겠습니다. 웹페이지의 특징 중 하나는 사용자와 상호작용이 가능하다는 점이겠죠. 버튼을 클릭하니 특정한 행동을 하고, 회원가입이나 로그인처럼 정보도 서버로 보내고요. 그 중에서 서버로 정보를 보내는 역할을 하는 게 폼입니다.

form

우선 form 태그로 정보를 보낼 부분을 감싸주어야 합니다. form은 크게 두 속성이 있는데 action은 정보를 보낼 서버 주소를 적는 부분이고, method는 보내는 방식을 적는 부분입니다. method에는 post와 get이 있는데 get은 주소를 통해 정보를 보내고, post는 요청의 body를 통해 정보를 보냅니다. 조금 어려운 개념인데 비밀번호와 같은 정보가 담기기 때문에 보안을 위해서는 post를 쓴다고 생각하시면 됩니다.

<form action="/api/join" method="post"></form>

input

폼 안에 이제 정보를 받을 부분을 넣어줍니다. 대표적인 게 input 태그입니다. 속성 중에 type, placeholder, name, value 그리고 id가 자주 사용됩니다. type은 input에 어떤 형식의 정보를 받을 지를 정하는 부분입니다. 대표적으로 text, radio, checkbox가 있고 text는 다시 text, email, date, time, datetime, password, number, range, search, url, week, month 등으로 세분화됩니다.

placeholder은 input에 아무 값도 입력되지 않았을 때 나타나는 글이고, name은 input의 이름이면서 form을 전송했을 때 서버에서 받을 이름을, value는 input의 값을, id는 나중에 나오는 label와 연결할 값을 입력합니다.

radio는 하나의 세트로 구성하려면 name 값이 같아야 합니다. 밑에 남녀 선택 radio를 보면 name 값이 같은 것을 볼 수 있습니다.

<input type="text" placeholder="아이디 입력" id="userid" name="userid" />
<input type="password" id="password" name="password" />
<input type="radio" name="gender" value="m" />남
<input type="radio" name="gender" value="f" />여
<input type="checkbox" name="subs" />구독?

select, textarea

input이긴 한데 조금 특수한 태그도 있습니다. select는 여러 옵션 중 선택할 수 있고, textarea는 한 번에 많은 글을 입력받을 때 사용합니다. 포스팅을 하거나 댓글을 입력할 때 주로 textarea를 사용합니다.

<select name="area">
  <option value="seoul">서울</option>
  <option value="gyeonggi">경기</option>
  <option value="jeolla">전라</option>
  <option value="gyeongsang">경상</option>
</select>
<textarea placeholder="긴 글 입력" name="textarea"></textarea>

label

각 input이 어떤 역할을 하는지 알려주는 이름표 태그입니다. label을 input과 연결시켜 놓으면 label을 눌러도 input이 선택됩니다. for 속성으로 input의 id 값을 입력하면 됩니다.

<label for="userid">아이디</label>
<input type="text" placeholder="아이디 입력" id="userid" name="userid" />

또는 for을 사용하지 않고 나타낼 수도 있습니다.

<label>아이디<input type="text" placeholder="아이디 입력" id="userid" name="userid" /></label>

button

버튼은 직접 누를 수 있는 것들을 의미합니다. 크게 세 종류가 있습니다. type 속성으로 표시하는데 그냥 버튼과 submit, reset이 있습니다. submit은 폼을 제출하는 버튼이고, reset은 폼을 초기화하는 버튼입니다.

<button>클릭</button>
<button type="submit">제출</button>
<button type="reset">취소</button>

코드를 모아보면 다음과 같습니다.

<form action="/api/join" method="post">
  <label>아이디<input type="text" placeholder="아이디 입력" id="userid" name="userid" /></label><br />
  <label>비밀번호<input type="password" id="password" name="password" /></label><br />
  <label>이메일<input type="email" id="email" name="email" /></label><br />
  <label>성별
    <input type="radio" name="gender" value="m" />남
    <input type="radio" name="gender" value="f" />여
  </label><br />
  <label>구독<input type="checkbox" name="subs" /><br />
  <label>지역
    <select name="area">
      <option value="seoul">서울</option>
      <option value="gyeonggi">경기</option>
      <option value="jeolla">전라</option>
      <option value="gyeongsang">경상</option>
    </select> 
  </label><br />
  <label>하고싶은 말<textarea placeholder="입력하세요" name="textarea"></textarea><br />
  </label>
  <button type="submit">제출</button>
  <button type="reset">취소</button>
</form>

한 번 어떻게 생겼는지 봅시다. 대충 틀이 완성된 것이 보이죠?

다음 시간에는 기타 태그들에 대해 알아보겠습니다.