Sau đây là cú pháp cơ bản cho một Form HTML

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá bán
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (86.130 xếp hạng)

cú pháp

form elements like submit or reset buttons, input, text area etc.

Ví dụ về Form đăng ký trong HTML

Hãy xem một đoạn mã ví dụ cho một biểu mẫu HTML đơn giản. Biểu mẫu hiển thị bên dưới là Biểu mẫu đăng nhập đơn giản và có các yếu tố kiểm soát tối thiểu

Mã số

Username: 
Password: 

Như được hiển thị ở trên, Biểu mẫu đăng nhập này có hai hộp văn bản và nút gửi có nhãn là Đăng nhập. Đó là một biểu mẫu HTML đơn giản mà chúng tôi đã tạo và dữ liệu đã nhập được quyết định in sau khi người dùng gửi nó. Phần 'phản ứng' của biểu mẫu HTML được xử lý bởi chức năng 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

đầu ra

Trên đây là đầu ra chúng tôi 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ị

đầu ra

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 chi tiết 'đăng nhập' 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, biểu mẫu đăng ký là thứ chấp nhận nhiều dữ liệu hoặc thông tin khác nhau, chẳng hạn như tên, tên người dùng, mật khẩu, ngày sinh, địa chỉ email, trong số những thông tin khác và thông tin này sau đó sẽ được xử lý có thể bao gồm hiển thị của

Làm cách nào để tạo biểu mẫu HTML đăng ký?

Hãy xem từng bước tạo Biểu mẫu đăng ký

Step 1: 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

Register Here
Please fill in the details to create an account with us.

Enter Email

Password

Confirm Password


By creating an account you agree to our Terms & Privacy.
Register


Already have an account? Sign in.

đầu ra

Bước 2. Thêm CSS cho giao diệ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)

Vì vậy, đối với biểu mẫu đăng ký của chúng tôi, tôi đã thêm một chút sức mạnh 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 nhận

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

Bây giờ xác thực là một 'bộ quy tắc hoặc hướng dẫn mà 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 có từ 5 đến 8 ký tự hoặc Mật khẩu không được có ký tự đặc biệt, v.v.

Sau đây là một ví dụ về biểu mẫu đăng ký với một số xác nhận. 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ử đó cần đượ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 mình, 'Email' và xem kết quả bên dưới;

Mã số

đầu ra

Hãy xem một ví dụ khác với một số loại phần tử và thuộc tính được liên kết với biểu mẫu

Ví dụ trên là một loại biểu mẫu đăng ký đáp ứng với một số thành phần 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 sử dụng hợp lệ CSS và javascript thông minh, một biểu mẫu đăng ký đơn giản sẽ đẹp hơn nhiều. Kiểm tra khi cửa sổ trình duyệt co lại; . Ngoài ra, các xác thực được thêm vào biểu mẫu cho người dùng biết nếu anh ta để trống hộp văn bản. 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 thực để kiểm tra xem dữ liệu có chính xác không

Bài viết được đề xuất

Đây là hướng dẫn về Form đăng ký bằng 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à cách 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 –

Làm thế nào để viết mã HTML cho mẫu đăng ký?

Làm cách nào để tạo biểu mẫu đăng ký bằng HTML và JavaScript?

Làm cách nào để tạo biểu mẫu đăng nhập và đăng ký bằng HTML và CSS?