[HTML] form 태그 구성 / type 종류 / get, post방식
2024. 1. 8. 16:42ㆍHTML + CSS+JS/HTML
반응형
form
값을 전달하고 받기 위한 폼을 작성
입력 내용을 그룹화 시켜서 서버에 전달하는 작업
HTML 요소인 <form>태그에 실려 전송되는 데이터
<form>태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체에 담아 받음
form안에는 모든 형태의 태그 사용 가능
| form | 입력 내용을 그룹화 시켜서 서버에 전달하는 작업 |
| 구성 | action - 연결페이지 지정(맵핑) method - 전달방식 (get, post) multipart - 여러개의 파일을 전송할 때 |
| get방식 | 캐시가 가능, 히스토리에 남음, 길이 제한 있음 변수값만 전송 가능 http://localhost:8080/smaple?변수=값&변수=값..... |
| post방식 | 캐시 불가능, 히스트로이 남지 않음, 길이 제한 없음 파일 전송 http://localhost:8080/smaple 패킷으로{ } |
| input 태그 | 입력값을 구성 |
| button 태그 | submit(form영역을 전달) reset(form영역을 초기화) |
**type 종류**
button, checkbox, color, date, datetime-local,
email, file, hidden, image, month, number, password, radio, range,
reset, submit, search, tel, text, time, url, week
<!DOCTYPE html>
<html lang="en">
<head> <!-- css, javascript -->
<meta charset="UTF-8">
<title>form</title>
<!-- w3school.com에서 아무 예문하나 읽어서 복사 붙여 넣기 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 폭 제한 부분 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>[일반 form 형식]</h3>
<h5>전송시: http://localhost:8080/test?id=값&email=값</h5>
<br>
<br>
<form action="test"> <!-- method 생략시 get방식 -->
아이디:
<input type="test" name="id"> <!-- name이 변수명 -->
이메일:
<input type="email" name="email"><br> <!-- email이 변수명 -->
<input type="checkbox" name="checkbox">체크박스<br>
<input type="radio" name="radio">라디오버튼<br>
<input type="time" name="time">시간<br>
<input type="week" name="week">week<br>
<input type="month" name="month">월<br>
<input type="datetime-local" name="datetime-local">날짜<br>
<input type="search" name="search">검색<br>
<input type="file" name="file">파일<br>
<input type="url" name="url">url<br>
<input type="hidden" name="hidden">숨김<br>
<input type="color" name="color">색상<br>
<button type="submit">전송</button>
<button type="reset">취소</button>
</form>
<br>
<br>
<h4>부트스트랩을 이용한 form 구현</h4>
<p>id 태그이름, for 누구를 위한...for는 필요없으면 생략 가능</p>
<form action="test"> <!-- 기존 문법과 동일 -->
<label for="input1" class="form-label">아이디</label> <!-- label: 출력프로그램 / form-label, form-control 모양 -->
<input id="input1" type="text" name="id" class="form-control">
</form>
</body>
</html>
get / post 방식
반응형
'HTML + CSS+JS > HTML' 카테고리의 다른 글
| [HTML]table 태그 (0) | 2024.01.07 |
|---|---|
| [HTML] button 태그 (0) | 2024.01.07 |
| [HTML] 주요 태그 (0) | 2024.01.07 |