-
HTML파일에서 외부 CSS, JS파일 불러오기웹 Web/HTML & CSS & Javascript 2023. 2. 3. 14:17
FormJs.js
function idCheck() { let userId = document.getElementById("userId").value; if(userId == '') { let idCheckMsg = document.getElementById("idCheckMsg"); idCheckMsg.innerHTML = 'ID는 반드시 입력해야 합니다.'; } } function pwCheck(){ let pw1 = document.getElementById("pw1"); let pw2 = document.getElementById("pw2"); if(pw1.value != pw2.value) { let pwCheckMsg = document.getElementById("pwCheckMsg"); pw1.value = ""; pw2.value = ""; pwCheckMsg.innerHTML = '비밀번호가 일치하지 않습니다.'; } else { pwCheckMsg.innerHTML = ''; } } function checkCount() { // 배열 리턴 let langs = document.getElementsByClassName("lang"); let count = 0; for (let i = 0; i < langs.length; i++) { if(langs[i].checked) { count++; } } if (count < 2) { let langCntMsg = document.getElementById("langCntMsg"); langCntMsg.innerHTML = '2개 이상 선택하세요.'; } else { langCntMsg.innerHTML = ''; } } function selectedIde() { let ides = document.getElementsByName("ide"); for (let i = 0; i < ides.length; i++) { if(ides[i].checked) { alert(ides[i].value); } } } function selectedRole() { let role = document.getElementById("role"); alert(role.value); } function selectedPCount(element) { alert(element); }FormCss.css
@charset "UTF-8"; table{ border: solid 1px; border-collapse: collapse; } th{ background-color: skyblue; text-align: right; } #btn{ background-color: skyblue; text-align: center; } #btn_submit{ margin: 10px; } #idCheckMsg, #pwCheckMsg, #langCntMsg{ color: red; font-weight: bold; font-size: 12px; }Form.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Form Elements</title> <!-- css파일 로드 방법1 --> <style> @import url("../css/FormCss.css"); </style> <!-- css파일 로드 방법2 --> <link rel="stylesheet" type="text/css" href="../css/FormCss.css"> <!-- js파일 로드 --> <script src="../js/FormJs.js"></script> </head> <body> <!-- 3x2 테이블에 폼 요소 넣기 --> <h2>Table에 Form 넣기</h2> <form action=""> <table border=1> <tr> <th>ID </th> <td> <input type="text" id="userId"> <input type="button" value="id체크" onclick="idCheck()"> <span id="idCheckMsg"></span> </td> </tr> <tr> <th>비밀번호 </th> <td> <input type="password" id="pw1"> </td> </tr> <tr> <th>비밀번호 확인</th> <td> <input type="password" id="pw2"> <input type="button" value="비밀번호 체크" onclick="pwCheck()"> <span id="pwCheckMsg"></span> </td> </tr> <tr> <th>사용언어</th> <td> <input type="checkbox" class="lang" onclick="checkCount()" value="java">java <input type="checkbox" class="lang" onclick="checkCount()" value="python">python <input type="checkbox" class="lang" onclick="checkCount()" value="javascript">javascript <input type="checkbox" class="lang" onclick="checkCount()" value="html">html <span id="langCntMsg"></span> </td> </tr> <tr> <th>사용IDE</th> <td> <input type="radio" name="ide" onclick="selectedIde()" value="Eclipse">Eclipse <input type="radio" name="ide" onclick="selectedIde()" value="IntelliJ">IntelliJ <input type="radio" name="ide" onclick="selectedIde()" value="Visual Studio">Visual Studio <input type="radio" name="ide" onclick="selectedIde()" value="VS Code">VS Code </td> </tr> <tr> <th>Role</th> <td> <select id="role"> <option>--- 역할 --- <option value="디자이너">디자이너 <option value="프로그래머">프로그래머 <option value="설계">설계 <option value="개발자">개발자 <option value="퍼블리셔">퍼블리셔 </select> <input type="button" value="선택한 역할 확인" onclick="selectedRole()"> </td> </tr> <tr> <th>프로젝트 참여 횟수</th> <td> <select id="pCount" onchange="selectedPCount(this.value)"> <option>--- 횟수 --- <option value="0회">0회 <option value="1회">1회 <option value="2회">2회 <option value="3회">3회 <option value="4회 이상">4회 이상 </select> </td> </tr> <tr> <th>자기소개</th> <td><textarea cols="30" rows="5">자기소개를 입력하세요</textarea></td> </tr> <tr> <td id="btn" colspan="2"> <input type="reset" value="새로고침"> <input type="submit" id="btn_submit" value="제출"> </td> </tr> </table> </form> </body> </html>'웹 Web > HTML & CSS & Javascript' 카테고리의 다른 글
[Ajax] 비동기 처리 - call back 함수 (0) 2023.03.20 연도와 월 입력하여 달력 출력하기 (0) 2023.02.07 DOM, Document (0) 2023.02.02 기초 코드3 - form태그 (0) 2022.01.12 기초 코드2 - 이미지, 링크 (0) 2022.01.12