w3.css 움직이는 검색 양식 CSS를 사용하여 애니메이션 검색 양식을 만드는 방법을 알아보자. 애니메이션 검색 양식을 만드는 방법 1단계) HTML 추가 <input type=”text” name=”search” placeholder=”Search..”> 2단계) CSS 추가 input[type=text] {   width: 130px;   -webkit-transition: width 0.4s ease-in-out;   transition: width 0.4s ease-in-out; } /* When the input field gets focus, change its width to 100% */ input[type=text]:focus {   width: 100%; }

w3.css 텍스트를 클립보드에 복사 JavaScript를 사용하여 텍스트를 클립보드에 복사하는 방법을 알아보자. 텍스트를 클립보드에 복사 1단계) HTML 추가 <!– The text field –> <input type=”text” value=”Hello World” id=”myInput”> <!– The button used to copy the text –> <button onclick=”myFunction()”>Copy text</button> 2단계) JavaScript 추가 function myFunction() { // Get the text field var copyText = document.getElementById(“myInput”); // Select the text field copyText.select(); copyText.setSelectionRange(0, 99999); // For mobile devices // Copy the text inside the text field navigator.clipboard.writeText(copyText.value); // Alert the copied text…

w3.css 숫자 입력 칸에서 화살표 숨기기 CSS를 사용하여 숫자 입력 유형에서 화살표/스피너를 제거하는 방법을 알아보자. 화살표/스피너 제거 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; }

w3.css 입력 필드 지우기 포커스가 있는 입력 필드를 지우는 방법을 알아보자. 초점이 맞춰진 입력 필드 지우기 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <!– When the input field gets focus, replace its current value with an empty string –> <input type=”text” onfocus=”this.value=”” value=”Blabla”> 버튼으로 입력 필드 지우기 1단계) HTML 추가 <button onclick=”document.getElementById(‘myInput’).value = ””>Clear input field</button> <input type=”text” value=”Blabla” id=”myInput”>

w3.css 인라인 양식 CSS를 사용하여 반응형 인라인 양식을 만드는 방법을 알아보자. 인라인 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <form class=”form-inline” action=”/action_page.php”> <label for=”email”>Email:</label> <input type=”email” id=”email” placeholder=”Enter email” name=”email”> <label for=”pwd”>Password:</label> <input type=”password” id=”pwd” placeholder=”Enter password” name=”pswd”> <label> <input type=”checkbox” name=”remember”> Remember me </label> <button type=”submit”>Submit</button> </form> 2단계) CSS 추가 /* Style the form – display items horizontally */ .form-inline { display: flex; flex-flow: row wrap; align-items: center; } /* Add some margins for each…

w3.css 팝업 폼 CSS와 JavaScript를 사용하여 팝업 양식을 만드는 방법을 알아보자. 팝업 폼을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <!– A button to open the popup form –> <button class=”open-button” onclick=”openForm()”>Open Form</button> <!– The form –> <div class=”form-popup” id=”myForm”> <form action=”/action_page.php” class=”form-container”> <h1>Login</h1> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” required> <button type=”submit” class=”btn”>Login</button> <button type=”button” class=”btn cancel” onclick=”closeForm()”>Close</button> </form> </div> 2단계) CSS 추가 {box-sizing: border-box;} /* Button…

w3.css 반응형 양식 CSS를 사용하여 반응형 양식을 만드는 방법을 알아보자. 반응형 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 각 필드에 대해 입력(일치하는 레이블 포함)을 추가하고 CSS로 지정된 너비를 설정하기 위해 각 레이블과 입력 주위에 <div> 요소를 감싼다. <div class=”container”> <form action=”action_page.php”> <div class=”row”> <div class=”col-25″> <label for=”fname”>First Name</label> </div> <div class=”col-75″> <input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”> </div> </div> <div class=”row”> <div class=”col-25″> <label for=”lname”>Last Name</label> </div> <div class=”col-75″> <input type=”text” id=”lname” name=”lastname” placeholder=”Your last name..”>…

w3.css 스택형 폼 CSS를 사용하여 쌓인 양식을 만드는 방법을 알아보자. 스택 폼을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 각 필드에 맞는 입력(일치하는 라벨 포함)을 추가한다. <form action=”/action_page.php”> <label for=”fname”>First Name</label> <input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”> <label for=”lname”>Last Name</label> <input type=”text” id=”lname” name=”lastname” placeholder=”Your last name..”> <label for=”country”>Country</label> <select id=”country” name=”country”> <option value=”australia”>Australia</option> <option value=”canada”>Canada</option> <option value=”usa”>USA</option> </select> <input type=”submit” value=”Submit”> </form> 2단계) CSS 추가 /* Style inputs */ input[type=text], select { width: 100%; padding: 12px…

w3.css 이메일 뉴스레터 CSS로 이메일 뉴스레터를 만드는 방법을 알아보자. 뉴스레터 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 대한 입력을 추가하고 “submit” 버튼도 추가한다. <form action=”action_page.php”> <div class=”container”> <h2>Subscribe to our Newsletter</h2> <p>Lorem ipsum..</p> </div> <div class=”container” style=”background-color:white”> <input type=”text” placeholder=”Name” name=”name” required> <input type=”text” placeholder=”Email address” name=”mail” required> <label> <input type=”checkbox” checked=”checked” name=”subscribe”> Daily Newsletter </label> </div> <div class=”container”> <input type=”submit” value=”Subscribe”> </div> </form> 2단계) CSS 추가 /* Style the form element with…

w3.css 아이콘이 있는 양식 아이콘을 사용하여 양식을 만드는 방법을 알아보자. 아이콘 폼을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 대한 입력을 추가한다. <form action=”/action_page.php”> <h2>Register Form</h2> <div class=”input-container”> <i class=”fa fa-user icon”></i> <input class=”input-field” type=”text” placeholder=”Username” name=”usrnm”> </div> <div class=”input-container”> <i class=”fa fa-envelope icon”></i> <input class=”input-field” type=”text” placeholder=”Email” name=”email”> </div> <div class=”input-container”> <i class=”fa fa-key icon”></i> <input class=”input-field” type=”password” placeholder=”Password” name=”psw”> </div> <button type=”submit” class=”btn”>Register</button> </form> 2단계) CSS 추가 * {box-sizing: border-box;} /*…