w3.css 여러 단계로 구성된 양식 여러 단계로 구성된 양식을 만드는 방법을 알아보자. 여러 단계로 구성된 양식을 만드는 방법 1단계) HTML 추가 <form id=”regForm” action=””> <h1>Register:</h1> <!– One “tab” for each step in the form: –> <div class=”tab”>Name: <p><input placeholder=”First name…” oninput=”this.className = ””></p> <p><input placeholder=”Last name…” oninput=”this.className = ””></p> </div> <div class=”tab”>Contact Info: <p><input placeholder=”E-mail…” oninput=”this.className = ””></p> <p><input placeholder=”Phone…” oninput=”this.className = ””></p> </div> <div class=”tab”>Birthday: <p><input placeholder=”dd” oninput=”this.className = ””></p> <p><input placeholder=”mm” oninput=”this.className = ””></p> <p><input placeholder=”yyyy” oninput=”this.className =…

w3.css 비밀번호 표시 전환 JavaScript를 사용하여 비밀번호 표시 여부를 전환한다. 비밀번호 표시 전환 1단계) HTML 추가 <!– Password field –> Password: <input type=”password” value=”FakePSW” id=”myInput”> <!– An element to toggle between password visibility –> <input type=”checkbox” onclick=”myFunction()”>Show Password 2단계) JavaScript 추가 function myFunction() { var x = document.getElementById(“myInput”); if (x.type === “password”) { x.type = “text”; } else { x.type = “password”; } }

w3.css 비밀번호 검증 CSS와 JavaScript를 사용하여 비밀번호 검증 양식을 만드는 방법을 알아보자. 비밀번호 검증 양식 만들기 1단계) HTML 추가 <div class=”container”> <form action=”/action_page.php”> <label for=”usrname”>Username</label> <input type=”text” id=”usrname” name=”usrname” required> <label for=”psw”>Password</label> < input type=”password” id=”psw” name=”psw” pattern=”(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}” title=”Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters” required> <input type=”submit” value=”Submit”> </form> </div> <div id=”message”> <h3>Password must contain the following:</h3> <p id=”letter” class=”invalid”>A <b>lowercase</b> letter</p> <p id=”capital” class=”invalid”>A <b>capital (uppercase)</b>…

w3.css Enter를 눌러 트리거 버튼을 클릭 JavaScript를 사용하여 키보드의 “enter” 버튼을 클릭하도록 한다. Enter 버튼을 클릭하여 트리거 1단계) HTML 추가 // Get the input field var input = document.getElementById(“myInput”); // Execute a function when the user presses a key on the keyboard input.addEventListener(“keypress”, function(event) { // If the user presses the “Enter” key on the keyboard if (event.key === “Enter”) { // Cancel the default action, if needed event.preventDefault(); // Trigger the button element with a click document.getElementById(“myBtn”).click(); } });

w3.css Caps Lock 감지 JavaScript를 사용하여 입력 필드 내부에 Capslock이 켜져 있는지 확인하는 방법을 알아보자. Caps Lock이 켜져 있는지 감지 1단계) HTML 추가 // Get the input field var input = document.getElementById(“myInput”); // Get the warning text var text = document.getElementById(“text”); // When the user presses any key on the keyboard, run the function input.addEventListener(“keyup”, function(event) { // If “caps lock” is pressed, display the warning text if (event.getModifierState(“CapsLock”)) { text.style.display = “block”; } else { text.style.display = “none” }…

w3.css 체크박스가 체크되면 텍스트 표시 체크박스가 체크되면 일부 텍스트를 표시한다. JavaScript로 체크박스가 체크되어 있는지 확인한다. 체크박스가 체크되어 있는지 확인하기 1단계) HTML 추가 Checkbox: <input type=”checkbox” id=”myCheck” onclick=”myFunction()”> <p id=”text” style=”display:none”>Checkbox is CHECKED!</p> 2단계) JavaScript 추가 function myFunction() { // Get the checkbox var checkBox = document.getElementById(“myCheck”); // Get the output text var text = document.getElementById(“text”); // If the checkbox is checked, display the output text if (checkBox.checked == true){ text.style.display = “block”; } else { text.style.display = “none”; } }

w3.css 토글 스위치 CSS를 사용하여 “토글 스위치”(켜기/끄기 버튼)를 만드는 방법을 알아보자. 사용자 정의 선택 메뉴 만들기 1단계) HTML 추가 <!– Rectangular switch –> <label class=”switch”> <input type=”checkbox”> <span class=”slider”></span> </label> <!– Rounded switch –> <label class=”switch”> <input type=”checkbox”> <span class=”slider round”></span> </label> 2단계) CSS 추가 /* The switch – the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height:…

w3.css 사용자 정의 선택 상자 CSS와 JavaScript를 사용하여 사용자 정의 선택 상자를 만드는 방법을 알아보자. 사용자 정의 선택 메뉴 만들기 1단계) HTML 추가 <!– Surround the select box within a “custom-select” DIV element. Remember to set the width: –> <div class=”custom-select” style=”width:200px;”> <select> <option value=”0″>Select car:</option> <option value=”1″>Audi</option> <option value=”2″>BMW</option> <option value=”3″>Citroen</option> <option value=”4″>Ford</option> <option value=”5″>Honda</option> <option value=”6″>Jaguar</option> <option value=”7″>Land Rover</option> <option value=”8″>Mercedes</option> <option value=”9″>Mini</option> <option value=”10″>Nissan</option> <option value=”11″>Toyota</option> <option value=”12″>Volvo</option> </select> </div> 2단계) CSS 추가 /* The container must…

w3.css 사용자 정의 체크박스 CSS를 사용하여 사용자 정의 체크박스와 라디오 버튼을 만드는 방법을 알아보자. 사용자 정의 체크박스를 만드는 방법 1단계) HTML 추가 <label class=”container”>One <input type=”checkbox” checked=”checked”> <span class=”checkmark”></span> </label> <label class=”container”>Two <input type=”checkbox”> <span class=”checkmark”></span> </label> <label class=”container”>Three <input type=”checkbox”> <span class=”checkmark”></span> </label> <label class=”container”>Four <input type=”checkbox”> <span class=”checkmark”></span> </label> 2단계) CSS 추가 /* Customize the label (the container) */ .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select:…

w3.css 로그인 양식을 포함한 탐색 메뉴 로그인 양식을 포함한 반응형 탐색 메뉴를 만드는 방법을 알아보자. Navbar에 로그인 폼을 추가하는 방법 1단계) HTML 추가 <div class=”topnav”> <a class=”active” href=”#home”>Home</a> <a href=”#about”>About</a> <a href=”#contact”>Contact</a> <div class=”login-container”> <form action=”/action_page.php”> <input type=”text” placeholder=”Username” name=”username”> <input type=”text” placeholder=”Password” name=”psw”> <button type=”submit”>Login</button> </form> </div> </div> 2단계) CSS 추가 * {box-sizing: border-box;} /* Style the navbar */ .topnav { overflow: hidden; background-color: #e9e9e9; } /* Navbar links */ .topnav a { float: left; display: block; color: black;…