Làm cách nào để kết nối biểu mẫu đăng ký với biểu mẫu đăng nhập trong HTML?

Nếu bạn thấy mình ở đây, có lẽ bạn đã gặp phải một số rào cản khi cố gắng tạo biểu mẫu đăng ký bằng HTML. Đừng lo. bạn không cô đơn. Mã hóa ngay cả biểu mẫu đăng ký đơn giản nhất trong HTML có thể là một quá trình tốn thời gian và thường gây khó chịu

HTML5 là mã tiêu chuẩn được sử dụng để làm cho hầu hết các trang web hoạt động. Đó là ngôn ngữ của internet. Nhưng giống như bất kỳ ngôn ngữ nào, bạn sẽ cần phải làm việc chăm chỉ (và bị lạc một vài lần) để trở nên thông thạo

Chúng tôi không thể giúp bạn thông thạo HTML trong 3.000 từ. Nhưng chúng tôi có thể cung cấp cho bạn thông tin cơ bản bạn cần để tạo một biểu mẫu đăng ký đơn giản cho trang web của mình. Trong bài đăng này, chúng tôi sẽ làm điều đó và cung cấp cho bạn một giải pháp không cần mã dễ dàng hơn, có thể tùy chỉnh hơn

Tạo biểu mẫu đăng ký HTML trong 6 bước

Dưới đây là cách tạo một biểu mẫu HTML đơn giản trong sáu bước—bao gồm mã. Đọc tiếp để biết hướng dẫn từng bước hoặc xem video bên dưới

Bước 1. Chọn trình soạn thảo HTML

Giống như bạn cần một trình xử lý văn bản để tạo tài liệu văn bản, bạn cần một trình soạn thảo văn bản để tạo mã HTML. Những công cụ phát triển này chuyển đổi mã kỳ lạ và tuyệt vời mà bạn nhập vào biểu mẫu đăng ký

Nếu đang tìm kiếm giải pháp đơn giản nhất, bạn luôn có thể viết mã của mình trong TextEdit trên máy Mac và lưu tệp dưới dạng trang web. Điều này sẽ không cung cấp cho bạn bất kỳ kiểu cách hoặc tính năng bổ sung nào, nhưng nó sẽ hoàn thành công việc. Chuyển đến Định dạng > Văn bản thuần túy để đảm bảo rằng TextEdit không làm thay đổi ký hiệu của bạn

Nếu bạn muốn có một công cụ chỉnh sửa HTML được chỉ định, có hàng tá (nếu không muốn nói là hàng trăm) để lựa chọn. Không có tùy chọn “tốt nhất”, nhưng có một số tính năng chính cần tìm nếu bạn định tải xuống một công cụ mới

1. Phát hiện lỗi. Tự động đánh dấu các lỗi cú pháp để sửa dễ dàng hơn. ‌
2. ‌Tự động hoàn thành. Đề xuất các phần tử HTML có liên quan dựa trên các thay đổi trước đó (giúp bạn tiết kiệm rất nhiều thời gian với mã dài). ‌
3. ‌‌Cú pháp nổi bật. Áp dụng màu cho các thẻ HTML khác nhau dựa trên các danh mục nhất định để giúp bạn đọc và sắp xếp mã dễ dàng hơn. ‌
4. ‌Tìm kiếm và thay thế. Xác định vị trí và ghi đè lên tất cả các phiên bản của một mã cụ thể thay vì chỉnh sửa từng mã riêng lẻ.

Nếu bạn thực sự bắt đầu viết mã thì có một số tính năng khác cần chú ý, nhưng để tạo một biểu mẫu đăng ký cơ bản thì bốn tính năng này là quá đủ

Bây giờ khi nói đến việc chọn một ứng dụng, sự lựa chọn là của bạn. Không có câu trả lời đúng. Muốn một cái gì đó mà bạn có thể sử dụng trong trình duyệt của bạn? . Xương trần? . Giao diện người dùng tối giản và trường nhập liệu trực quan?

Người đồng sáng lập và người đam mê mã thường trú của chúng tôi, Dean, thề với VS Code

"Từ một quan điểm kỳ lạ, Mã VS vừa khít với ngăn xếp công nghệ của Paperform và có các plugin phát triển từ xa tuyệt vời mà tôi yêu thích. Nó cũng tuyệt vời cho nội dung HTML và siêu tùy biến nếu bạn muốn các công cụ của mình trông đẹp mắt trong khi vẫn có tất cả các chức năng bạn cần

Nếu bạn bị choáng ngợp bởi các tùy chọn, chúng tôi khuyên bạn nên tải xuống một tùy chọn tương đối thân thiện với người dùng và miễn phí như Sublime Text và tìm hiểu khi bạn tiếp tục

Cần lưu ý rằng hầu hết các trình soạn thảo HTML sẽ không đi kèm với bất kỳ mẫu biểu mẫu nào—chúng chỉ cung cấp cho bạn trang trống. Khi nói đến việc tự tạo biểu mẫu, nghệ thuật là tất cả ở bạn

Bước 2. Tạo tệp HTML của bạn

Đã đến lúc bắt tay vào công việc. Mở trình soạn thảo văn bản bạn chọn, tạo một tệp mới và lưu nó với. phần mở rộng html. Bạn có thể gắn nhãn biểu mẫu của mình theo cách bạn muốn, như bestformever. html

Sau khi bạn đăng nhập vào trình chỉnh sửa rằng bạn đang tạo mã HTML, nó sẽ tự động tạo mã sau cho bạn

Một số trình chỉnh sửa sẽ không tự động điền. Không sao đâu. Chỉ cần sao chép và dán mã ở trên và bạn sẽ nhận được hiệu ứng tương tự

Bước 3. Thêm các trường văn bản cơ bản

Ổn thỏa. Đã đến lúc bắt đầu thêm mã có liên quan và biến tệp HTML cơ bản đó thành biểu mẫu đăng ký. Đây là mã chúng tôi sẽ sử dụng

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

Nếu bạn chưa quen với HTML, nó có thể trông giống như một đống chữ cái và biểu tượng. Bạn không cần phải hiểu ý nghĩa của chúng, nhưng việc khắc phục sự cố sẽ dễ dàng hơn một chút nếu bạn nắm được những điều cơ bản

Chúng tôi sẽ chia nhỏ chúng bên dưới nếu bạn quan tâm. Hãy bỏ qua phía trước nếu không

Biểu mẫu HTML được tạo thành từ các phần tử biểu mẫu. Đây là những thứ như hộp văn bản, nút radio, hộp kiểm và menu thả xuống giúp mọi người có thể tương tác với biểu mẫu trực tiếp của bạn

Trong bài viết này, chúng ta sẽ xem cách tạo Biểu mẫu đăng nhập & đăng nhập trượt đáp ứng bằng HTML CSS & Javascript, cùng với việc hiểu cách triển khai của nó thông qua hình minh họa

Nhiều trang web hiện nay đang triển khai các biểu mẫu đăng nhập và đăng nhập trượt cho trang web của họ. Biểu mẫu đăng ký được sử dụng để đăng ký hoặc tạo tài khoản mới cho người dùng mới cho trang web và biểu mẫu đăng nhập được sử dụng để nhập thông tin chi tiết của người dùng đã đăng ký vào tài khoản hoặc cổng thông tin cụ thể của họ. Vì vậy, nhiều trang web triển khai hai cách tiếp cận này thành hai trang khác nhau. Sau đây, chúng ta sẽ xem cách kết hợp hai biểu mẫu này thành một trang HTML duy nhất và các biểu mẫu sẽ xuất hiện theo lựa chọn của người dùng. Trên đầu form sẽ có nút bấm giúp người dùng lựa chọn form đăng nhập hoặc đăng ký tùy theo lựa chọn của mình. Khi người dùng chuyển từ biểu mẫu này sang biểu mẫu khác, biểu mẫu sẽ hiển thị hoạt ảnh trượt mượt mà.  

Biểu mẫu đăng nhập và đăng ký trượt

Tiếp cận. Cách tiếp cận sau đây sẽ được sử dụng để tạo Biểu mẫu đăng ký và đăng nhập trượt đáp ứng

• Tạo một thư mục dự án và bên trong nó tạo ba tệp “index. html“(để viết HTML), “kiểu. css“(để viết CSS), và “index. js“(để viết js). Bạn cũng có thể tạo một tệp riêng để giữ mã CSS cho khả năng phản hồi của trang
• Bây giờ, tạo một phần tiêu đề để giữ tiêu đề và tiêu đề. Sau đó, bên dưới phần tiêu đề, hãy tạo một div “vùng chứa” để giữ thông tin đăng nhập đầy đủ và biểu mẫu đăng ký với nút từ thay đổi
• Bây giờ, hãy tạo một div để giữ hai nút thay đổi hình thức và tạo hai nút bên trong div này. Một cái dành cho “Đăng nhập” và cái còn lại dành cho “đăng ký“. Sau đó, phía trên nút div, tạo một thanh trượt div sẽ thay đổi vị trí của nó khi ai đó nhấp vào nút tương ứng. Đặt lề trái và lề phải của nút div “auto“. Sau đó, bạn sẽ thấy nút sẽ đi vào trung tâm và thêm CSS vào nút để tắt đường viền và đường viền và làm cho nút div flex. Thực hiện theo mã CSS dưới đây để thực hiện nó

 margin: 20px auto;  
 display: flex;
 justify-content: space-around;
 align-items: center;

• Bây giờ, thêm màu nền vào div thanh trượt và đặt chiều cao bằng với div của nút và chiều rộng phải bằng một nửa div của nút. Sau đó đặt vị trí tuyệt đối và chỉ số z là 1. Sau đó thêm trái và trên cùng để căn chỉnh div với phần đầu của nút div. Nó sẽ che nửa phần đầu của nút div. Ngoài ra, thêm một quá trình chuyển đổi của 0. 5 giây để xem hình động mượt mà khi thanh trượt di chuyển
• Bây giờ, thêm một lớp bổ sung trong CSS sẽ thêm vào sau khi ai đó nhấp vào nút thứ hai và bên trong lớp này sẽ căn lề trái mà thanh trượt sẽ bao phủ nửa cuối của nút div
• Bây giờ, viết code javascript để di chuyển nút trượt theo lựa chọn của người dùng. Sự kiện nhấp vào nút Đăng ký thông qua “addEventListener” và thêm một lớp đã được xác định trong CSS ở bước trên. Ngoài ra, Thêm sự kiện nhấp vào nút Đăng nhập để xóa lớp (Để thêm lớp bằng cách sử dụng “classList. add(“class_name“)” và để xóa lớp bằng cách sử dụng “classList. xóa(“tên_lớp”)“)
• Giống như nút Thanh trượt, Chúng tôi sẽ tạo biểu mẫu trượt, sử dụng cùng một phương pháp. Bên dưới nút div, chúng tôi sẽ tạo một phần hoặc div khác sẽ chứa hai biểu mẫu. Bên trong biểu mẫu div này, chúng ta sẽ tạo hai div. Một cái sẽ chứa biểu mẫu đăng nhập và cái kia sẽ chứa biểu mẫu đăng ký. Sau đó, tạo các trường bắt buộc bên trong phần đăng nhập và đăng ký cùng với nút đăng nhập và đăng ký. Đặt chiều rộng của phần đăng nhập và đăng ký bằng với chiều rộng của div vùng chứa và div của phần biểu mẫu phải gấp đôi div vùng chứa
• Làm cho phần biểu mẫu “hiển thị. uốn cong; . liên quan đến; . 0px;“. Và thêm phần “tràn. ẩn giấu;" . Bây giờ hãy viết một lớp bổ sung trong CSS sẽ thêm vào sau khi ai đó nhấp vào nút thứ hai và bên trong nó căn lề trái mà biểu mẫu sẽ trượt sang trái và biểu mẫu thứ hai sẽ hiển thị
• Bây giờ hãy viết mã bằng javascript để thêm lớp bổ sung (đã được xác định trong CSS ở bước cuối cùng) bên trong phần biểu mẫu khi ai đó sẽ nhấp vào nút đăng ký và cũng xóa nó khi nhấp vào nút đăng nhập

Ví dụ. Ví dụ này minh họa cách xây dựng biểu mẫu đăng nhập và đăng nhập trượt đáp ứng bằng HTML CSS & Javascript

HTML

<html lang="en">

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

<____30>

2______44 5=7>

2______44 <2=<4

<5<6<7=<9html0

html1html2=html4html5

2______4html8html9html8>

2______4lang4 lang5=lang7

<5lang9==1>

=3____30>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

<____78>

2______4"en"2>

"en"4<"en"6 "en"7="en"9html9"en"6>

"en"4<>5 "en"7=>8>9>5>

2______73____82>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

2____108

2______4<1 "en"7=<4>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

"en"4<8

<900

"en"4<<1 "en"7=0607<1>

"en"4<<1 "en"7=15>

17<19 "en"7=222319>

17<19 "en"7=313219>

"en"4=3____41>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

"en"441

<9____343

"en"4<<1 "en"7=49>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

1753

17<<1 "en"7=59>

61<63 64=66

67"en"7=70

6772____774>

61<63 64=81

67"en"7=85

6772____781>

61<19 "en"7=962319>

17=3____41>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

17<06

17<<1 "en"7=<12>

61<____363 64=<19

67"en"7=<23

6772____7<27>

61<63 64=66

67"en"7=70

6772____774>

61<63 64=81

67"en"7=85

6772____781>

61<63 64=81

67"en"7=85

6772____7<72>

61<19 "en"7=963219>

17=3____41>

"en"4=3____41>

2______73____41>

2______4<97 <98=html0007<97>

=3____78>

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

=3____5>

CSS

________ 511 ________ 512 ________ 513

html14html15

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

html17

2____519____520____521html22

2____524____520____521html22

2____529

2______531____520____533html34html35html22

html37

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

html39

2____541____520____543html44

2______47____520html43html49

2____551html52

2_______554____555____520html57html22

2____560____557html22

2____564____565html66

2____568____569html22

2_______572____520____574html13____959____534>59html34>59html15

Làm cách nào để tạo biểu mẫu đăng nhập đáp ứng trong HTML?

Làm cách nào để tạo trang đăng nhập và đăng ký trong JavaScript?

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