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

Trang đăng nhập sử dụng HTML và CSS để cấu trúc và tạo kiểu. Trước tiên, chúng ta sẽ tạo cấu trúc đơn giản bằng HTML và sau đó di chuyển để làm cho nó trông đẹp mắt bằng CSS. Đây là kết quả cuối cùng của chúng ta sẽ như thế nào

Lúc đầu, chúng tôi sẽ chuyển qua mã HTML cho trang đăng nhập và sau đó chuyển sang CSS để giao diện đẹp hơn

Tạo cấu trúc trang đăng nhập bằng HTML

Về cơ bản, chúng ta sẽ sử dụng

Bạn cũng có thể cung cấp các hoạt động phía máy chủ với thuộc tính hành động, nhưng điều này nằm ngoài phạm vi thảo luận của chúng ta. Bạn có thể tìm hiểu thêm về các biểu mẫu tại đây

Hãy bắt đầu với việc viết cấu trúc HTML cơ bản ngay từ đầu

    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
    


đầu ra
Như đã đề cập, chúng tôi đang thiết kế trang đăng nhập mà không có bất kỳ thao tác nào phía máy chủ, vì vậy thuộc tính hành động sẽ được để trống. Theo sau nó sẽ là vùng chứa thu thập và cho phép người dùng gửi tên người dùng và mật khẩu của họ. Bộ chứa biểu mẫu sẽ được tạo kiểu sau, nhưng cấu trúc ban đầu sẽ được cung cấp trước
sẽ có hai
phần tử; . 



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

           
        

        
6
đầu ra
Mặc dù các vùng chứa div không hiển thị nhưng bạn sẽ sớm nhận thấy các thay đổi sau khi chúng tôi thêm các trường nhập liệu vào biểu mẫu
Bên trong thùng chứa chính, các thẻ sẽ được sử dụng để xác định đầu vào cho người dùng. Trong trường hợp của chúng tôi, chúng tôi cần các loại đầu vào như văn bản (cho tên người dùng) và mật khẩu. Để xác định các trường nhập này, chúng tôi sẽ sử dụng thẻ nhưng đảm bảo rằng thẻ chứa cùng tên với thuộc tính tên của thẻ của nó. Đó là bởi vì bất kỳ điều khiển biểu mẫu nào (các trường nhập liệu) chỉ có thể được liên kết với một phần tử. Điều quan trọng là cung cấp cùng một tên để liên kết các phần tử và với nhau



Đối với tên người dùng, loại đầu vào là văn bản và chúng tôi sẽ đặt vì người dùng phải đặt tên người dùng và mật khẩu của họ



    
    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

            
            Your username
            
            

            



            
            Your password
            

            

        

    


đầu ra
Bây giờ, hãy thêm nút gửi và liên kết để đăng ký (nếu người dùng không phải là thành viên). Liên kết đăng ký sẽ được đặt vì hiện tại chúng tôi không có trang đăng ký



    
    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

            
            Your username
            

            



            
            Your password
            

            


            
             Login

            
            
Not a member?  Register here!
        


    


đầu ra
Vì chúng tôi đã sử dụng thuộc tính bắt buộc, nó đảm bảo rằng đầu vào phải được cung cấp cho các trường đầu vào khi chúng tôi nút Đăng nhập
Bên trong thùng chứa chính, sẽ có một thùng chứa phụ khác để giữ hộp kiểm và liên kết quên mật khẩu ở cùng cấp độ. Tương tự, việc sử dụng cơ bản của flexbox là cần thiết



    
    
    
    Login page in HTML


    Login form using HTML and CSS
    
        
        

            
Sign in
            
Sign in with your username and password
        


        
        

            
            Your username
            

            



            
            Your password
            

            
            

                
                   Remember me
                
                
 Forgot Password?
            



            
            Login

            
            
Not a member?  Register here!

        





    


đầu ra. Đây là cấu trúc cuối cùng của chúng tôi
Tuy nhiên nhìn vẫn chưa ổn. Vì chúng ta đã hoàn thành mã HTML cho trang đăng nhập, bây giờ chúng ta sẽ đề cập đến phần tạo kiểu trong phần tiếp theo
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'); After inserting the values, the table will look like this.

		
			
Làm cách nào để tạo trang đăng nhập trong HTML bằng notepad?
			
Trình chỉnh sửa HTML . 
 
Bước 1. Mở Notepad (PC) Windows 8 trở lên.  .  
 
Bước 1. Mở TextEdit (Mac) Mở Finder > Ứ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