폼 작성

웹 폼 작성을 위한 페이지 만들기에 대해 설명 합니다.

Data ID

GET_FORM

Request

Name Value
form_code 작성할 폼의 코드(콘솔의 폼 관리에서 확인 가능)
fail_url 권한이 없는 경우 이동 URL(회원 전용 폼을 익명으로 접근 하는 경우 등)

Response

JSON : output.form[0], PHP : $output['form'][0]

Name Value
permission 폼 등록 권한
form_name 폼 이름
form_key 폼 고유키
description 폼 설명
modify_date 폼 정보 수정 일시
create_date 폼 정보 등록 일자

HTML attributes

Tag : form

Name Value Description
method post Form method
id frm_web_form Form id
class h-frm-web-form Form class('h-'로 시작되는 class는 JQuery selector로 사용됩니다)
data-validation-alert yes 또는 no Validation 결과 표시 형식 : yes(Alert), no(페이지에 표시)
data-complete-type alert 또는 redirect 전송완료 표시 형식 : alert(Alert 창), redirect(return_url로 이동)
data-complete-message TEXT data-complete-type이 alert일 경우 표시될 메시지
data-geo-location yes or no Geo location 정보 저장 여부

Form elements

Name Type Value
form_key hidden 작성할 폼의 키(콘속의 폼 관리에서 확인 가능)
return_url hidden 폼 전송 후Redirect URL
answerer_name text 폼 등록 권한이 '익명'일 경우 작성인 이름(권한이 회원 정용일 경우 필요 없음)
answerer_email text 폼 등록 권한이 '익명'일 경우 작성인 이름(권한이 회원 전용일 경우 필요 없음)
answer[1][label] hidden 폼의 1번 입력 항목 명
answer[1][value] all 폼의 1번 입력 항목에 대한 입력 값(checkbox의 경우 answer[1][value][])
answer[2][label] hidden 폼의 2번 입력 항목 명
answer[2][value] all 폼의 2번 입력 항목에 대한 입력 값(checkbox의 경우 answer[2][value][])
answer[n][label] hidden 폼의 1번 입력 항목 명
answer[n][value] all 폼의 n번 입력 항목에 대한 입력 값(checkbox의 경우 answer[n][value][])
checkbox 및 radio elements의 채크 여부 및 다중 체크는 Validation 문서를 참고하세요

HTML

테스트 웹 폼

이름을 입력하세요
이메일을 입력하세요
H:DEV+ 알게된 경로를 선택하세요
자주 사용하는 기능을 선택하세요 (최소 1개이사 3개까지)
가장 좋아하는 동물을 선택하세요
취소 
<main>
	<div class="row g-5">
		<div class="col-12">
			<div class="text-center">
				<h2 class="mt-5 mb-3">테스트 웹 폼</h2>
			</div>
			<form id="frm_web_form" data-validation-alert="no" data-complete-type="alert" data-complete-message="전송이 완료되었습니다.">
				<input type="hidden" name="form_key" value="c4ca4238a0b923820dcc509a6f75849b">
				<input type="hidden" name="return_url" value="/example/vue/web_form/completed.html">
				<div class="row">
					<div class="col-12 col-lg-12 mb-3">
						<label for="answerer_name" class="form-label">이름</label>
						<input type="text" class="form-control h-validation" id="answerer_name" name="answerer_name" data-validation="not-empty" placeholder="이름을 입력하세요 입력하세요">
						<small class="invalid-feedback"> 이름을 입력하세요 </small>
					</div>
					<div class="col-12 col-lg-12 mb-3">
						<label for="answerer_email" class="form-label">이메일</label>
						<input type="text" class="form-control h-validation" id="answerer_email" name="answerer_email" data-validation="email" placeholder="이메일을 입력하세요 입력하세요">
						<small class="invalid-feedback"> 이메일을 입력하세요 </small>
					</div>
					<div class="col-12 col-lg-12 mb-3">
						<label for="answer_1_value" class="form-label">H:DEV+ 알게된 경로</label>
						<input type="hidden" name="answer[1][label]" value="H:DEV+ 알게된 경로">
						<select name="answer[1][value]" id="answer_1_value" data-validation="not-empty" class="form-control">
							<option value="">선택</option>
							<option value="검색을 통해">검색을 통해</option>
							<option value="지인을 통해">지인을 통해</option>
							<option value="미디어 통해">미디어 통해</option>
							<option value="광고를 통해">광고를 통해</option>
						</select>
						<small class="invalid-feedback"> H:DEV+ 알게된 경로를 선택하세요 </small>
					</div>
					<div class="col-12 col-lg-12 mb-3">
						<label class="form-label">자주 사용하는 기능</label>
						<input type="hidden" name="answer[2][label]" class="form-control" value="자주 사용하는 기능">
						<div class="form-control" data-validation="check-limit" data-validation-limit="1-3">
							<label class="me-4">
								<input type="checkbox" class="form-check-input" name="answer[2][value][]" value="포펌"> 포럼 </label>
							<label class="me-4">
								<input type="checkbox" class="form-check-input" name="answer[2][value][]" value="회원"> 회원 </label>
							<label class="me-4">
								<input type="checkbox" class="form-check-input" name="answer[2][value][]" value="웹폼"> 웹폼 </label>
							<label class="me-4">
								<input type="checkbox" class="form-check-input" name="answer[2][value][]" value="기타"> 기타 </label>
						</div>
						<small class="invalid-feedback"> 자주 사용하는 기능을 선택하세요 (최소 1개이사 3개까지) </small>
					</div>
					<div class="col-12 col-lg-12 mb-3">
						<label class="form-label">가장 좋아하는 동물</label>
						<input type="hidden" name="answer[3][label]" value="가장 좋아하는 동물">
						<div class="form-control" data-validation="radio-check">
							<label class="me-4">
								<input type="radio" class="form-check-input" name="answer[3][value]" value="호랑이"> 호랑이 </label>
							<label class="me-4">
								<input type="radio" class="form-check-input" name="answer[3][value]" value="고양이"> 고양이 </label>
							<label class="me-4">
								<input type="radio" class="form-check-input" name="answer[3][value]" value="강아지"> 강아지 </label>
							<label class="me-4">
								<input type="radio" class="form-check-input" name="answer[3][value]" value="미꾸라지"> 미꾸라지 </label>
						</div>
						<small class="invalid-feedback"> 가장 좋아하는 동물을 선택하세요 </small>
					</div>
					<div class="col-12 col-lg-12 mb-3" style="overflow: auto;">
						<div class="my-4 text-center mb-5">
							<button type="submit" class="mx-1 btn btn-dark px-4">저장</button>
							<a href="./list.html" class="text-white mx-1 btn btn-dark px-4">취소</a>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</main>

Response After Submission

전송버튼 클릭시 입력한 폼을 전송하고 return_url로 이동합니다.

관련 링크