<form>
폼 양식(입력 양식)을 만들고 내용을 쿼리로 전송하는 태그
<input>
- 사용자의 입력을 받음
- type 속성 : 입력 방식 종류 선택, checkbox, date, password(입력 값 비노출) 등 값 선택 가능
- name 속성 : input 식별자
<label>
- input의 라벨 역할
- < label ><input/></ label > 이런식으로 감싸면 라벨만 클릭해도 input이 선택됨.
- 아니면 병렬로 표기하고 input id=email / label for=email 식으로 연결해 줄 수 있음.
<button>
- type 속성: 기본값 'submit' 쿼리*로 데이터를 보냄
- type을 'reset'으로 하면 초기화, 'button'으로 하면 아무 동작을 하지 않음.
- form 태그 밖에 작성할 경우 아무 동작을 하지 않음!
[심화]
<form>
* form 태그의 action 속성
- 기본적으로 폼 내용을 전송하는 주소는 현재 페이지의 주소임.
- action에 속성값으로 다른 주소를 적으면 해당 주소에 쿼리로 입력 데이터가 전송됨.
예) 현재 주소가 "http://127.0.0.1:3000/"이라고 가정할 때,
input에 '야호 ' , '11' 입력 후 button 클릭 시
<body>
<form action="https://google.com/search">
<input name="nick">
<input name="age">
<button>검색</button>
</form>
</body>=> 전송 결과는 'http://127.0.0.1:3000?nick=야호&age=11' 이 아닌 'https://google.com/search?nick=야호&age=11 '이 됨.
* form 태그의 method 속성
- 기본값은 'get'임(데이터 받아오기)
- 'post' 설정 가능(보내기)
<input>
* input 태그의 type="checkbox" 속성 값
- 하나의 체크박스 => 해당 값이 체크되면 'on'으로 저장됨
<!-- 하나의 agreement의 값이 'on'으로 저장됨 -->
<label>
<input name="agreement" type="checkbox">
동의합니다
</label>
- 여러개의 체크박스 => value로 각각의 값 설정해줘야 함.
<!-- &film=action&film=comedy의 형식으로 전송됨 -->
<label for="film">좋아하는 영화 장르</label>
<label>
<input type="checkbox" name="film" value="action">
액션
</label>
<label>
<input type="checkbox" name="film" value="comedy">
코미디
</label>
<label>
<input type="checkbox" name="film" value="romance">
로맨스
</label>
* input 태그의 type="file" 속성 값
- 파일 첨부 기능
<!-- accept: 첨부를 허용할 속성 지정 -->
<input name="avatar" type="file" accept=".png,.jpg">
<!-- mutiple : 파일 복수 첨부 가능 -->
<input name="photos" type="file" multiple> <!-- 여러 개 선택 가능 -->
<input name="avatar" type="file"> <!-- 한 개만 선택 가능 -->
* input 태그의 type="number" 속성 값
- 숫자 입력 기능, 최대값 최소값, 증감치 설정 가능
<!-- 100에서 1000사이 -->
<input type="number" min="100" max="1000">
<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">
* input 태그의 type="radio" 속성 값
- 여러 항목 중 하나의 값만 선택됨
- 각 항목에 고유의 value 값 설정해줘야 함.
<!-- "좋음" 선택 시 feeling의 값으로 '3'이 전송됨. -->
<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>
* input 태그의 type="range 속성 값
- 범위 안에서 숫자를 선택 가능
<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">
* input 태그의 type="select속성 값
- 여러 항목이 목록 상자로 나오며, 그 중 하나의 값만 선택됨
- 각 항목에 고유의 value 값 설정해줘야 함.
<!-- '드라마' 선택 시 genre의 값이 drama로 저장됨 -->
<label for="genre">장르</label>
<select id="genre" name="genre">
<option value="korean">한국 영화</option>
<option value="foreign">외국 영화</option>
<option value="drama">드라마</option>
<option value="documentary">다큐멘터리</option>
<option value="vareity">예능</option>
</select>
<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">
* input 태그의 placeholder 속성
- 인풋 설명(안내) 입력
- CSS 선택자로 ::placeholder를 선택한 후 디자인 변경 가능
input::placeholder {
color: #dddddd;
}
* input 태그의 required 속성
- 필수 입력 항목으로 설정
<input name="email" type="email" required>
* input 태그의 autocomplete 속성
- 이전에 입력한 값들을 기억하였다가 하단에 보여줌
- 사용 시 반드시 "on"이라는 값을 주어야 함
- "email", "tel" 등 값의 형식도 지정 가능
<input name="search" type="text" autocomplete="on">
<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">
<textarea>
- 긴글을 입력할 수 있는 가변 크기의 input
- 반드시 </textarea>로 닫아야 함.
<textarea name="content"></textarea>
'HTML' 카테고리의 다른 글
| css 속성 linear-gradient (0) | 2025.08.21 |
|---|---|
| 구글 애널리틱스로 방문자 수 확인하기 (0) | 2025.03.05 |
| 오픈그래프로 소셜 공유 미리보기 만들기 (0) | 2025.03.05 |
| 인코딩 (0) | 2025.03.04 |