신한DS 금융SW 아카데미/웹

HTML form 태그, input 태그

hpehpeyy 2025. 5. 12. 11:29

📌 form 태그란?

- 사용자에게 입력을 받기 위함

- 클라이언트에서 서버로 데이터를 전송하기 위해 사용

 

💡 주요 속성

  • method : 데이터를 전송하는 방법을 지정(get, post)
  • action : 데이터를 전송할 URL
<form method="get" action="">
  <!-- 입력 요소들 -->
</form>

 

☑️ method 속성 비교

get

  • 전송시 데이터가 주소창에 노출 됨
  • 전송 길이 제한 있음
  • 즐겨찾기 / 다른사람에게 공유 가능

post

  • 전송시 데이터가 주소창에 노출 되지 않음
  • 전송 길이 제한 없음
  • 다른사람에게 공유 불가능
  • 보안에 적합
  • 파일 전송 시 필수(파일 첨부 시 enctype="multipart/form-data" 추가)
구분 GET POST
전송 방식 주소(URL)에 데이터를 붙여서 전송 HTTP 요청 본문(body)에 데이터를 담아 전송
보안성 낮음 (주소창에 보임) 높음 (주소창에 안 보임)
URL 예시 http://site.com?name=guri&age=25 http://site.com (데이터는 숨겨짐)
전송 용량 제한 있음 (대략 2KB~8KB) 제한 거의 없음 (파일 업로드 가능)
캐싱/북마크 가능 (주소 복사 가능) 불가 (개인정보 노출 방지)
사용 목적 데이터 조회, 검색, 간단한 전송 로그인, 회원가입, 글쓰기, 파일 업로드 등 민감한 데이터 전송

 

☑️action

전송할 URL 또는 경로 지정

  • form 안의 입력값들을 어디로 전송할지 지정하는 속성
  • 서버에서 데이터를 처리할 URL 경로를 작성
  • 생략하면 현재 페이지(self)로 전송됨
<form method="post" action="/login">
  <!-- 로그인 폼 요소 -->
</form>
  • /login 주소로 입력 데이터를 POST 방식으로 보낸다는 뜻
  • 실제 백엔드에서는 해당 URL을 받아 처리하는 서버 코드가 필요함

📌 input 태그란?

- 사용자에게 데이터를 입력받기 위해 사용하는 가장 기본적인 폼(form) 요소

 

💡 input 태그의 type 속성

text 텍스트 입력
password 비밀번호 입력
radio 단일 선택(같은 name 사용)
checkbox 다중 선택 (배열로 전송됨)
file 파일 업로드(POST 방식 필수)
hidden 숨겨진 값(전송은 가능)
submit 전송 버튼
reset 초기화 버튼(처음 상태로 돌아감)
button 일반 버튼(이벤트용)
image 이미지 버튼(submit 역할)
date, number 날짜, 숫자 전용 입력

 

💡 input 태그의 기타 속성

readonly 읽기 전용(수정 불가, 전송 가능)
disabled 비활성화(수정 불가, 전송 불가)
placeholder 입력 전 안내 문구
maxlength 최대 글자 수 제한
autocomplete="off" 자동완성 끄기
required 필수 입력(빈칸 시 전송 불가)
autofocus 페이지 로딩 시 자동 포커스

 

💡 공통 속성(name, value)

 

☑️name 속성

- 서버로 전송되는 데이터의 "이름"

- 서버에서 데이터를 구분할 때 사용하는 파라미터 키(key)

- 폼 요소마다 반드시 있어야 하는 속성

<input type="text" name="username" value="guri">
  • 서버로 전송되는 값 : username=guri

☑️value 속성

- 폼 요소에 입력된 실제 값(value)

- 사용자가 입력하지 않아도 기본값 설정 가능

- 체크박스, 라디오 버튼, 숨겨진 입력(hidden) 등에도 주로 사용

<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
  • 선택한 값만 서버로 전송 (예 : gender=male)

☑️ text, password, radio, checkbox, file

<input type="hidden" name="hidden" value="1"> 
아이디 : <input type="text" name="id" value="test" maxlength="5" required><br>
비밀번호 : <input type="password" name="pw" placeholder="비밀번호를 입력하세요"><br>
성별 : <input type="radio" name="gender" value="1" checked>남 <input type="radio" name="gender" value="2">여<br>
취미 : <input type = "checkbox" name="hobby" value="1" checked>게임
<input type = "checkbox" name="hobby" value="2">영화
<input type = "checkbox" name="hobby" value="3">음악<br> 
<input type="submit"><br>
첨부파일: <input type="file" name="profile"><br>

 

💡 checkbox 전송 방식

<input type="checkbox" name="hobby" value="1">
<input type="checkbox" name="hobby" value="2">
  • 전송 데이터 : hobby=1&hobby=2
  • 서버에서 : request.getParameterValues("hobby")로 배열로 받음

 

☑️ <select> + <option> : 드롭다운

<select name="school">
  <option value="1">고등학교</option>
  <option value="2" selected>대학교</option>
  <option value="3">대학원</option>
</select>
  • multiple 속성으로 다중 선택도 가능

 

☑️ textarea

여러 줄 입력창

<textarea name="introduce" cols="20" rows="5" autofocus>안녕하세요</textarea>

 

☑️ date, number, image, button, reset

<input type="date"><br>
<input type="number"><br>
<input type="image" src="img/google.png" alt="구글"><br>
<input type="button" value="버튼">
<input type="reset" value="리셋">

 

☘️ 전체 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="get" action="" >
        <input type="hidden" name="hidden" value="1"> 
        아이디 : <input type="text" name="id" value="test" maxlength="5" required><br>
        비밀번호 : <input type="password" name="pw" placeholder="비밀번호를 입력하세요"><br>
        성별 : <input type="radio" name="gender" value="1" checked>남 <input type="radio" name="gender" value="2">여<br>
        취미 : <input type = "checkbox" name="hobby" value="1" checked>게임
        <input type = "checkbox" name="hobby" value="2">영화
        <input type = "checkbox" name="hobby" value="3">음악<br> 
        <input type="submit"><br>
        첨부파일: <input type="file" name="profile"><br>
        최종학력: <select name="school" >
            <option value="1">고등학교</option>
            <option value="2" selected>대학교</option>
            <option value="3">대학원</option>
        </select>

        <textarea name="introduce" cols="20" rows="5" autofocus>안녕하세요</textarea><br>
        <input type="date"><br>
        <input type="number"><br>
        <input type="image" src="img/google.png" alt="구글"><br>
        <input type="button" value="버튼">
        <input type="reset" value="리셋">
        <br>
        <input type="submit" value="전송">
    </form> 
</body>
</html>

'신한DS 금융SW 아카데미 > 웹' 카테고리의 다른 글

HTML div 태그, span 태그  (0) 2025.05.12
HTML 태그(iframe, video, img, source)  (1) 2025.05.12

'신한DS 금융SW 아카데미/웹'의 다른글

  • 현재글HTML form 태그, input 태그

관련글

티스토리툴바