HTML 입력 양식 - Form 요소

HTML의 form 요소는 사용자 입력을 받아 서버로 전송하는 데 사용되는 중요한 요소입니다.
이번 포스팅에서는 form 요소의 기본 구조와 다양한 input 타입, 그리고 이를 활용하는 방법에 대해 알아보겠습니다.

1. form 요소란 무엇인가요?

HTML에서 form 요소는 사용자로부터 데이터를 입력받고, 이를 서버로 전송할 때 사용됩니다.
action 속성과 method 속성을 사용해 데이터를 처리할 URL과 전송 방식을 지정할 수 있습니다.

 

form 요소 문법

<form action="처리할_페이지_URL" method="GET|POST"></form>

 

• action 속성: 데이터를 처리할 서버 스크립트의 URL을 명시합니다. 이를 폼 핸들러(form-handler)라고 부릅니다.
• method 속성: 데이터를 전송할 방식을 지정하며, GET과 POST 방식을 사용할 수 있습니다.

2. GET vs POST 방식

GET 방식

• 데이터를 URL에 추가하여 전송합니다.

특징

• 전송 데이터가 주소창에 노출됩니다.
• 전송 데이터 크기에 제한이 있습니다.
• 주로 검색 쿼리처럼 보안이 덜 중요한 데이터를 전송할 때 사용됩니다.

POST 방식

• 데이터를 별도의 본문(body)에 담아 전송합니다.

특징

• 데이터가 URL에 노출되지 않아 보안성이 높습니다.
• 전송 데이터 크기에 제한이 없습니다.
• 로그인 정보, 파일 업로드 등 중요한 데이터를 처리할 때 사용됩니다.

3. 다양한 input 타입

HTML에서 사용 가능한 다양한 input 요소의 타입을 살펴보겠습니다.

1) 텍스트 입력 (type="text")

한 줄의 텍스트를 입력받습니다.

예제

<form action="/submit">
  이름: <input type="text" name="username">
</form>

 

2) 비밀번호 입력 (type="password")

입력한 내용이 화면에 표시되지 않고, 마스킹(****) 처리됩니다.

예제

<form>
  비밀번호: <input type="password" name="password">
</form>

 

3) 라디오 버튼 (type="radio")

여러 옵션 중 하나의 옵션만 선택할 수 있습니다.
같은 name 속성을 공유해야 데이터가 정확히 전송됩니다.

예제

<form>
  선호 언어: <br>
  <input type="radio" name="language" value="html" checked> HTML<br>
  <input type="radio" name="language" value="css"> CSS<br>
  <input type="radio" name="language" value="javascript"> JavaScript
</form>

 

 

 

4) 체크박스 (type="checkbox")

여러 옵션 중 여러 개를 선택할 수 있습니다.

예제

<form>
  관심 분야: <br>
  <input type="checkbox" name="interest" value="design" checked> 디자인<br>
  <input type="checkbox" name="interest" value="development"> 개발<br>
  <input type="checkbox" name="interest" value="marketing"> 마케팅
</form>

 

5) 파일 업로드 (type="file")

사용자로부터 파일을 선택받을 수 있습니다.

예제

<form>
  이미지 업로드: <input type="file" name="upload_file" accept="image/*">
</form>

 

6) 드롭다운 리스트 (select 요소)

select 요소와 option 요소를 사용해 하나의 옵션을 선택할 수 있습니다.
예제

<form>
  좋아하는 과일: 
  <select name="fruit">
    <option value="apple">사과</option>
    <option value="orange" selected>귤</option>
    <option value="banana">바나나</option>
  </select>
</form>

 

7) 여러 줄 텍스트 입력 (textarea 요소)

사용자로부터 여러 줄의 텍스트를 입력받습니다.
예제

<form>
  의견을 적어주세요:
  <textarea name="feedback" rows="5" cols="30">여기에 작성하세요.</textarea>
</form>

 

8) 전송 버튼 (type="submit")

폼 데이터를 서버로 제출합니다.
예제

<form action="/submit">
  닉네임: <input type="text" name="nickname"><br>
  <input type="submit" value="전송">
</form>

9) 버튼 (type="button")

사용자가 누를 수 있는 일반 버튼입니다.
자바스크립트를 통해 동작을 제어할 수 있습니다.

예제

<button type="button" onclick="alert('버튼이 클릭되었습니다!')">
  클릭하세요
</button>

 

4. 필드셋(fieldset)과 레전드(legend)

fieldset 요소는 관련된 폼 데이터를 하나로 묶고,
legend 요소는 해당 그룹의 제목을 표시합니다.
예제

<form>
  <fieldset>
    <legend>회원 정보</legend>
    이름: <input type="text" name="username"><br>
    이메일: <input type="text" name="email"><br>
    <input type="submit" value="등록">
  </fieldset>
</form>

5. HTML5에서 추가된 요소들

1) datalist 요소

입력 시 미리 정의된 옵션 목록을 제공합니다.
예제

<form>
  좋아하는 색상:
  <input type="text" list="colors">
  <datalist id="colors">
    <option value="빨강">
    <option value="파랑">
    <option value="초록">
  </datalist>
</form>

 

2) output 요소

계산 결과 등 동적인 데이터를 표시합니다.
예제

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="a"> +
  <input type="number" name="b">
  = <output name="result"></output>
</form>

 

HTML의 form 요소는 웹 개발에서 사용자와의 상호작용을 담당하는 중요한 도구입니다.
다양한 input 타입과 속성을 적절히 활용해 사용자 경험을 개선해보세요!