Hướng dẫn how do i register a form in html? - làm cách nào để đăng ký biểu mẫu trong html?

Mẫu đăng ký là danh sách các trường mà người dùng sẽ nhập dữ liệu vào và gửi cho một công ty hoặc cá nhân. Có nhiều lý do tại sao bạn muốn một người điền vào mẫu đăng ký. Các công ty sử dụng các mẫu đăng ký để đăng ký khách hàng để đăng ký, dịch vụ hoặc các chương trình hoặc kế hoạch khác.

Tổng quan

Cung cấp cho người dùng đăng ký và mẫu đăng nhập đơn giản là điều cần thiết cho bất kỳ ứng dụng phần mềm nào vì nó chủ yếu đóng vai trò là điểm nhập của ứng dụng. Do đó, xây dựng một mẫu đăng nhập hoặc đăng ký mang lại trải nghiệm người dùng tốt có khả năng truyền đạt ấn tượng tốt đầu tiên cho người dùng về toàn bộ ứng dụng.UI of a registration form in HTML and CSS.

Pre-requisites

Khi nói đến việc xây dựng một hình thức, có nhiều khía cạnh chính cần quan tâm, chẳng hạn như xác thực biểu mẫu, cách thiết kế xác thực và giao diện người dùng của nó. Bài viết này sẽ thảo luận về cách tạo UI cơ bản của mẫu đăng ký trong HTML và CSS.CSS.

Trước khi chúng tôi bắt đầu, chúng tôi giả sử bạn có một sự hiểu biết cơ bản về Flexbox trong CSS.

Chúng ta đang tạo ra cái gì?HTML can be divided into three parts as follows :

1. Cấu trúc cơ bản của mẫu đăng ký bằng cách sử dụng HTML có thể được chia thành ba phần như sau:
2. Tiêu đề và mô tả
3. Đăng nhập/đăng ký Biểu mẫu cơ thể

Route đến trang đăng nhậpHTML5 to create the basic layout and CSS for styling the created layout.

Hình ảnh sau đây cho thấy kết quả cuối cùng của những gì chúng tôi sẽ xây dựng. Chúng tôi sẽ sử dụng HTML5 để tạo bố cục cơ bản và CSS để tạo kiểu bố trí được tạo.

Cấu trúc HTML cho trang đăng ký

1. Trước tiên chúng ta hãy tạo một tệp index.html với mẫu HTML cơ bản, như được hiển thị bên dưới. Tiếp theo, bên trong thẻ, chúng ta có thể tìm thấy thẻ. Nội dung được đề cập bên trong thẻ xuất hiện trên tên của tab vì nó đề cập đến tiêu đề của trang web hiện tại. Vì vậy, thay đổi văn bản để đăng ký, như hình dưới đây. tag, we can find the
   1. Đầu tiên, hãy để thêm một số kiểu cơ bản vào biểu mẫu, như hình dưới đây. Thẻ biểu mẫu được chọn bên trong CSS để thêm các kiểu cần thiết.

   form{
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   Các kiểu trên sẽ tập trung vào biểu mẫu trên màn hình và cung cấp kết quả sau.
   Tiếp theo, hãy thêm một lớp vào thẻ Div đầu tiên bên trong biểu mẫu và đặt tên cho nó là "container". Sau đây là mã HTML:
    
   
         
         <div class="container">
           <h2>Registerh2>
           <p>Kindly fill in this form to register.p>
           <label for="username"><b>Usernameb>label>
           <input
             type="text"
             placeholder="Enter username"
             name="username"
             id="username"
             required
           />
   
           <label for="email"><b>Emailb>label>
           <input
             type="text"
             placeholder="Enter Email"
             name="email"
             id="email"
             required
           />
   
           <label for="pwd"><b>Passwordb>label>
           <input
             type="password"
             placeholder="Enter Password"
             name="pwd"
             id="pwd"
             required
           />
   
           <label for="pwd-repeat"><b>Repeat Passwordb>label>
           <input
             type="password"
             placeholder="Repeat Password"
             name="pwd-repeat"
             id="pwd-repeat"
             required
           />
   
           <button type="submit">Registerbutton>
         div>
   
         <div>
           <p>Already have an account? <a href="#">Log ina>.p>
         div>
       form>
   Sau đây là các kiểu tương ứng được cung cấp cho lớp "container". Nói tóm lại, nó sắp xếp tất cả các trường theo chiều dọc theo hàng và chiếm chiều rộng 25VW.
   
         
   
    
   
   
   0
   Trình duyệt cho thấy kết quả sau đây.
   Tiếp theo, chúng tôi sắp xếp tiêu đề và mô tả vào trung tâm của biểu mẫu, như được hiển thị bên dưới.
   
         
   
    
   
   
   1
   Trình duyệt hiển thị các thay đổi tương ứng như sau.
   Kiểu dáng cơ bản của biểu mẫu gần như hoàn thành. Bây giờ, chúng ta có thể thêm phông chữ và khoảng cách cần thiết vào các trường đầu vào, như được hiển thị bên dưới.
   
         
   
    
   
   
   2
   Đầu ra trình duyệt:
   Bây giờ, hãy làm đẹp các trường đầu vào của chúng tôi.
   
         
   
    
   
   
   3
   Cuối cùng, hãy thêm một số kiểu dáng cơ bản vào nút gửi của chúng tôi, bao gồm cả chức năng di chuột, như được hiển thị bên dưới.
   
         
   
         
   
   
   4
   Cuối cùng, chúng tôi đã xây dựng thành công một trang đăng ký và đầu ra cuối cùng trong trình duyệt được hiển thị bên dưới.
   

Sự kết luận

• Điều quan trọng là phải có kiến ​​thức tốt về Flexbox trong CSS trước khi chúng tôi bắt đầu phát triển trang đăng ký trong HTML.flexbox in CSS before we start developing the registration page in HTML.
• Toàn bộ trang đăng ký được sáng tác bên trong một thẻ biểu mẫu có chứa hai div.form tag which contains two divs.
• Bên trong DIV đầu tiên, chúng tôi có thẻ tiêu đề cho thẻ tiêu đề và p cho mô tả và cho mỗi đầu vào của người dùng, chúng tôi có thể thêm một cặp nhãn và thẻ đầu vào. Khi tất cả các đầu vào của người dùng được thêm vào, cuối cùng chúng tôi cũng thêm nút gửi để gửi dữ liệu biểu mẫu.title tag for the title and p tag for the description, and for each user input, we can add a pair of label and an input tag. Once all the user inputs are added, we finally add the submit button for submitting the form data.
• Div thứ hai chứa mô tả để định tuyến trở lại trang đăng nhập, được thực hiện bằng thẻ A.div contains the description for routing back to the login page, which is done using an a tag.
• Khi HTML được tạo, một flexbox cơ bản có thể được sử dụng để tạo kiểu mẫu bằng CSS.
• Bằng cách xây dựng một mẫu đăng ký, người ta có thể tìm hiểu về việc sử dụng biểu mẫu, đầu vào, nhãn và một thẻ và flexbox trong CSS.form, input,label, and a tags and flexbox in CSS as well.