Đây là biểu mẫu dùng để đăng ký học sinh trực tuyến. Mọi doanh nghiệp ngày nay đều hoạt động trực tuyến, và các trường đại học và cao đẳng cũng không ngoại lệ. Các nhiệm vụ quan trọng như đăng ký học sinh, gửi biểu mẫu bài kiểm tra, v.v. , cầu mong tất cả được hoàn thành trực tuyến nhanh chóng và hiệu quả. Mẫu này đóng vai trò như một biểu mẫu đăng ký sinh viên trực tuyến. Bất kể bạn dạy môn gì, mẫu đăng ký miễn phí dành cho sinh viên của chúng tôi cho phép sinh viên đăng ký lớp học trực tuyến của bạn một cách nhanh chóng và dễ dàng
Mã nguồn
Xem Bút
Mẫu đăng ký học sinh bằng HTML của Vidyasheela [@_vidyasheela]
trên CodePen.
cũng đọc
Có rất nhiều mẫu như vậy, một số tính năng của nó làm cho nó khác biệt so với các mẫu khác. Sau đây là các tính năng của nó
Dưới đây là một ví dụ về mã html cho mẫu đăng ký của sinh viên. Trong ví dụ này, chúng tôi đã hiển thị nhiều trường văn bản, nút radio, nút Đặt lại và nút Gửi biểu mẫu. Chúng tôi đã sử dụng nút Đặt lại để đặt lại tất cả các trường thành trống. Chúng tôi đã sử dụng xác thực JavaScript trong mẫu đăng ký của sinh viên. Nếu bạn không nhập giá trị vào trường văn bản thì thông báo lỗi sẽ hiển thị. Trong ví dụ này, chúng tôi đã bắt buộc nhập vào mọi trường do đó sẽ hiển thị lỗi nếu một trong số chúng không được điền chính xác. Tuy nhiên, một lập trình viên có thể điều chỉnh nó cho phù hợp
Khi tất cả các trường được điền chính xác, biểu mẫu gửi sẽ thêm dữ liệu. Một lập trình viên có thể sử dụng biểu mẫu gửi này theo ý muốn, họ có thể gửi/chuyển hướng nó đến trang khác hoặc lưu nó vào cơ sở dữ liệu
Sau đây là video hướng dẫn "Làm thế nào để tạo form đăng ký học sinh bằng HTML?"
Trong hướng dẫn bằng video ở trên, chúng tôi đã giải thích cho bạn cách tạo trang html để đăng ký sinh viên và xác thực nó bằng JavaScript. JavaScript được sử dụng để xác thực trang HTML trong các ứng dụng web. Ngày nay, Ajax và jQuery cũng được sử dụng để tạo các ứng dụng web động
Tìm hiểu cách tạo biểu mẫu đăng ký bằng CSS
Vui lòng điền vào mẫu này để tạo một tài khoản
Đăng kýTự mình thử »
Bước 1] Thêm HTMLSử dụng một
yếu tố để xử lý đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi. Sau đó thêm đầu vào [có nhãn phù hợp] cho từng trườngThí dụ
Đăng ký
Vui lòng điền vào mẫu này để tạo một tài khoản
Email
Mật khẩu
Lặp lại mật khẩu
Bằng cách tạo một tài khoản, bạn đồng ý với Điều khoản & Quyền riêng tư của chúng tôi
Đăng ký
Bạn co săn san để tạo một tai khoản?
Bước 2] Thêm CSS
Thí dụ
* {kích thước hộp. hộp viền}
/* Thêm phần đệm vào vùng chứa */
. vùng chứa {
phần đệm. 16px;
}
/* Các trường nhập có chiều rộng đầy đủ */
input[type=text], input[type=password] {
width. 100%;
phần đệm. 15px;
lề. 5px 0 22px 0;
hiển thị. inline-block;
đường viền. không;
nền. #f1f1f1;
}
đầu vào[type=text]. tiêu điểm, nhập [loại=mật khẩu]. tiêu điểm {
màu nền. #ddd;
phác thảo. không;
}
/* Ghi đè kiểu mặc định của giờ */
giờ {
đường viền. 1px solid #f1f1f1;
margin-bottom. 25px;
}
/* Đặt kiểu cho nút gửi/đăng ký */
. registerbtn {
màu nền. #04AA6D;
màu. màu trắng;
phần đệm. 16px 20px;
lề. 8px 0;
đường viền. không;
con trỏ. con trỏ;
chiều rộng. 100%;
độ mờ. 0. 9;
}
.registerbtn:hover {
độ mờ. 1;
}
/* Thêm màu văn bản xanh dương vào liên kết */
a {
color. Dodgerblue;
}
/* Đặt màu nền xám và căn giữa văn bản của phần "đăng nhập" */
. đăng nhập {
màu nền. #f1f1f1;
căn chỉnh văn bản. trung tâm;
}
Mẹo. Đi tới Hướng dẫn Biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML
Mẹo. Truy cập Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu
Trong bài viết này, tôi sẽ hướng dẫn bạn cách thiết kế Biểu mẫu đăng ký hẹn hò HTML CSS thú vị từng bước từ đầu như trong ảnh chụp màn hình bên dưới
Để bạn biết, tôi sẽ chỉ cho bạn thấy phần thiết kế của biểu mẫu đăng ký bằng HTML và CSS
Để tận dụng tối đa blog này, bạn nên có kiến thức cơ bản về HTML và CSS. Đến cuối bài viết này, bạn sẽ có thể hiểu và xây dựng biểu mẫu đăng ký thú vị của riêng mình. Chúng ta hãy nứt
✅ Đề xuất.
Biểu mẫu đăng ký đáp ứng CSS Flexbox KILLER kèm mã nguồn
Bước 1. Tải xuống thư mục bắt đầu
Tôi đã tạo một thư mục có tên là
4 và trong thư mục đó, tôi đã tạo một tệp HTML và một tệp CSS. Các bạn có thể download folder tại đây để cùng theo dõiBước 2. Khởi tạo Form
Phần tử
5 có thể được sử dụng để khởi tạo một biểu mẫu có thể là biểu mẫu liên hệ, đăng ký hoặc đăng nhập trên bất kỳ trang HTML nào. Tôi đang thêm phần tử
6 bên trong phần tử
7 trong trang HTML
Register Form Start
Tôi đã thêm ba thuộc tính vào thẻ bắt đầu
6, đó là
9,
Create Account
0 và
Create Account
1Như bạn đã biết, thuộc tính
9 có thể được sử dụng để nhắm mục tiêu một phần tử trong CSS hoặc JavaScript thường được gọi là bộ chọn. Nếu bạn không chắc chắn về các thuộc tính HTML, hãy xem blog khác của tôi bằng cách nhấp vào đâyMục đích của thuộc tính
Create Account
0 chứa URL hoặc bất kỳ tên tệp phía máy chủ nào là yêu cầu nó đăng các giá trị biểu mẫu lên URL đó hoặc tên tệp khi gửi biểu mẫu. Thuộc tính
Create Account
4 cho biết trình duyệt nên sử dụng phương thức HTTP nào để gửi biểu mẫu✅ Đề xuất.
Xây dựng trang web thế giới thực đáp ứng bằng HTML5 và CSS3
Bước 3. Cấu trúc biểu mẫu
Khi chúng ta đã có phần tử
6, tôi thêm ba DIV bên trong nó đại diện cho tiêu đề, nội dung và chân trang của phần tử
6 như trong mã bên dưới
✅ Đề xuất
Hoàn thành khóa học Flexbox. Tìm hiểu CSS3 Flexbox năm 2020
Bước 4. Tiêu đề biểu mẫu
Thêm một phần tử H1 bên trong phần tử
Create Account
7
Create Account
Bây giờ, chúng ta cần thêm một số mã CSS cho
Create Account
7 vào tệp CSS của mình như bên dưới
8Tôi có một câu lệnh nhập ở đầu mã CSS cho biết rằng tôi đang lấy phông chữ yêu thích của mình từ bộ sưu tập phông chữ của Google. Nếu bạn muốn sử dụng một phông chữ khác, bạn có thể vào đây
Mã CSS ở trên dành cho bộ chứa biểu mẫu chính và phần tiêu đề của biểu mẫu. Ở giai đoạn này, bạn sẽ có thể thấy thiết kế tiêu đề trên trình duyệt khi bạn làm mới
Tiếp theo, hãy thêm một số thành phần biểu mẫu HTML bên trong
Create Account
9 từng cái một✅ Nên dùng
CSS – Hướng dẫn hoàn chỉnh 2020 [bao gồm. Flexbox, Grid & Sass]
Bước 5. Form Body [Tên và Họ]
Trong mã HTML bên dưới, tôi đang tạo một div có tên lớp
80 bên trong
81Sau đó, tôi đang tạo thêm hai DIV có cùng tên lớp
82 bên trong
80. Thêm một lớp
84 hoặc
85 bổ sung đại diện cho vị trí của
82 trên trang. Có hai phần tử HTML nữa là
87 và
88 bên trong
82 như bạn có thể thấy bên dưới
0Đây là mã CSS cho tên và họ
00
2Nếu bạn làm mới trang ở giai đoạn này, sau khi thêm mã HTML và CSS vào tệp của mình, bạn sẽ có thể xem các kiểu được áp dụng cho trang
✅ Nên dùng
CSS Tạo Div toàn màn hình
Bước 6. Form Body [Email và Mật khẩu]
Email sẽ là một khối riêng biệt trong HTML, trong khi Mật khẩu và Xác nhận mật khẩu sẽ giống như tên và họ
Thêm đoạn mã sau bên dưới vào sau thẻ kết thúc của tên và họ
80 nhưng bên trong trình bao bọc
Create Account
9
5Vì tôi đang sử dụng cùng các lớp CSS nên tôi không cần thêm bất kỳ kiểu bổ sung nào cho đoạn mã trên
✅ Được đề xuất
Các yếu tố cơ bản của thiết kế web đáp ứng – HTML5 CSS3 Bootstrap
Bước 7. Form Body [Giới tính và sở thích]
Tôi đang sử dụng một vài nút radio cho nhóm đầu vào Giới tính và tôi đang cung cấp các giá trị giống nhau cho các thuộc tính
03 để mỗi lần chỉ chọn một nút
7✅ Được đề xuất
Cách tạo Biểu ngữ / Đơn vị anh hùng đơn giản trong CSS
Bước 8. Form Body [Nguồn thu nhập và số tiền thu nhập]
8Đối với trang chiếu Phạm vi thu nhập, chúng tôi cần thêm mã JavaScript bên dưới để có nhãn hiển thị số thích hợp khi trang chiếu được di chuyển
9Bước 9. Form Body [Tải ảnh đại diện và tuổi lên]
0Bước 10. Form Body [Sinh học]
1✅ Được đề xuất
Xây dựng trang web từ đầu bằng HTML & CSS
Bước 11. Chân trang biểu mẫu
2____03Ở giai đoạn này, bạn sẽ có mã trông giống như ảnh chụp màn hình mà tôi đã trình bày ở đầu bài viết này. Ở đó bạn có nó. Cảm ơn vì đã đọc