본문 바로가기
기초 및 언어/▶ HTML & CSS

6. HTML_form 태그

by 류딩이 2025. 9. 5.

📌 HTML form 태그와 입력 양식 정리

웹페이지에서 사용자에게 정보를 입력받을 때는 form 태그를 사용합니다.
입력값은 action 속성에 지정된 페이지(예: result.jsp)로 전송됩니다.

HTML에서 form 태그는 “사용자로부터 입력을 받아서 서버로 전달하기 위해” 사용합니다.
즉, 단순히 화면에 입력창만 띄우는 게 아니라, 입력된 데이터를 묶어서 전송할 수 있게 해주는 컨테이너 역할을 합니다.

📌 form을 사용하는 이유

  1. 사용자 입력 수집
    • 이름, 비밀번호, 이메일, 날짜, 체크박스, 라디오버튼 등 다양한 입력을 받을 수 있음
  2. 데이터 전송 기능
    • action 속성에 지정된 서버 페이지(.jsp, .php, .html 등)로 데이터를 전송
    • method="get" → 주소(URL)에 붙여서 전송
    • method="post" → 보이지 않게 전송 (보안 ↑)
  3. 입력값 검증 가능
    • type="email", type="number", required 같은 속성을 통해 기본적인 입력 검증 가능
  4. 서버와 연동되는 기본 단위
    • 로그인, 회원가입, 검색창, 예약 시스템 같은 웹 애플리케이션의 핵심은 대부분 form을 기반으로 동작

✅ form 태그 기본 구조

<form action="전송할_페이지.jsp" method="get/post">
    <!-- 입력 요소들 -->
</form>

 

  • action : 입력값을 보낼 대상 페이지
  • method : GET(주소에 붙음) / POST(숨겨서 보냄)

 

✅ 주요 입력 요소 정리

1. 텍스트 입력

<input name="userName" type="text" value="초기상태">

 

 

  • type="text" → 일반 텍스트 입력
  • value → 기본값 설정

 

 

2. 비밀번호 입력

<input name="userPw" type="password">

 

3. 이메일 입력

<input name="userEmail" type="email">

 

4. 날짜 선택

<input name="userDate" type="date">

 

5. 숫자 입력

<input name="userNumber" type="number">

 

6. 라디오 버튼

<input type="radio" name="userRoom" value="single"> single
<input type="radio" name="userRoom" value="double" checked> double
<input type="radio" name="userRoom" value="twin"> twin

 

  • 같은 name 값끼리 묶여서 하나만 선택 가능

 

7. 드롭다운(select)

<select name="userEmail2">
    <option>선택</option>
    <option value="daum.net">daum.net</option>
    <option value="naver.com">naver.com</option>
    <option value="gmail.com">gmail.com</option>
</select>

 

8. 범위 선택 (슬라이더)

<input name="userJumsu" type="range" min="1" max="10" step="1" value="5">
  • 중복 선택 가능

 

9. 체크박스

<input name="userOption" type="checkbox" value="조식"> 조식
<input name="userOption" type="checkbox" value="바베큐"> 바베큐
<input name="userOption" type="checkbox" value="픽업 서비스"> 픽업 서비스

 

10. 파일 업로드

<input type="file" name="userFile">

 

11. 여러 줄 텍스트 입력

<textarea name="userMsg" rows="3" cols="50" placeholder="문의사항 입력"></textarea>

 

12. 버튼들

<input type="submit" value="전송">   <!-- 입력값 전송 -->
<input type="reset" value="취소">   <!-- 입력값 초기화 -->
<input type="button" value="버튼">  <!-- 단순 버튼 -->

 

 

✅ 전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예약 문의</title>
</head>
<body>
    <h1>예약 문의</h1>
    <form action="result.jsp">
        <p><label>작성자</label> 
           <input name="userName" type="text" value="초기상태"></p>

        <p><label>비밀번호</label> 
           <input name="userPw" type="password"></p>

        <p><label>제목</label> 
           <input name="userTitle" type="text"></p>

        <p><label>이메일</label> 
           <input name="userEmail" type="email"></p>

        <p><label>투숙 날짜</label> 
           <input name="userDate" type="date"></p>

        <p><label>투숙 인원</label> 
           <input name="userNumber" type="number"></p>

        <fieldset style="width:30%">
            <legend>객실 선택</legend>
            <input name="userRoom" type="radio" value="single"> single
            <input name="userRoom" type="radio" value="double" checked> double
            <input name="userRoom" type="radio" value="twin"> twin
        </fieldset>

        <p>예약자 성별<br>
           <input type="radio" name="gender" value="man"> 남자 
           <input type="radio" name="gender" value="woman"> 여자</p>

        <p><label>Email</label>
           <input name="userEmail1" type="text"> @
           <select name="userEmail2">
                <option>선택</option>
                <option value="daum.net">daum.net</option>
                <option value="naver.com">naver.com</option>
                <option value="gmail.com">gmail.com</option>
           </select>
        </p>

        <p><label>평점</label>
           <input name="userJumsu" type="range" min="1" max="10" step="1" value="5"></p>

        <fieldset style="width:50%">
            <legend>옵션 선택</legend>
            <input name="userOption" type="checkbox" value="조식"> 조식
            <input name="userOption" type="checkbox" value="바베큐"> 바베큐
            <input name="userOption" type="checkbox" value="픽업 서비스"> 픽업 서비스
        </fieldset>

        <p>신원 확인용 사진
           <input type="file" name="userFile"></p>

        <p><label>문의 사항</label>
           <textarea name="userMsg" rows="3" cols="50" placeholder="문의사항 입력"></textarea></p>

        <input type="submit" value="전송">
        <input type="reset" value="취소">
        <input type="button" value="버튼">
    </form>
</body>
</html>

 

✅ 실행 결과 화면

폼을 실행하면 이렇게 보입니다 👇

  • 이름, 비밀번호, 제목, 이메일 등 기본 입력칸
  • 날짜·인원·객실선택 라디오버튼
  • 이메일 도메인 선택 드롭다운
  • 평점 슬라이더
  • 옵션 선택 체크박스
  • 파일 업로드, 문의사항 텍스트 영역
  • 전송/취소 버튼
저작자표시 비영리 변경금지 (새창열림)

'기초 및 언어 > ▶ HTML & CSS' 카테고리의 다른 글

2. CSS_선택자  (0) 2025.09.06
1. CSS_CSS적용방법  (0) 2025.09.06
5. HTML_table  (1) 2025.09.05
4. HTML_iframe  (0) 2025.09.05
3. HTML_하이퍼링크 정리 <a>태그  (0) 2025.09.04

관련글

티스토리툴바