Hướng dẫn how do i create a registered page in html? - làm cách nào để tạo một trang đã đăng ký trong html?

Giới thiệu về mẫu đăng ký trong HTML

Các hình thức HTML có thể được nhìn thấy ở khắp mọi nơi ngày nay trong tất cả các loại trang web. Các hình thức HTML này được sử dụng để thu thập dữ liệu hoặc thông tin hoặc phản hồi, v.v., từ khách truy cập trang web của bạn. Có đăng nhập các biểu mẫu, mẫu đăng ký, liên hệ với chúng tôi các biểu mẫu, trong số những mẫu khác.

Các biểu mẫu HTML được sử dụng để có được các loại chi tiết và đầu vào của người dùng, chẳng hạn như tên, tuổi và địa chỉ email. Các biểu mẫu được sử dụng trong các trang web được hình thành với sự trợ giúp của các yếu tố đặc biệt khác nhau được gọi là 'điều khiển' trong HTML, ví dụ, các khu vực văn bản, nút radio, hộp kiểm, gửi nút, v.v. hoặc dữ liệu bằng cách sửa đổi các điều khiển này, ví dụ, bằng cách nhập các văn bản hoặc thực hiện lựa chọn trên các mục cụ thể, v.v. và sau đó bằng cách gửi biểu mẫu. Khi biểu mẫu được điền đúng, biểu mẫu được gửi sẽ thêm dữ liệu hoặc gửi nó hoặc chuyển hướng đến trang khác hoặc cũng có thể lưu các chi tiết trong cơ sở dữ liệu.

Làm thế nào để tạo ra?

Các hình thức HTML rất dễ tạo. Vì tất cả các phần tử HTML khác, để tạo biểu mẫu, chúng tôi cần thẻ mở () và thẻ đóng (), từ đó sẽ sử dụng các thuộc tính khác như các thành phần, phần tử, các phần tử giữa các thành phần khác để tạo biểu mẫu đầy đủ chức năng. Tất nhiên, chúng tôi phải sử dụng CSS để nhìn và cảm nhận.

Sau đây là một cú pháp cơ bản cho biểu mẫu HTML.

Syntax:

<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.
</form>

Ví dụ về mẫu đăng ký trong HTML

Hãy cùng xem một đoạn trích mã ví dụ cho một biểu mẫu HTML đơn giản. Biểu mẫu được hiển thị dưới đây là một hình thức đăng nhập đơn giản và có các yếu tố điều khiển tối thiểu.

Code:

<form name="regForm">
<label>Username: <input type="text" id="username"></label>
<label>Password: <input type="password" id="pwd"></label>
<input type="submit" class="login" value="Log In" onclick="validation()" formtarget="_blank">
</form>

Như được hiển thị ở trên, mẫu đăng nhập này có hai hộp văn bản và nút gửi được dán nhãn là đăng nhập. Nó có một biểu mẫu HTML đơn giản mà chúng tôi đã tạo và dữ liệu được nhập được quyết định được in sau khi người dùng gửi nó. Phần ‘React, của biểu mẫu HTML được xử lý bởi hàm JavaScript của chúng tôi, được gọi với sự trợ giúp của một thuộc tính có tên‘ Onclick, được thêm vào nút gửi.

Output:

Trên đây là đầu ra chúng ta nhận được khi mã được thực thi. Sau khi nhập tên người dùng và mật khẩu, chúng tôi gửi biểu mẫu và thông báo chào mừng sau được hiển thị.

Output:

Biểu mẫu được thảo luận ở trên là một biểu mẫu đăng nhập đơn giản chỉ chấp nhận hai giá trị, tên người dùng và mật khẩu và được gửi. Ở đây chúng tôi chỉ đơn giản là in các giá trị, nhưng thông thường trong phần xử lý, người ta có thể so sánh ‘đăng nhập chi tiết với các giá trị đã lưu trong cơ sở dữ liệu và hiển thị thông báo đăng nhập thành công.

Tuy nhiên, một biểu mẫu đăng ký là một cái gì đó chấp nhận nhiều dữ liệu hoặc thông tin, như tên, tên người dùng, mật khẩu, ngày sinh, địa chỉ email, trong số những người khác và thông tin này sau đó phải xử lý có thể bao gồm hiển thị Dữ liệu trên trang tiếp theo hoặc lưu dữ liệu vào cơ sở dữ liệu và thực hiện đăng ký thành công.

Làm thế nào để tạo một mẫu HTML đăng ký?

Hãy cùng xem việc tạo ra mẫu đăng ký, từng bước.

Bước 1: Tạo và thêm các thành phần hình thức HTML và các yếu tố liên quan của chúng. Ở đây chúng tôi sẽ tạo các yếu tố liên quan đến hình thức hoặc liên kết bên trong các thẻ biểu mẫu mở và đóng. Bạn cũng có thể ‘Thêm thuộc tính hành động vào thẻ của bạn. Create and add HTML form elements and their associated elements. Here we will create nested form-related or associated elements inside opening and closing Form tags. You can also ‘add action’ attribute to your

tag.

Sau đây là đoạn trích mã HTML cho biểu mẫu của chúng tôi.

Code:

<form>
<div class="container">
<h2>Register Here</h2>
<p>Please fill in the details to create an account with us.</p>
<hr>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>

Output:

Bước 2: Thêm CSS để xem và cảm nhận. Bước này là tùy chọn vì không cần thêm CSS, biểu mẫu của bạn sẽ đăng ký thành công như nhau. (Không bắt buộc): Add CSS for look and feel. This step is optional since without adding CSS as well, your form will register equally successfully. (Optional)

Vì vậy, đối với mẫu đăng ký của chúng tôi, tôi đã thêm một chút phép thuật của CSS. Khi mã HTML ở trên được thực thi, chúng tôi thấy biểu mẫu sau được hiển thị trong trình duyệt của chúng tôi.

Mẫu đăng ký - Xác thực

Mẫu đăng ký được thảo luận ở trên là một mẫu đăng ký đơn giản trong đó không có quy tắc, đó là xác nhận. Một số người có thể nói, các hình thức đăng ký không đầy đủ mà không cần xác nhận.

Bây giờ xác nhận là một tập hợp các quy tắc hoặc hướng dẫn mà một lập trình viên đặt cho người dùng hoặc khách truy cập trang web của bạn. Ví dụ: tên người dùng phải từ 5 đến 8 ký tự hoặc mật khẩu không thể có ký tự đặc biệt, v.v.

Sau đây là một ví dụ về mẫu đăng ký với một số xác nhận. Một từ khóa, ’bắt buộc được sử dụng với một phần tử, chỉ định rằng phần tử đó là cần thiết để được điền. Chúng tôi sẽ thêm từ khóa này vào trường văn bản của chúng tôi, ‘email và xem kết quả bên dưới;

Code:

<input type="text" placeholder="Enter Email" name="email" required>

Output:

Hãy cùng xem một ví dụ khác với một số loại nhiều yếu tố và thuộc tính liên quan.

Ví dụ được đưa ra ở trên là một loại mẫu đăng ký đáp ứng với một số yếu tố như menu thả xuống, hộp văn bản, nút gửi. Lưu ý rằng với một chút xác nhận thông minh của CSS và JavaScript, một hình thức đăng ký đơn giản có vẻ tốt hơn nhiều. Kiểm tra khi cửa sổ trình duyệt co lại; Biểu mẫu điều chỉnh chính nó theo kích thước cửa sổ. Ngoài ra, các xác nhận được thêm vào biểu mẫu cho người dùng biết nếu anh ta để lại một hộp văn bản trống. Kiểm tra đoạn trích mã HTML bên dưới.

Kiểm tra CSS được sử dụng trong mã:

Ảnh chụp màn hình bên phải của bạn là kết quả của mã HTML ở trên với sự trợ giúp của CSS. Biểu mẫu đăng ký khác với các biểu mẫu khác vì chúng thu thập dữ liệu từ người dùng hoặc khách truy cập và sử dụng xác nhận để kiểm tra xem dữ liệu có chính xác không.

Bài viết đề xuất

Đây là một hướng dẫn cho mẫu đăng ký trong HTML. Ở đây chúng tôi thảo luận về phần giới thiệu và cách tạo biểu mẫu HTML đăng ký cùng với các ví dụ khác nhau và việc triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm -

1. Thẻ hình ảnh HTML
2. HTML UMLAUTE
3. HTML Schriftart
4. Thanh tìm kiếm HTML