20

Những gì chúng ta biết quan trọng nhưng chúng ta là ai còn quan trọng hơn.

- Brené Brown

Giới thiệu

Hôm nay chúng ta sẽ xây dựng một biểu mẫu đăng ký đơn giản. Yêu cầu đối với hướng dẫn này chỉ là kiến ​​thức cơ bản về Html và  CSS cũng như  trình soạn thảo mã.

Bản xem trước về những gì chúng tôi sẽ xây dựng

Biểu mẫu đăng ký với HTML và CSS # 1

thiết kế biểu mẫu hoàn chỉnh

Hãy để chúng tôi bắt đầu.

Cấu trúc mã

Đầu tiên, trong trình soạn thảo mã của chúng tôi, chúng tôi sẽ tạo một thư mục mới. Chúng ta có thể gọi là dạng thư mục Bên trong thư mục đó, chúng tôi sẽ tạo hai tệp. Các index.html style.css .

HTML

Trong tệp index.html, chúng ta sẽ có cấu trúc xương trần tương tự như những gì được hiển thị bên dưới:

<!DOCTYPE html> 
 <html lang="en"> 
 <head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 <title>Registration Form With Html & Css</title>  
 <link rel="stylesheet" href="style.css">  
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> 
  <body> 
  </body> 
</html>


Tiếp theo, tôi sẽ thêm các thẻ vào trang HTML.

<!DOCTYPE html> 
  <html lang="en"> 
    <head>  
      <meta charset="UTF-8">  
      <meta name="viewport" content="width=device-width, initial-scale=1.0">                <title>Registration Form With Html & Css</title>  
      <link rel="stylesheet" href="style.css">  
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head>
    <body> 
		<div>   
          <form>    
            <h4 class="text-warning text-center pt-5">Registration Page</h4>  
            
            <label>     
              <input type="text" class="input" name="email" placeholder="EMAIL">        			<div class="line-box">          
              <div class="line"></div>        
              </div>    
            </label>     
            
            <label>     
              <input type="text" class="input" name="username" placeholder="USERNAME">        
              <div class="line-box">         
                <div class="line"></div>        
              </div>    
            </label>     
            
            <label>     
              <input type="password" class="input" name="password" placeholder="PASSWORD">        
              <div class="line-box">          
                <div class="line"></div>        
              </div>    
            </label>     
            
            <label>     
              <input type="password" class="input" name="confirm" placeholder="CONFIRM PASSWORD">      
              <div class="line-box">        
                <div class="line"></div>      
              </div>    
            </label>     
            
            <button type="submit">submit</button>  
          </form> 
      </div> 
    </body> 
</html>


Từ đoạn mã trên, chúng tôi đã bắt đầu bằng cách thêm thẻ biểu mẫu. Trong thẻ biểu mẫu, có bốn thẻ nhãn và một thẻ nút. Mỗi thẻ đầu vào được bao bọc trong một nhãn.

Các nhãn này rất quan trọng vì chúng cho người dùng biết thông tin cần cung cấp trong phần tử biểu mẫu.

Đây là tất cả những gì chúng ta cần cho mã Html và biểu mẫu của chúng ta sẽ trông giống như sau:

Biểu mẫu đăng ký với HTML và CSS # 1

Xem trước HTML


Vâng, đó là xấu. Đã đến lúc cho một số CSS!

CSS

Chúng tôi bắt đầu trong tệp style.css bằng cách thêm màu vào nền của trang và cũng tạo kiểu cho thẻ biểu mẫu:

body {  
  background: #C5E1A5; 
}

 form {  
   width: 30%;  
   margin: 60px auto;  
   background: #efefef;  
   padding: 60px 120px 80px 120px;  
   text-align: center;  
   -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1); 
   box-shadow: 2px 2px 3px rgba(0,0,0,0.1); 
}


Kết quả:

Biểu mẫu đăng ký với HTML và CSS # 1

bản xem trước CSS đầu tiên

Hơn nữa, chúng ta cần tạo kiểu cho các nhãn và đầu vào. Đối với nhãn chúng tôi sẽ thêm khoảng cách giữa các chữ cái, màu sắc, lề, khoảng đệm  và hướng vị trí cho nhãn và các văn bản sẽ ở trong đó.

label {  
  display: block;  
  position: relative;  
  margin: 40px 0px; 
}

 .label-txt {  
   position: absolute;  
   top: -1.6em;  
   padding: 10px;  
   font-family: sans-serif;  
   font-size: .8em;  
   letter-spacing: 1px;  
   color: rgb(120,120,120);  
   transition: ease .3s; 
}
 .input {  
   width: 100%;  
   padding: 10px;  
   background: transparent;  
   border: none;  
   outline: none; 
}

Kết quả:

Biểu mẫu đăng ký với HTML và CSS # 1

bản xem trước css thứ hai

Cuối cùng, chúng ta sẽ tạo kiểu đường cho trường nhập và nút.

Để có được hiệu ứng dòng, chúng ta cần đặt chiều cao trong lớp .line-box . Điều này sẽ làm cho dòng hiển thị. Ngoài ra, chúng tôi sẽ thêm một số hiệu ứng chuyển tiếp khi trường đầu vào đang hoạt động.

Thiết kế cho lớp nút là thẳng về phía trước, Chúng tôi đã thêm màu di chuột , màu nền , phần đệmđường viền - bán kính . Chúng tôi cũng đặt màn hình thành khối nội tuyến,  điều này cho phép chúng tôi đặt phần đệm ở bên cạnh nút.

.line-box {  
  position: relative;  
  width: 100%;  
  height: 2px;  
  background: #BCBCBC; 
}

 .line {  
   position: absolute;  
   width: 0%;  
   height: 2px;  
   top: 0px;  
   left: 50%;  
   transform: translateX(-50%);  
   background: #8BC34A;  
   transition: ease .6s; 
}  

 .input:focus + .line-box .line {  
   width: 100%; 
}

 .label-active {  
   top: -3em; 
}

 button {  
   display: inline-block; 
   padding: 12px 24px;  
   background: rgb(220,220,220);  
   font-weight: bold;  
   color: rgb(120,120,120);  
   border: none;  outline: none;  
   border-radius: 3px;  
   cursor: pointer;  
   transition: ease .3s; 
}  

 button:hover {  
   background: #8BC34A;  
   color: #ffffff; 
}


Kết quả cuối cùng:

Biểu mẫu đăng ký với HTML và CSS # 1

xem cuối cùng

Phần kết luận

Tôi biết đây là một hướng dẫn rất cơ bản, nhưng tôi hy vọng bạn có thể học được một hoặc hai điều từ nó.

Đây là liên kết đến repo trên Github .

Hỗ trợ tôi bằng cách đăng ký nhận bản tin của tôi tại đây .

|