Biểu mẫu đăng ký sinh viên bằng HTML có xác thực – mã cho biểu mẫu đăng ký sinh viên trong html

Đây là hướng dẫn từng bước để tạo biểu mẫu đăng ký sinh viên bằng HTML có xác thực. Bạn cũng sẽ tìm thấy mã nguồn của biểu mẫu đăng ký hoàn chỉnh ở đây.

Bạn đang xem : mã cho biểu mẫu đăng ký sinh viên bằng html

Thế giới đang thay đổi nhanh chóng do công nghệ hiện đại của web. Ngày nay, hầu hết các công việc trong cuộc sống mà chúng ta đang thực hiện thông qua internet. Cho dù đó là về việc đăng ký một công việc hoặc khóa học trực tuyến, chúng tôi cần phải đăng ký trên một trang web cụ thể. Mọi quản trị viên web đều cố gắng phát triển biểu mẫu đăng ký thân thiện với người dùng cho dù anh ta đang tạo trang web thương mại điện tử hay trang web giáo dục. Vì vậy, hôm nay tôi sẽ tạo một biểu mẫu đăng ký sinh viên bằng HTML với xác thực các trường biểu mẫu.

Nói chung, quy trình xác thực biểu mẫu yêu cầu JavaScript để xác thực các trường biểu mẫu trước khi gửi nó. Nhưng, phản ứng của bạn sẽ như thế nào nếu tôi nói rằng hoàn toàn có thể xảy ra nếu không có JavaScript? Chệch hướng! có thể sử dụng xác thực tích hợp sẵn HTML5 . Không chỉ điều này, mà bạn còn có thể hiển thị thông báo (các mục nhập hợp lệ & amp; không hợp lệ) cho người dùng sử dụng CSS thuần túy.

Như bạn đã thấy trên trang demo (duyệt qua trang demo nếu bạn không kiểm tra), sinh viên này biểu mẫu đăng ký khá đơn giản và dễ hiểu. Tuy nhiên, bạn có thể thêm nhiều trường đầu vào hơn khi cần. Tương tự, bạn hoàn toàn có thể tùy chỉnh nó bằng CSS theo mẫu của mình. Vì vậy, hãy bắt đầu với mã hóa HTML.

HTML cho Biểu mẫu đăng ký sinh viên

Sau đây là cấu trúc HTML hoàn chỉnh cho biểu mẫu đăng ký sinh viên. Bạn có thể thêm nhiều trường đầu vào trong đó, với lớp (và cấu trúc id) đã đề cập. Tôi chỉ để trống thuộc tính hành động biểu mẫu, đồng thời thêm thuộc tính này vào nơi bạn muốn gửi (hoặc xử lý) dữ liệu biểu mẫu.

 & lt; form class = "reg-form" & gt;
   & lt; p class = "helper-text" & gt; * biểu thị trường bắt buộc & lt; / p & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "firstName" & gt; Tên & lt; / label & gt;
      & lt; input type = "text" id = "firstName" class = "field text-field first-name-field" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label cf" for = "lastName" & gt; Họ & lt; / label & gt;
      & lt; input type = "text" id = "lastName" class = "field text-field last-name-field" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "tên viết tắt" & gt; Tên Cha & lt; / label & gt;
      & lt; input type = "text" id = "initialals" class = "field text-field initial-field" & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "dateOfBirth" & gt; Ngày sinh & lt; / label & gt;
      & lt; input type = "date" id = "dateOfBirth" class = "field date-field dob-field" min = "1900-01-01" max = "2015-09-18" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "tel" & gt; Tel & lt; / label & gt;
      & lt; input type = "tel" id = "tel" class = "field text-field tel-field" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "hs" & gt; Tên Trường Trung học & lt; / label & gt;
      & lt; input type = "text" id = "hs" class = "field text-field hs-field" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "tel" & gt; Địa chỉ Thường trú & lt; / label & gt;
      & lt; input type = "tel" id = "tel" class = "field text-field address-field" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" & gt; Cấp độ của bạn & lt; / label & gt;
      & lt; select class = "form-dropdown field" & gt;
         & lt; option value = "Năm đầu tiên" & gt; Năm đầu tiên & lt; / option & gt;
         & lt; option value = "Năm thứ 2" & gt; Năm thứ 2 & lt; / option & gt;
         & lt; option value = "Năm thứ 3" & gt; Năm thứ 3 & lt; / option & gt;
         & lt; option value = "Năm thứ 4" & gt; Năm thứ 4 & lt; / option & gt;
         & lt; option value = "Năm thứ 5" & gt; Năm thứ 5 & lt; / option & gt;
      & lt; / select & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" for = "email" & gt; Email & lt; / label & gt;
      & lt; input type = "email" id = "email" class = "field text-field email-field" bắt buộc & gt;
      & lt; span class = "message" & gt; & lt; / span & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" & gt; Chương trình cấp bằng & lt; / label & gt;
      & lt; select class = "field form-dropdown" & gt;
         & lt; option value = "BS trong Vật lý trước khi Y tế" & gt; BS trong Vật lý Pre-Med & lt; / option & gt;
         & lt; option value = "Cử nhân Vật lý chuyên ngành Kinh tế" & gt; Cử nhân Vật lý chuyên ngành Kinh tế & lt; / option & gt;
         & lt; option value = "BS chuyên ngành Vật lý nhỏ về Tài chính" & gt; Cử nhân Vật lý chuyên ngành Tài chính & lt; / option & gt;
         & lt; option value = "BS Vật lý với chuyên môn về Khoa học Vật liệu" & gt; Cử nhân Vật lý với chuyên ngành Khoa học Vật liệu & lt; / option & gt;
         & lt; option value = "BS Vật lý với chuyên môn về Dụng cụ Y tế" & gt; BS Vật lý với chuyên môn về Dụng cụ Y tế & lt; / option & gt;
         & lt; option value = "MS trong Vật lý" & gt; MS trong Vật lý & lt; / option & gt;
         & lt; option value = "Tiến sĩ Vật lý" & gt; Tiến sĩ Vật lý & lt; / option & gt;
      & lt; / select & gt;
   & lt; / div & gt;
   & lt; div class = "field-row" & gt;
      & lt; label class = "form-label" & gt; & lt; / label & gt;
      & lt; button class = "form-button" & gt; Đăng ký & lt; / button & gt;
   & lt; / div & gt;
& lt; / form & gt;

Trong HTML ở trên, trình đơn thả xuống chọn là tùy chọn. Tuy nhiên, bạn có thể cập nhật giá trị của chúng theo khóa học / yêu cầu của bạn. Bên cạnh đó, bạn cũng có thể thêm nút radio sành điệu cho thỏa thuận chính sách trong biểu mẫu đăng ký sinh viên của mình.

Xem Thêm  35 hiệu ứng di chuột qua hình ảnh Bootstrap tốt nhất - di chuột qua hình ảnh để hiển thị biểu tượng chỉnh sửa

Kiểu CSS & amp; Xác thực biểu mẫu

Bây giờ, đã đến lúc tạo kiểu biểu mẫu đăng ký bằng CSS. Đoạn mã sau xác định bố cục cơ bản của biểu mẫu. Nếu bạn muốn tùy chỉnh thiết kế biểu mẫu, bạn có thể đặt màu background tùy chỉnh và box-shadow .

. reg-form {
  nền: #fff;
  box-sizing: border-box;
  box-shadow: 1px 2px 6px rgba (0, 0, 0, 0.4);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 15px tự động;
  đệm: 15px;
  chiều rộng: 600px;
}

.form-header {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  lề: 5px;
}

.helper-text {
  font-size: 12px;
  margin-botom: 10px;
  text-align: phải;
}

CSS sau đây xác định kiểu cho hàng và trường của biểu mẫu.

. field-row {
  chức vụ: thân nhân;
  chiều rộng: 100%;
}

.form-label {
  display: inline-block;
  font-size: 16px;
  lề: 0 5px 5px 0;
  text-align: phải;
  chiều rộng: 100px;
}

.đồng ruộng {
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px;
  đệm: 10px;
  margin-bottom: 15px;
  chiều rộng: 240px;
}
.field.field-short {
  chiều rộng: 70px;
}

Đánh dấu trường bắt buộc bằng * và kiểu cơ bản cho thư bắt buộc. Nếu bạn muốn đặt màu tùy chỉnh cho biểu tượng *, chỉ cần thêm thuộc tính màu mới ngay sau nội dung.

. Message {
  display: inline-block;
}

: Required + .message :: before {
  Nội dung: "* ";
}

Bây giờ, hãy phân biệt các trường hợp lệ và không hợp lệ bằng màu đường viền bằng cách sử dụng Công cụ chọn hợp lệ và không hợp lệ của CSS .

. text-field: focus: Required: valid {
  outline: green solid 2px;
}
.text-field: tiêu điểm: bắt buộc: không hợp lệ {
  outline: solid 2px màu cam;
}
.date-field: focus: in-range {
  outline: green solid 2px;
}
.date-field: focus: out-of-range {
  outline: solid 2px màu cam;
}

.website-field: focus: valid {
  outline: green solid 2px;
}
.website-field: focus: không hợp lệ {
  outline: solid 2px màu cam;
}

Xác định một số kiểu CSS cho nút đăng ký. Nếu muốn tùy chỉnh, bạn có thể thay đổi nền, đệm và kích thước phông chữ, v.v.

Xem Thêm  So sánh kết hợp trái với tham gia phải - tham gia trái và tham gia phải sql

. form-button {
  background: linear-gradient (180deg, # 808080, # 2a2a2a);
  biên giới: không có;
  bán kính đường viền: 0;
  màu trắng;
  display: inline-block;
  đệm: 10px;
  font-size: 16px;
}

Cuối cùng, thêm thông báo xác thực trường (để hiển thị cho người dùng) bằng cách sử dụng bộ chọn giả tiêu điểm. Nếu bạn đã thêm bất kỳ trường mới nào trong biểu mẫu đăng ký, bạn cũng có thể xác nhận nó bằng cách sử dụng kỹ thuật tương tự. Chỉ cần nhắm mục tiêu đầu vào mới của bạn (với id hoặc lớp của nó) và: focus: invalid + .message :: after {}.

. First-name-field: focus : không hợp lệ + .message :: sau {
  màu cam;
  nội dung: "Yêu cầu tên của bạn";
}

.last-name-field: tiêu điểm: không hợp lệ + .message :: sau {
  màu cam;
  nội dung: "Yêu cầu họ của bạn";
}

.dob-field: focus: out-of-range + .message :: after {
  màu cam;
  nội dung: "Ngày nằm ngoài phạm vi";
}

.tel-field: focus: không hợp lệ + .message :: after {
  màu cam;
  nội dung: "Số điện thoại bắt buộc";
}

.email-field: tiêu điểm: không hợp lệ + .message :: sau {
  màu cam;
  nội dung: "Địa chỉ email bắt buộc";
}
.hs-trường: tiêu điểm: không hợp lệ + .message :: sau {
  màu cam;
  nội dung: "Tên trường cấp 3 bắt buộc";
}

.address-field: focus: invalid + .message :: after {
  màu cam;
  nội dung: "Địa chỉ thường trú bắt buộc";
}

.website-field: focus: không hợp lệ + .message :: after {
  màu cam;
  nội dung: "URL hợp lệ bắt buộc";
}

Tôi hy vọng bạn đã hoàn thành biểu mẫu đăng ký sinh viên của mình với sự trợ giúp của hướng dẫn xác thực biểu mẫu HTML này. Nếu bạn có bất kỳ câu hỏi nào về biểu mẫu đăng ký, vui lòng bình luận bên dưới.

Xem Thêm  Ví dụ về CSS tốt nhất và Ví dụ về CSS3 - ví dụ về style sheet css


Xem thêm những thông tin liên quan đến chủ đề mã cho biểu mẫu đăng ký sinh viên trong html

Tạo trang đăng ký và kiểm lỗi với javascript

  • Tác giả: Thầy Long Web
  • Ngày đăng: 2021-11-14
  • Đánh giá: 4 ⭐ ( 1681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo trang đăng ký thành viên và kiểm lỗi trong form, qua đó luyện tập về hàm, cách dùng sự kiệnl, cách kiểm tra dữ liệu với nhiều loại control khác nhau như input, select, radio, checkbox…

40 biểu mẫu HTML và CSS để đăng ký tài khoản, thanh toán và hơn thế nữa

  • Tác giả: www.creativosonline.org
  • Đánh giá: 3 ⭐ ( 6667 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 40 biểu mẫu CSS và HTML đặc biệt cho tất cả các loại mục đích như đăng nhập, biểu mẫu đăng ký, thẻ thanh toán, đăng ký và nhiều hơn nữa.

Google Forms: Công cụ tạo biểu mẫu trực tuyến

  • Tác giả: www.google.com
  • Đánh giá: 5 ⭐ ( 3483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Google Forms giúp bạn tạo biểu mẫu và bản khảo sát trực tuyến gồm nhiều loại câu hỏi. Bạn có thể phân tích kết quả theo thời gian thực từ bất cứ thiết bị nào.

Tạo form đăng ký bằng ngôn ngữ HTML

  • Tác giả: blogloi.com
  • Đánh giá: 3 ⭐ ( 9355 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo form đăng ký bằng ngôn ngữ HTML, cách sử dụng các thẻ định dạng form để tạo một form đăng ký đơn giản và chuyên nghiệp.

Biểu mẫu

  • Tác giả: qldt.ftu.edu.vn
  • Đánh giá: 5 ⭐ ( 2999 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn tạo form đăng ký từ Google Form – Trung tâm hỗ trợ

  • Tác giả: wiki.chili.vn
  • Đánh giá: 5 ⭐ ( 9195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[HTML/HTML5] Phần 30: Form (biểu mẫu) trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 8566 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình