1. Form 기본 속성

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

1.1 폼 동작 방식

CRUD 작업과 HTTP 메서드:

이름	조작	SQL	HTTP method
Create	생성	INSERT	POST
Read	읽기	SELECT	GET
Update	수정	UPDATE	PUT/PATCH
Delete	삭제	DELETE	DELETE

1.2 폼의 속성

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

속성	설명
`action`	입력값을 전송할 서버 URL
`method`	데이터 전송 방식 (GET/POST)
`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>

<!-- 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 (파일 업로드 시 필수!)

읽어볼 만한 글

form에서 put, delete를 지원하지 않는 이유 PUT, PATCH, DELETE 처리

2. input 태그

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

2.1 input의 속성

속성명	설명
type	태그 모양을 다양하게 변경할 수 있습니다. Type에서는 text, radio, checkbox, password, button 등을 지정할 수 있습니다.
name	태그 이름을 지정합니다.
readonly	태그를 읽기 전용으로 합니다.
maxlength	최대 글자 수를 지정합니다.
minlength	최소 글자 수를 지정합니다.
required	필수 입력 필드로 지정됩니다. 값을 입력하지 않고, submit 버튼을 누르면 에러가 떠 데이터가 전송되지 않습니다.
autofocus	웹 페이지가 로딩되면 이 속성을 지정한 태그로 포커스가 바뀝니다.
placeholder	입력할 값에 대한 힌트를 줍니다.
pattern	정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용합니다.

2.2 input의 타입

타입	설명
text	입력한 text를 그대로 표현해 주는 input
button	누를 수 있는 간단한 버튼을 만드는 input
password	마스크 처리된 text input
search	검색 창으로 사용할 수 있는 input
date	날짜를 입력할 때 사용할 수 있는 input
time	시간을 입력할 때 사용할 수 있는 input
range	슬라이드 바 형식의 input
number	수를 선택할 수 있게 하는 input
color	색을 선택할 수 있는 input
radio	선택 항목 중 하나만 선택 가능한 input
checkbox	선택 항목 중 0개 이상 선택 가능한 input
file	파일을 업로드 할 수 있는 input
email	이메일 주소를 입력하게 하는 input
url	웹페이지 주소를 입력하게 하는 input
tel	전화번호를 입력하게 하는 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>

<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 은 두 가지 사용법이 있습니다.

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

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

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

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

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

<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>

<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의 속성들

속성	설명
`multiple`	여러 개의 option 선택 가능 (Ctrl/Cmd + 클릭)
`size`	한 번에 보여줄 option 개수

4.2 option의 속성들

속성	설명
`value`	서버에 전송할 값
`selected`	페이지 로드 시 기본 선택 옵션

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>

<!-- 브라우저에서 어떻게 표현되는지 확인해보세요 -->
<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>

<!-- 네이버 메인 화면의 검색 버튼 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의 주요 속성

속성	설명	기본값
`cols`	입력창의 너비 (문자 기준)	20
`rows`	기본으로 보여줄 줄 수	-
`maxlength`	최대 입력 글자 수	-
`minlength`	최소 입력 글자 수	-

<textarea
  name=""
  id=""
  cols="40"
  rows="10"
  maxlength="10"
  minlength="5"
></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>

<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>

<!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 : 브라우저 제공 자동완성

HTML/CSS 베이스캠프

Forms