1. Form 기본 속성

폼은 정보를 입력하는 영역입니다. 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용합니다. 폼에 입력하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송합니다.

1.1 폼 동작 방식

CRUD 작업과 HTTP 메서드:

1.2 폼의 속성

form의 주요 속성은 action, method, enctype입니다.

<!-- GET: URL 파라미터로 전송 (보안 취약) -->
<form action="/search" method="GET">
  <input name="query" />
  <!-- 결과: /search?query=검색어 -->
</form>

<!-- POST: 요청 body로 전송 (보안 권장) -->
<form action="/auth/login" method="POST">
  <input name="username" />
  <input name="password" />
  <!-- 결과: body에 JSON 또는 form-data로 전송 -->
</form>
<!-- 파일 업로드 시 반드시 필요! -->
<form method="POST" enctype="multipart/form-data">
  <input type="file" name="image" />
  <!-- 백엔드에서 파일 처리 가능 -->
</form>

• action: 입력값을 전송할 페이지를 나타냅니다.
• method: 폼의 데이터를 전송할 방법을 정의합니다. method의 속성에는 get과 post가 있습니다. get은 웹 서버에 데이터를 요청할 때 사용하며, URL 주소에 데이터를 입력하는 방식이고 전달할 수 있는 데이터의 양에 제한이 있습니다. post는 마찬가지로 데이터를 요청할 때 사용되지만 URL 주소에 데이터 내용이 나타나지 않도록 하고 전송할 수 있는 데이터의 양에 제한이 없습니다.
• enctype (파일 업로드 시 필수!)

2. input 태그

<input> 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력받습니다. 폼에서 가장 많이 사용되는 요소입니다.

2.1 input의 속성

2.2 input의 타입

<input type="text" /><br />
<input type="password" /><br />
<input type="date" /><br />
<input type="time" /><br />
<input type="range" /><br />
<input type="color" /><br />
<input type="radio" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<textarea name="name" rows="8" cols="80"></textarea>

3. label 태그

단순히 input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 <label> 요소를 사용하도록 합시다.

label을 사용하면 클릭 영역이 넓어지고, 스크린리더가 입력 필드를 올바르게 인식합니다.

3.1 label의 사용법

label 은 두 가지 사용법이 있습니다.

1. 텍스트의 설명과 폼 입력 모두를 포함하는 방식

<label>
  이름 :
  <input type="text" name="name" />
</label>

1. 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName" />

3.2 for 속성

for 속성은 레이블이 속한 input 과 같은 폼 컨트롤(input, select, textarea 와 같은 요소들)을 의미합니다. 위의 예시에서도 알 수 있듯, for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야 합니다. 레이블과 폼 컨트롤이 연결되면 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동합니다. 이러한 점 때문에 사용자는 클릭할 수 있는 영역이 더 넓어져 폼을 쉽게 사용할 수 있게 됩니다.

4. select 태그

<select> 요소는 드롭다운 리스트 박스를 생성합니다. 사용자가 선택해야 하는 리스트 박스 안의 아이템을 만들 때는 <option> 태그를 사용합니다.

<form action="">
  <label for="myDevice"
    >현재 사용하고 있는 스마트폰의 제조사를 선택해 주세요</label
  >
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

4.1 select의 속성들

4.2 option의 속성들

5. fieldset과 legend 태그

<fieldset> 요소를 사용하면 폼 컨트롤들을 그룹화할 수 있습니다. 특히 폼 내용이 방대하여 섹션별로 나눌 필요성이 있을 경우 유용하게 사용됩니다.

<!-- 브라우저에서 어떻게 표현되는지 확인해보세요 -->
<form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="myName">이름</label>
    <input type="text" name="name" id="myName" />
    <label for="myTel">전화번호</label>
    <input type="tel" name="tel" id="myTel" />
    <label for="myEmail">이메일</label>
    <input type="email" name="email" id="myEmail" />
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
    <input type="checkbox" name="agree" id="checkAgree" />
  </fieldset>
</form>

<legend> 요소는 <fieldset> 태그 바로 뒤에 위치하며 폼 그룹의 제목을 의미합니다. 반드시 <fieldset>의 첫 번째 자식으로 사용해야 합니다.

6. button 태그

<button> 태그는 클릭 가능한 버튼을 나타냅니다. 버튼의 모습을 다양하게 제어하고 버튼 내부에 다른 자식 요소를 추가하고 싶을 때 사용합니다.

7.1. button 태그의 type

type은 버튼의 행동 방식을 설정하는 속성입니다.

• submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다. 때문에 form 양식을 제출하기 위한 용도가 아니라면 반드시 type을 선언해 줍시다.
• reset: <input type="reset">처럼, form의 모든 값을 초기화시킵니다.
• button: 클릭 가능한 버튼입니다. 사용자가 기능을 부여하기 전까지는 별다른 작동을 하지 않습니다.

<!-- 네이버 메인 화면의 검색 버튼 html 구조 -->

<button id="search_btn" type="submit" title="검색">
  <span class="blind">검색</span>
  <span class="ico_search_submit"></span>
</button>

6.2 Input vs button 무엇을 써야 할까?

<button> 요소는 <input> 요소보다 스타일을 적용하기 훨씬 수월합니다. <input>은 닫는 태그가 없기 때문에 value 특성에 텍스트값 밖에 지정할 수 없지만, <button>은 내부에 여러 가지 자식 컨텐츠를 추가할 수 있고 여기 더해 ::after와 ::before 와 같은 가상 요소를 사용하는 것도 가능합니다. 더 다채롭고 멋진 스타일을 적용해야 한다면 <button> 요소를 우선적으로 고려해 보는 것이 좋습니다.

7. textarea 태그

여러 줄의 텍스트를 입력받을 수 있습니다.

7.1 textarea의 주요 속성

<textarea
  name=""
  id=""
  cols="40"
  rows="10"
  maxlength="10"
  minlength="5"
></textarea>

8. datalist 태그

<datalist>는 <select>와 <input>을 결합한 요소입니다. 사용자에게 기본적으로 선택할 수 있는 옵션을 제공하면서도, 옵션에 원하는 값이 없는 경우 직접 입력할 수 있도록 합니다.

<input>의 list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용합니다.

<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets" />
<datalist id="planets">
  <option value="수성">수성</option>
  <option value="금성">금성</option>
  <option value="지구">지구</option>
  <option value="화성">화성</option>
</datalist>

9. 실습

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>form</title>
  </head>
  <body>
    <!-- action에는 도달하는 주소를 적는데 안적으면 자기 자신 -->
    <form action="" method="get">
      <label for="id">아이디</label>
      <input type="text" name="아이디" id="id" /><br />
      <label for="pw">패스워드</label>
      <input type="password" name="패스워드" id="pw" /><br />
      <label for="male">남</label>
      <input type="radio" name="성별" id="male" value="남" />
      <label for="female">여</label>
      <input type="radio" name="성별" id="female" value="여" /><br />
      <p>즐겨 사용하는 프로그래밍 언어</p>
      <input type="checkbox" name="언어" id="python" value="Python" />
      <label for="python">Python</label><br />
      <input type="checkbox" name="언어" id="javascript" value="JavaScript" />
      <label for="python">JavaScript</label><br />
      <input type="checkbox" name="언어" id="c" value="C" />
      <label for="c">C</label><br />
      <input type="submit" value="회원가입" />
    </form>
  </body>
</html>

11. 자주 사용되는 속성

• checked : 체크상태 표시
• required : 필수값
• min : 최솟값
• max : 최댓값
• value : 입력된 값
• placeholder : 입력값 힌트
• minlength : 최소 길이
• maxlength : 최대 길이
• autocomplete : 브라우저 제공 자동완성