Làm cách nào để nhập thông tin đăng nhập bằng html?

Tạo kiểu trang đăng nhập bằng CSS

Chúng ta sẽ tạo một style sheet riêng cho trang đăng nhập. Vì vậy, chúng ta cần liên kết biểu định kiểu mới này với trang đăng nhập HTML. Liên kết có thể được thêm vào bên trong thẻ

Đây là một ảnh chụp màn hình được cung cấp để tham khảo

  

Hãy lấy nền có độ dốc tuyến tính cho toàn bộ trang đăng nhập. Đây là một liên kết đến một trang khác nếu bạn muốn tìm hiểu thêm về nó
body 
{
  font-family:Arial; 
  background: -webkit-linear-gradient[to right, #155799, #159957]; 
  background: linear-gradient[to right, #155799, #159957]; 
  color:whitesmoke;
}
đầu ra
Chúng tôi cũng muốn biểu mẫu chỉ bao gồm 35 đơn vị tương đối của phần tử gốc của nó. Ngoài ra, nó nên được đặt ở giữa theo chiều ngang, có thể được thực hiện với lề. Tự động;
Vì chúng tôi đã sử dụng hai thẻ [cho tên người dùng và mật khẩu], chúng tôi có thể tạo kiểu cho chúng như sau
________số 8
kích thước hộp đã được đặt thành hộp viền vì chúng tôi cần hạn chế chiều rộng của đầu vào bên trong tổng chiều rộng của vùng chứa biểu mẫu
Bây giờ hãy tạo kiểu cho nút theo trang. Bạn có thể chọn màu nền của riêng bạn và màu của văn bản. Ngoài ra, khi di chuột vào nút, độ mờ [độ trong suốt] của nút sẽ được đặt thành 0. 6 và con trỏ chuột sẽ được hiển thị dưới dạng con trỏ
button {
    background-color: #030804;
    color: white;
    padding: 14px 20px;
    border-radius: 5px;
    margin: 7px 0;
    width: 100%;
    font-size: 18px;
  }

button:hover {
    opacity: 0.6;
    cursor: pointer;
  }
Cho đến nay, đây là mã CSS của chúng tôi [cùng với kiểu dáng của nút]



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        
0
đầu ra
Hãy cung cấp cho các hình thức một cái nhìn mờ tốt

  




    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        
0
đầu ra
Không phải các phần tử bên trong biểu mẫu có một khoảng trống nhỏ giữa chúng và các đầu cực của biểu mẫu sao? 



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        
1
đầu ra
Đối với vùng chứa phụ, chúng tôi cần hiển thị. uốn cong; . hàng ngang;]. Để căn giữa chúng theo chiều dọc, hãy căn chỉnh các mục. trung tâm; . không gian giữa; 



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        

  



        
        

           
        

        
2
đầu ra
Bạn có thể sử dụng đoạn mã sau cho các liên kết kiểu dáng



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        
3
đầu ra
Để làm cho trang phản hồi nhanh, chúng tôi cần sử dụng các truy vấn phương tiện giúp trang thích ứng theo độ phân giải màn hình. Điều này làm cho trang hữu ích cho không chỉ máy tính để bàn mà cả điện thoại di động. Chúng tôi chỉ muốn biểu mẫu thu nhỏ theo chiều ngang với chiều rộng màn hình giảm dần



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        
4
Vì vậy, chúng tôi hiện đang ở giai đoạn cuối cùng của mã cho trang đăng nhập. Ngoài ra, hãy cung cấp thêm một chút phần đệm cho vùng chứa chính
 

			
Làm cách nào để thêm nút đăng nhập trong HTML?
			
Có thể thêm liên kết vào bên trong thẻ  . 
 
 
cơ thể {họ phông chữ. Arial; . -webkit-tuyến tính-gradient[sang phải, #155799, #159957]; . linear-gradient[sang phải, #155799, #159957]; . khói trắng; 
 
		
			
Làm cách nào để tạo xác thực đăng nhập trong HTML?
			
Đối với mỗi người dùng và mật khẩu bạn có, bạn tính trước hàm băm SHA256 của chuỗi "người dùng + mật khẩu". Giả sử bạn muốn tên người dùng của mình là "Pedro" và mật khẩu cho tài khoản này là "MyPassword". Băm này là những gì bạn đưa vào mã Javascript của mình
		
			
Làm cách nào để tạo trang đăng nhập quản trị viên trong HTML?
			
CHÈN VÀO `adminlogin` [`id`, `tên người dùng`, `mật khẩu`] GIÁ TRỊ [NULL, 'admin', 'admin'], [NULL, 'admin2', 'admin2']; Ứng dụng > TextEdit.  .  
 
Bước 2. Viết một số HTML. Viết hoặc sao chép mã HTML sau vào Notepad.  .  
 
Bước 3. Lưu trang HTML. Lưu tệp trên máy tính của bạn.  .  
 
Bước 4. Xem trang HTML trong trình duyệt của bạn