[HTML 시리즈 8] 입력창(<input>, <form>)으로 사용자 입력 받기

웹사이트를 이용하다 보면 “로그인”, “회원가입”, “검색창”, “댓글 입력창” 같은 걸 자주 보죠?
이 모든 건 HTML의 폼(form) 기능으로 만들어집니다.
사용자가 정보를 입력하면, 그 데이터를 서버로 보낼 수 있는 구조예요.

오늘은 그중에서도 기초 입력창 <input> 태그와
입력 그룹을 감싸는 <form> 태그를 함께 배워볼 거예요.

[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어

혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니

ilsandaddy.tistory.com

[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기

이전 시간에는 HTML이 무엇인지, 그리고 웹페이지가 어떻게 만들어지는지 배웠습니다.이번에는 실제로 코드를 작성할 수 있는 환경을 준비하고,나만의 첫 웹페이지를 완성해 보겠습니다.컴퓨터

ilsandaddy.tistory.com

[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기

이전 시간에 우리는 VS Code로 첫 웹페이지를 만들어봤죠.이제 본격적으로 HTML의 핵심 개념인 “태그(Tag)”를 배워봅시다.태그는 HTML의 모든 것을 이루는 기본 단위이자,“웹페이지의 언어”라고

ilsandaddy.tistory.com

1. <form>이란?

<form>은 사용자의 입력을 한 곳에 모아 서버로 전송하는 영역이에요.
쉽게 말해, “입력 양식(Form)”의 틀이라고 보면 됩니다.

action	입력된 데이터를 보낼 주소 (예: 서버나 다음 페이지)
method	데이터를 전송하는 방식 (보통 GET 또는 POST)

지금은 서버가 없으니 action은 단순히 다음 페이지 이름 정도로만 이해해도 됩니다.

중요한 건 <form> 안에 여러 입력 요소를 넣는다는 점이에요.

2. 기본 입력창 <input>

<input> 태그는 사용자가 텍스트, 숫자, 비밀번호, 날짜, 파일 등을 입력할 수 있게 해줍니다.
type 속성으로 입력의 형태를 지정합니다.

text	일반 텍스트 입력	이름, 아이디
password	입력값을 ●●●로 표시	비밀번호
email	이메일 주소 형식 검사	example@email.com
number	숫자만 입력 가능	나이, 수량
date	날짜 선택기 표시	생년월일
file	파일 업로드	사진 첨부
submit	제출 버튼	폼 전송
reset	초기화 버튼	입력값 삭제

3. 실습: 간단한 회원가입 폼 만들기

이제 직접 실습해 볼까요?
아래 코드를 VS Code에 입력하고 실행해 보세요

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

코드 설명

<input type="text"> → 일반 텍스트 입력
<input type="email"> → 이메일 형식만 허용 (자동 검증 기능 있음)
<input type="password"> → 비밀번호가 ●●●로 표시됨
<input type="date"> → 달력 UI 자동 표시
<input type="file"> → 파일 선택 버튼 표시
<input type="submit"> → “가입하기” 버튼
<input type="reset"> → 입력값 초기화 버튼

브라우저에서 실행하면
회원가입 폼이 깔끔하게 정렬되어 나타납니다.
이제 사용자는 이름, 이메일, 비밀번호 등을 입력할 수 있죠!

4. placeholder와 name의 역할

placeholder : 입력창 안에 흐리게 표시되는 안내 문구
→ 사용자가 입력하기 전 “무엇을 입력해야 하는지” 알려줍니다.
name : 입력 데이터를 식별하는 이름
→ 나중에 서버로 전송될 때 각 입력값을 구분하는 키 역할을 합니다.

예를 들어 아래 입력창에
이름을 “홍길동”이라고 적고 제출하면,
서버에는 이렇게 전달됩니다.

username=홍길동

5. 체크박스와 라디오버튼

입력창엔 글자뿐만 아니라 선택형 입력도 있습니다.

✔ 체크박스 (checkbox)

<input type="checkbox" name="interest" value="html"> HTML

<input type="checkbox" name="interest" value="css"> CSS

<input type="checkbox" name="interest" value="javascript"> JavaScript

→ 여러 개 선택 가능

✔ 라디오 버튼 (radio)

<input type="radio" name="gender" value="male"> 남성

<input type="radio" name="gender" value="female"> 여성

→ 같은 name 속성을 공유해야 하나만 선택 가능합니다.

6. 실전 예제: 미니 설문 폼

지금까지 배운 내용을 모두 활용해서
간단한 설문조사 페이지를 만들어볼까요?

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

<p>좋아하는 언어: <input type="radio" name="lang" value="html"> HTML

<input type="radio" name="lang" value="css"> CSS

<input type="radio" name="lang" value="js"> JavaScript </p>

<p>관심 있는 분야: <input type="checkbox" name="interest" value="design"> 디자인

<input type="checkbox" name="interest" value="frontend"> 프론트엔드

</form>

</body>

</html>

<textarea>는 여러 줄 입력할 수 있는 긴 텍스트 박스예요.
게시판이나 댓글창을 만들 때 자주 사용됩니다.

7. 정리 — 폼은 “사용자와의 대화창”

<form> : 입력 영역 전체를 감싸는 틀
<input> : 텍스트, 비밀번호, 이메일 등 단일 입력
<textarea> : 여러 줄 입력
<checkbox>, <radio> : 선택형 입력
<submit>, <reset> : 제출/초기화 버튼
placeholder, name, value : 입력창의 세부 속성

HTML에서 <form>은 단순한 입력 도구가 아니라,
사용자와 웹사이트가 소통하는 창구예요.
이제 여러분은 웹페이지를 “보여주는 것”을 넘어
“사용자와 상호작용하는” 수준으로 발전했습니다.

다음 시간에는
[HTML 시리즈 9] <div>와 <span>의 차이 완벽 이해
를 배워서 페이지의 **레이아웃(구조 배치)**를 잡는 법을 익혀볼 거예요.
이제부터는 디자인의 기초로 넘어갑니다

저작자표시 비영리 (새창열림)

'CODING' 카테고리의 다른 글

[HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이) (0)	2025.10.23
[HTML 시리즈 9] <div>와 <span>의 차이 완벽 이해 (0)	2025.10.22
[HTML 시리즈 7] 표(<table>) 만들기 완전정복 (0)	2025.10.18
[HTML 시리즈 6] 목록(<ul>, <ol>, <li>)으로 콘텐츠 정리하기 (0)	2025.10.18
[HTML 시리즈 5] 링크(<a>)와 이미지(<img>) 삽입하기 (0)	2025.10.18

빅뉴스

[HTML 시리즈 8] 입력창(<input>, <form>)으로 사용자 입력 받기

1. <form>이란?

2. 기본 입력창 <input>

3. 실습: 간단한 회원가입 폼 만들기

4. placeholder와 name의 역할