HTML 독학 가이드 6 - 폼과 입력 요소

learning by Seven Fingers Studio 17분
HTML폼forminput입력요소웹개발

로그인, 회원가입, 설문조사… 사용자 입력을 받아야 하는 상황은 정말 많아요. HTML의 폼(form) 요소를 쓰면 이 모든 걸 만들 수 있습니다. 오늘은 input부터 button까지 모든 입력 요소를 배워볼게요!

form 태그

폼의 기본 구조예요.

<form action="/submit" method="POST">
    <!-- 입력 요소들이 여기 들어감 -->
</form>
  • action: 데이터를 보낼 주소
  • method: 전송 방식 (GET 또는 POST)

input 태그

가장 많이 쓰는 입력 요소예요.

text - 텍스트 입력

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

실행 결과:

  • type="text": 한 줄 텍스트
  • id: label과 연결
  • name: 서버로 전송될 때 쓰는 이름

password - 비밀번호

<label for="pwd">비밀번호:</label>
<input type="password" id="pwd" name="password">

실행 결과:

입력한 내용이 ●●●로 표시돼요.

email - 이메일

<label for="email">이메일:</label>
<input type="email" id="email" name="email">

이메일 형식을 자동으로 검증해요.

number - 숫자

<label for="age">나이:</label>
<input type="number" id="age" name="age" min="1" max="120">
  • min: 최소값
  • max: 최대값

date - 날짜

<label for="birth">생년월일:</label>
<input type="date" id="birth" name="birthday">

날짜 선택기가 나타나요.

checkbox - 체크박스

<input type="checkbox" id="agree" name="agree">
<label for="agree">약관에 동의합니다</label>

여러 개 선택 가능해요.

<p>취미를 선택하세요:</p>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">독서</label>

<input type="checkbox" id="hobby2" name="hobby" value="sports">
<label for="hobby2">운동</label>

<input type="checkbox" id="hobby3" name="hobby" value="music">
<label for="hobby3">음악</label>

실행 결과:

취미를 선택하세요:



radio - 라디오 버튼

<p>성별:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>

실행 결과:

성별:


하나만 선택 가능해요. name이 같아야 해요!

file - 파일 업로드

<label for="photo">사진:</label>
<input type="file" id="photo" name="profile_photo">

기타 input 타입

<!-- 색상 선택 -->
<input type="color" name="color">

<!-- 범위 슬라이더 -->
<input type="range" min="0" max="100" value="50">

<!-- 검색 -->
<input type="search" placeholder="검색...">

<!-- 전화번호 -->
<input type="tel" placeholder="010-1234-5678">

<!-- URL -->
<input type="url" placeholder="https://">

input 속성

placeholder

힌트 텍스트를 보여줘요.

<input type="text" placeholder="이름을 입력하세요">

required

필수 입력 항목으로 만들어요.

<input type="text" name="username" required>

readonly

읽기만 가능하고 수정 불가해요.

<input type="text" value="수정 불가" readonly>

disabled

비활성화돼요.

<input type="text" value="비활성화" disabled>

value

기본값을 설정해요.

<input type="text" value="기본값">

maxlength

최대 글자 수를 제한해요.

<input type="text" maxlength="10">

textarea - 여러 줄 텍스트

<label for="message">메시지:</label>
<textarea id="message" name="message" rows="5" cols="30">
</textarea>

실행 결과:


  • rows: 행 수
  • cols: 열 수

select - 드롭다운 선택

<label for="city">도시:</label>
<select id="city" name="city">
    <option value="">선택하세요</option>
    <option value="seoul">서울</option>
    <option value="busan">부산</option>
    <option value="incheon">인천</option>
</select>

실행 결과:

기본 선택값

<select name="city">
    <option value="seoul" selected>서울</option>
    <option value="busan">부산</option>
</select>

다중 선택

<select name="cities" multiple>
    <option value="seoul">서울</option>
    <option value="busan">부산</option>
    <option value="incheon">인천</option>
</select>

Ctrl 누르고 클릭하면 여러 개 선택 가능해요.

button 태그

<!-- 폼 제출 버튼 -->
<button type="submit">제출</button>

<!-- 초기화 버튼 -->
<button type="reset">초기화</button>

<!-- 일반 버튼 -->
<button type="button">클릭</button>

실행 결과:

또는

<input type="submit" value="제출">
<input type="reset" value="초기화">
<input type="button" value="클릭">

label 태그

입력 요소에 레이블을 붙여요.

<!-- 방법 1: for와 id 연결 -->
<label for="username">이름:</label>
<input type="text" id="username">

<!-- 방법 2: input을 감싸기 -->
<label>
    이름: <input type="text">
</label>

label을 클릭하면 input이 선택돼요. 편해요!

fieldset과 legend

폼을 그룹으로 묶어요.

<form>
    <fieldset>
        <legend>개인 정보</legend>
        <label for="name">이름:</label>
        <input type="text" id="name"><br>
        <label for="email">이메일:</label>
        <input type="email" id="email">
    </fieldset>

    <fieldset>
        <legend>추가 정보</legend>
        <label for="phone">전화번호:</label>
        <input type="tel" id="phone">
    </fieldset>
</form>

실전 예제

로그인 폼

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로그인</title>
</head>
<body>
    <h1>로그인</h1>

    <form action="/login" method="POST">
        <label for="username">아이디:</label><br>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">비밀번호:</label><br>
        <input type="password" id="password" name="password" required><br><br>

        <input type="checkbox" id="remember" name="remember">
        <label for="remember">로그인 상태 유지</label><br><br>

        <button type="submit">로그인</button>
    </form>
</body>
</html>

실행 결과:

로그인









회원가입 폼

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<body>
    <h1>회원가입</h1>

    <form action="/signup" method="POST">
        <fieldset>
            <legend>계정 정보</legend>

            <label for="username">아이디:</label><br>
            <input type="text" id="username" name="username" required><br><br>

            <label for="password">비밀번호:</label><br>
            <input type="password" id="password" name="password" required><br><br>

            <label for="password2">비밀번호 확인:</label><br>
            <input type="password" id="password2" name="password2" required><br><br>
        </fieldset>

        <fieldset>
            <legend>개인 정보</legend>

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

            <label for="email">이메일:</label><br>
            <input type="email" id="email" name="email" required><br><br>

            <label for="birth">생년월일:</label><br>
            <input type="date" id="birth" name="birthday"><br><br>

            <p>성별:</p>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">남성</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">여성</label><br><br>
        </fieldset>

        <fieldset>
            <legend>약관 동의</legend>

            <input type="checkbox" id="terms" name="terms" required>
            <label for="terms">이용약관에 동의합니다 (필수)</label><br>

            <input type="checkbox" id="privacy" name="privacy" required>
            <label for="privacy">개인정보 처리방침에 동의합니다 (필수)</label><br>

            <input type="checkbox" id="marketing" name="marketing">
            <label for="marketing">마케팅 정보 수신에 동의합니다 (선택)</label><br><br>
        </fieldset>

        <button type="submit">가입하기</button>
        <button type="reset">초기화</button>
    </form>
</body>
</html>

설문조사 폼

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>설문조사</title>
</head>
<body>
    <h1>고객 만족도 조사</h1>

    <form action="/survey" method="POST">
        <p>1. 서비스 만족도를 선택해주세요:</p>
        <input type="radio" id="very-good" name="satisfaction" value="5">
        <label for="very-good">매우 만족</label><br>
        <input type="radio" id="good" name="satisfaction" value="4">
        <label for="good">만족</label><br>
        <input type="radio" id="normal" name="satisfaction" value="3">
        <label for="normal">보통</label><br>
        <input type="radio" id="bad" name="satisfaction" value="2">
        <label for="bad">불만족</label><br>
        <input type="radio" id="very-bad" name="satisfaction" value="1">
        <label for="very-bad">매우 불만족</label><br><br>

        <p>2. 개선이 필요한 부분은? (복수 선택 가능)</p>
        <input type="checkbox" id="speed" name="improve" value="speed">
        <label for="speed">속도</label><br>
        <input type="checkbox" id="design" name="improve" value="design">
        <label for="design">디자인</label><br>
        <input type="checkbox" id="function" name="improve" value="function">
        <label for="function">기능</label><br><br>

        <label for="feedback">3. 추가 의견:</label><br>
        <textarea id="feedback" name="feedback" rows="5" cols="50"></textarea><br><br>

        <button type="submit">제출</button>
    </form>
</body>
</html>

자주 하는 실수

1. label과 input 연결 안 함

<!-- 나쁜 예 -->
이름: <input type="text">

<!-- 좋은 예 -->
<label for="name">이름:</label>
<input type="text" id="name">

2. name 속성 빠뜨리기

<!-- 틀림: 데이터 전송 안 됨 -->
<input type="text" id="username">

<!-- 맞음 -->
<input type="text" id="username" name="username">

3. radio의 name 다르게 쓰기

<!-- 틀림: 여러 개 선택됨 -->
<input type="radio" name="gender1" value="male">남성
<input type="radio" name="gender2" value="female">여성

<!-- 맞음: name이 같아야 함 -->
<input type="radio" name="gender" value="male">남성
<input type="radio" name="gender" value="female">여성

다음 단계

다음 글에서는 시맨틱 태그를 배웁니다. header, nav, article, footer 등 의미 있는 태그로 웹 페이지를 구조화하는 방법을 알아볼 거예요.

폼은 사용자와 소통하는 핵심이에요. 잘 만들면 사용자 경험이 훨씬 좋아집니다!

HTML 독학 가이드 시리즈:

← 블로그 목록으로