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;} /*…

w3.css 가입 양식 CSS를 사용하여 가입 양식을 만드는 방법을 알아보자. 가입 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 대해 입력(일치하는 레이블 포함)을 추가한다. <form action=”action_page.php”> <div class=”container”> <h1>Register</h1> <p>Please fill in this form to create an account.</p> <hr> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” id=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” id=”psw” required> <label for=”psw-repeat”><b>Repeat Password</b></label> <input type=”password” placeholder=”Repeat Password” name=”psw-repeat” id=”psw-repeat” required> <hr> <p>By creating an account you…

w3.css 소셜 로그인 양식 CSS를 사용하여 소셜 미디어 로그인 양식을 만드는 방법을 알아보자. 소셜 로그인 폼을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 입력이나 소셜 미디어 링크를 추가한다. <div class=”container”> <form action=”/action_page.php”> <div class=”row”> <h2 style=”text-align:center”>Login with Social Media or Manually</h2> <div class=”vl”> <span class=”vl-innertext”>or</span> </div> <div class=”col”> <a href=”#” class=”fb btn”> <i class=”fa fa-facebook fa-fw”></i> Login with Facebook </a> <a href=”#” class=”twitter btn”> <i class=”fa fa-twitter fa-fw”></i> Login with Twitter </a> <a…

w3.css 문의 양식 CSS를 사용하여 연락처 양식을 만드는 방법을 알아보자. 연락처 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <div class=”container”> <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> <label for=”subject”>Subject</label> <textarea id=”subject” name=”subject” placeholder=”Write something..” style=”height:200px”></textarea> <input type=”submit” value=”Submit”> </form> </div> 2단계) CSS 추가 /* Style inputs with type=”text”, select elements…

w3.css 결제 양식 CSS를 사용하여 반응형 결제 양식을 만드는 방법을 알아보자. 체크아웃 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <div class=”row”> <div class=”col-75″> <div class=”container”> <form action=”/action_page.php”> <div class=”row”> <div class=”col-50″> <h3>Billing Address</h3> <label for=”fname”><i class=”fa fa-user”></i> Full Name</label> <input type=”text” id=”fname” name=”firstname” placeholder=”John M. Doe”> <label for=”email”><i class=”fa fa-envelope”></i> Email</label> <input type=”text” id=”email” name=”email” placeholder=”john@example.com”> <label for=”adr”><i class=”fa fa-address-card-o”></i> Address</label> <input type=”text” id=”adr” name=”address” placeholder=”542 W. 15th Street”> <label for=”city”><i class=”fa fa-institution”></i> City</label> <input type=”text”…

w3.css 가입 양식 CSS를 사용하여 반응형 가입 양식을 만드는 방법을 알아보자. 가입 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 대해 입력(일치하는 레이블 포함)을 추가한다. <form action=”action_page.php” style=”border:1px solid #ccc”> <div class=”container”> <h1>Sign Up</h1> <p>Please fill in this form to create an account.</p> <hr> <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> <label for=”psw-repeat”><b>Repeat Password</b></label> <input type=”password” placeholder=”Repeat Password” name=”psw-repeat” required> <label> <input type=”checkbox” checked=”checked”…