[HTML] 주요 태그와 속성 -form, input, label, select, button, image

[ form ]

<form action="process.jsp" method="post">

• form태그는 블록 요소이나 내부의 input, option등은 인라인요소

1. 속성

1) action

• 입력한 데이터가 전송될 주소
• URL 입력

2) method

• 데이터 전송 방식
• GET(기본값), POST

3) autocomplete

• 자동완성 기능 설정 여부
• on/off

4) novalidate

• 입력양식의 유효성 검증 안함

 

2. 내부 요소

1) datalist

• 입력값 제안
• datalist의 id 속성의 값은 input요소의 list속성에서 참조

2) keygen

• key-pair generator
• 유저를 안전하게 인증하기 위함(요즘은 잘 사용하지 않고 세션, 웹토큰 등 사용 )
• form이 submit될때, private키와 public키가 생성되고, private키는 클라이언트에 저장되고 public 키는 서버로 보내짐

3) output

• 계산의 결과 또는 스크립트 출력 (잘 사용하지 않음)

[ input ]

• 입력양식을 만들 때 사용하는 form요소의 하위 요소로 주로 사용

1. 속성

1) type

type	설명	예시
기본 입력 타입
email	이메일 형식 검사	<input type="email" name="email">
number	숫자 입력 (min, max, step으로 범위 지정 가능)	<input type="number" min="1" max="10">
password	입력값 마스킹 처리	<input type="password" name="pw">
search	검색어 입력 필드 (검색 UI 제공)	<input type="search" placeholder="검색어 입력">
tel	전화번호 입력 (모바일 숫자 키패드 표시)	<input type="tel" name="phone">
text	일반 문자 입력	<input type="text" name="username">
url	URL 형식 검사	<input type="url" name="homepage">
선택 입력 타입
checkbox	여러 개 선택 가능	<input type="checkbox" name="hobby" value="music">
radio	하나만 선택 가능 (같은 name 사용)	<input type="radio" name="gender" value="M">
범위 / 값 제한 관련
max	입력 가능한 최대값 지정	<input type="number" max="10">
min	입력 가능한 최소값 지정	<input type="number" min="1">
range	범위 선택 슬라이더 (min, max, step으로 범위 설정)	<input type="range" min="0" max="100" step="10">
파일 업로드 관련
accept	업로드 가능한 파일 타입 제한	<input type="file" accept="image/*">
file	파일 업로드 (multiple로 여러 개 선택 가능, accept로 파일 형식 제한)	<input type="file" accept="image/*" multiple>
multiple	여러 개의 값을 선택할 수 있게 함 (file, select 등에서 사용)	<input type="file" multiple>
기타 입력 타입
color	색상 선택	<input type="color">
hidden	화면에는 보이지 않지만 name, value 값을 서버로 전송	<input type="hidden" name="id" value="10">
submit	폼 제출 버튼	<input type="submit" value="전송">
date picker 계열
date	날짜 선택 (년월일)	<input type="date">
month	월 선택 (년월)	<input type="month">
time	시간 선택 (시:분)	<input type="time">
week	연도 기준 몇 번째 주인지 선택	<input type="week">

• accept 속성 

  속성값	설명	예시
  파일 확장자	닷(.)으로 시작하는 파일 확장자를 지정하여 업로드 가능한 파일을 제한	<input type="file" accept=".png,.jpg,.pdf">
  audio/*	모든 타입의 오디오 파일 허용	<input type="file" accept="audio/*">
  video/*	모든 타입의 비디오 파일 허용	<input type="file" accept="video/*">
  image/*	모든 타입의 이미지 파일 허용	<input type="file" accept="image/*">
  미디어 타입	매개변수(parameter)를 가지지 않는 유효한 MIME 타입 사용	<input type="file" accept="application/pdf">

 

2) name

• 폼(form) 데이터 전송용 속성
• form 관련 태그에서 주로 사용
• 자바에서는 camelCase로 DTO,VO의 필드명과 같게
• checkbox와 radio의 경우 name 속성의 값이 같아야 같은 그룹으로 적용

 

3) form

• input의 form 속성값 = 연결할 form의 id 값 input이 form 태그 바깥에 있어도 해당 form에 소속된것처럼 동작

<form id="loginForm" action="/login">
  <input type="text" name="id">
</form>

<input type="password" name="pw" form="loginForm">
<input type="submit" value="로그인" form="loginForm">

 

4) HTML5에 추가된 새로운 속성

속성	설명	예시
자동 입력 관련
autocomplete	입력값 자동완성 기능 설정	<input type="text" autocomplete="on">
autofocus	페이지 로드 시 자동 포커스	<input type="text" autofocus>
폼 연결 관련
form	input을 특정 form과 연결	<input type="text" form="loginForm">
입력 값 제한 관련
max	입력 가능한 최대값 지정	<input type="number" max="10">
min	입력 가능한 최소값 지정	<input type="number" min="1">
pattern	정규표현식으로 입력값 형식을 제한	<input type="text" pattern="[0-9]{3}">
required	필수 입력 필드 지정	<input type="text" required>
step	입력값 증가 단위 지정	<input type="number" step="2">
입력 UI 관련
height, width	이미지 버튼 크기 지정	<input type="image" src="btn.png" width="100" height="50">
list	datalist와 연결하여 입력값 추천	<input list="fruits">
multiple	여러 값 선택 가능	<input type="file" multiple>
placeholder	입력 힌트 표시	<input type="text" placeholder="이름 입력">

• pattern (정규표현식)

  기호	설명	예시
  |	여러 값 중 하나 선택	a|b → a 또는 b
  ( )	여러 식을 하나로 묶음	`a(b
  *	0회 이상 반복	ab* → a, ab, abb
  +	1회 이상 반복	ab+ → ab, abb
  ?	0 또는 1회	ab? → a, ab
  {m,n}	m~n번 반복	a{1,3} → a, aa, aaa
  [ ]	문자 중 하나 선택	[abc] → a, b, c
  [^ ]	특정 문자 제외	[^abc]
  -	문자 범위 지정	[a-z], [0-9]
  ^	문자열 시작	^abc
  $	문자열 끝	abc$

 

⚠️ boolean 속성 : 속성의 이름만 넣어도 적용되는 속성

속성	설명
required	필수 입력
autofocus	자동 포커스
checked	체크된 상태
selected	선택된 상태
disabled	비활성화
readonly	읽기 전용
multiple	여러 개 선택 가능

[ label ]

• 입력 요소(input)의 설명(이름)을 표시하는 태그
• label의 for 속성값 = input의 id
• label의 for 속성값 = select의 id

<label for="user">아이디</label>
<input type="text" id="user">

 

[ select ]

• 여러 항목 중 값을 선택하는 입력 태그
• drop down list box
• 내부에 option 태그로 선택 항목 정의

<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
</select>

 

[ button ]

• 버튼 생성하는 태그
• 클릭시 특정 동작 수행
• type 속성으로 기능 지정(submit, reset, button)

<button type="submit">전송</button> <!--  -->
<button type="reset">초기화</button> <!--  -->
<button type="button">일반버튼</button> <!--  -->

 

[ textarea ]

• 여러 줄 텍스트를 입력하는 태그
• 게시글, 댓글, 설명 등 긴 문장 입력에 사용
• rows, cols 속성으로 크기 지정 가능

<textarea name="content" rows="5" cols="30">
내용 입력
</textarea>

 

⚠️멱등성 (Idempotency)
- 같은 요청을 여러 번 실행해도 결과가 동일한 성질
한 번 실행하든 여러 번 실행하든 서버 상태가 동일하게 유지됨

요청	설명	멱등성
GET	데이터를 조회만 하므로 여러 번 호출해도 결과 동일	⭕
PUT	같은 데이터로 계속 업데이트해도 결과 동일	⭕
DELETE	이미 삭제된 데이터를 다시 삭제해도 결과 동일	⭕
POST	요청할 때마다 새로운 데이터가 생성됨	❌

 [img ]

• 이미지를 화면에 표시하는 태그
• 인라인 요소
• 닫는 태그 없음 (empty tag)

<img src="cat.jpg" alt="고양이 사진" width="300" height="200">

 

속성	설명
src	표시할 이미지 경로 또는 base64인코딩문자열
alt	이미지 설명 (이미지 로딩 실패 시 표시, 웹 접근성 향)
width	이미지 너비 지정
height	이미지 높이 지정

 

[ audio ]

• 오디오 파일을 재생하는 태그
• HTML5에서 추가됨

<audio src="music.mp3" controls autoplay loop></audio>

속성	설명
controls	재생 컨트롤 표시
autoplay	자동 재생
loop	반복 재생

[ video ]

• 동영상 파일을 재생하는 태그
• HTML5에서 추가됨

<video src="movie.mp4" controls autoplay loop width="400" height="300"></video>

속성	설명
controls	재생 컨트롤 표시
autoplay	자동 재생
loop	반복 재생
width, height	영상 크기