Option 한번에 입력하기
Form and Table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>온라인 수강신청</title>
</head>
<body class="col-8">
<section>
<h2>온라인 수강신청</h2>
</section>
<section>
<h4 style="text-align: justify">온라인 수강신청</h4>
<form action="login.html" method="post" id="frm">
<table class="table">
<tr>
<th>교육형태</th>
<td>
<select name="eduStyle" id="eduStyle">
<option value="11">교육과정선택</option>
<option value="22">취업연수과정</option>
<option value="33">직무향상 단기과정</option>
</select>
</td>
</tr>
<tr>
<th>수강과정</th>
<td>
<select name="eduCourse" id="eduCourse">
<option value="0">수강과정선택</option>
<option value="1">빅데이터, 클라우드</option>
<option value="2">웹퍼블리싱</option>
</select>
</td>
</tr>
<tr>
<th>교육일정</th>
<td>
<input type="date" />
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input
id="name"
type="text"
name="name"
placeholder="이름을 입력해주세요"
/>
</td>
</tr>
<tr>
<th>연락처</th>
<td>
<input
id="phone"
type="text"
name="phone"
placeholder="연락처를 입력해주세요"
/>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input
type="email"
name="email"
placeholder="이메일을 입력해주세요"
/>
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type="text" name="zipcd" placeholder="우편번호" />
<button type="button" class="btn btn-secondary" onclick="post();">
우편번호
</button>
<br />
<input type="text" name="addr1" placeholder="거주지 주소" />
<br />
<input type="text" name="addr2" placeholder="나머지 주소" />
</td>
</tr>
<tr>
<th>생년월일</th>
<td>
<input type="text" name="birthday" placeholder="생년월일 입력" />
<span style="color: gray">ex) 19981212</span>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<label for="male">남자</label
><input type="radio" name="gender" value="male" id="male" />
<label for="female">여자</label
><input type="radio" name="gender" value="female" id="female" />
</td>
</tr>
<tr>
<th>최종학력</th>
<td>
고등학교<input
type="radio"
name="education"
value="1"
id="edu1"
/>
대학2/3년제<input
type="radio"
name="education"
value="2"
id="edu2"
/>
대학4/5년제<input
type="radio"
name="education"
value="3"
id="edu3"
/>
석박사<input type="radio" name="education" value="4" id="edu4" />
기타<input type="radio" name="education" value="5" id="edu5" />
</td>
</tr>
<tr>
<th>학과(전공)</th>
<td>
<input type="text" name="major" placeholder="전공 입력" />
</td>
</tr>
<tr>
<th>직업, 고용형태</th>
<td>
<!-- prettier-ignore -->
구직자<input type="radio" name="job" value="1" id="job1" />
재직자<input type="radio" name="job" value="2" id="job2" />
대학원<input type="radio" name="job" value="3" id="job3" />
사업자<input type="radio" name="job" value="4" id="job4" />
기타<input type="radio" name="card" value="5" id="job5" />
</td>
</tr>
<tr>
<th>내일배움카드</th>
<td>
<!-- prettier-ignore -->
신청전<input type="radio" name="card" value="1" id="card1" />
발급중<input type="radio" name="card" value="2" id="card2" />
발급완<input type="radio" name="card" value="3" id="card3" />
기타<input type="radio" name="card" value="4" id="card4" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="btn btn-primary" value="보내기" />
<input type="reset" class="btn btn-danger" value="취소" />
</td>
</tr>
</table>
</form>
</section>
</body>
<script src="./script.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</html>
#script.js
a = document.querySelector("body");
a.style.margin = "0 auto";
a.style.textAlign = "center";
a.style.maxWidth = "1000px";
b = document.getElementsByTagName("th");
for (let i = 0; i < b.length; i++) {
b[i].style.backgroundColor = "lightgray";
b[i].style.width = "30%";
b[i].style.verticalAlign = "middle";
}
document.querySelector("#frm").addEventListener("submit", function (event) {
let nameVal = document.getElementById("name");
let phoneVal = document.getElementById("phone");
if (nameVal.value == "" || phoneVal.value == "") {
alert("필수 입력란 중 입력 안 한 부분 존재");
event.preventDefault();
}
});
function post() {
new daum.Postcode({
oncomplete: function (data) {
$("input[name=zipcd]").val(data.zonecode); // 우편번호(5자리)
$("input[name=addr1]").val(data.address); // 기본주소
$("input[name=addr2]").val(data.buildingName); // 건물명
},
}).open();
}
Label 태그
- label 태그는 input 태그를 도와주는 역할입니다. input 태그가 디자인 하기 힘들 때 label 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있습니다.
for 있게
<label for="yoneeki">yoneeki</label>
<input type="checkbox" id="yoneeki">for 없게
<label>yoneeki<input type="checkbox"></label>- label로 input 다 묶고 id도 없앰
유효성 검사
Working Abroad ...