Đâ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 HTML

Sử 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ường

Thí 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;
}

Tự mình thử »

---

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õi

Bướ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

Tôi đã thêm ba thuộc tính vào thẻ bắt đầu

6, đó là

9,

  
Create Account

0 và

  
Create Account

1

Như 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 đây

Mụ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

8

Tô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

2

Nế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

5

Vì 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

9

Bước 9. Form Body [Tải ảnh đại diện và tuổi lên]

0

Bướ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

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

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

Làm cách nào để tạo hồ sơ sinh viên trong HTML?