Thực đơn
trang chủWindows 10

Cách tạo bảng đăng ký bằng html. Tạo mẫu đăng ký chỉ bằng một cú nhấp chuột


Xin chào, habrafriend thân mến! Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo hai biểu mẫu HTML5: biểu mẫu đăng nhập và biểu mẫu đăng ký. Những hình dạng này sẽ được hoán đổi với nhau bằng cách sử dụng lớp giả CSS3 :target. Chúng tôi sẽ sử dụng CSS3 và phông chữ biểu tượng. Ý tưởng của bản demo này là hiển thị cho người dùng một biểu mẫu đăng nhập và cung cấp cho họ liên kết “đi tới” tới biểu mẫu đăng ký.
Trong hướng dẫn này tôi sẽ nói chi tiết về cách tạo hiệu ứng như trong Demo 1. Đăng nhập HTML

Email hoặc tên người dùng của bạn

Mật khẩu của bạn

Giữ tôi luôn đăng nhập

Chưa phải là thành viên? Tham gia với chúng tôi

Đăng ký

tên người dùng của bạn

Email của bạn

Mật khẩu của bạn

Vui lòng xác nhận mật khẩu của bạn

Đã là thành viên hay chưa? Đi và đăng nhập


Ở đây chúng tôi đã sử dụng một số thủ thuật HTML5. Ví dụ, phần tử gõ=mật khẩu tự động ẩn nội dung người dùng nhập và thay thế các ký tự bằng dấu chấm hoặc dấu hoa thị (tùy thuộc vào trình duyệt). Yếu tố gõ=email cho phép trình duyệt kiểm tra định dạng có đúng không địa chỉ email. Ngoài ra, chúng tôi còn sử dụng tham số yêu cầu=bắt buộc; các trình duyệt hỗ trợ thông số này sẽ không cho phép người dùng gửi biểu mẫu cho đến khi trường được điền vào, không yêu cầu JavaScript ở đây. Tham số tự động hoàn thành=bật sẽ tự động điền vào một số trường. Chúng tôi cũng sử dụng văn bản thay thế để hướng dẫn người dùng khi điền biểu mẫu.

Bây giờ về hai điểm khó khăn. Bạn có thể nhận thấy hai liên kết ở đầu biểu mẫu. Thủ thuật gọn gàng này sẽ cho phép biểu mẫu của chúng ta hoạt động chính xác khi làm việc với các điểm neo.

Điểm thứ hai liên quan đến việc sử dụng phông chữ có biểu tượng. Chúng tôi sẽ sử dụng thuộc tính dữ liệu để hiển thị các biểu tượng. Thông số cài đặt data-icon=”icon_character” Với các ký tự thích hợp trong HTML, chúng ta chỉ cần gán một quy tắc trong CSS để tạo kiểu cho tất cả các biểu tượng. Bạn có thể đọc thêm về kỹ thuật này trên trang web: 24 cách: Hiển thị biểu tượng bằng phông chữ và thuộc tính dữ liệu.

CSS Để đảm bảo độ thuần khiết của mã, tôi sẽ bỏ qua thông số cơ bản(html, body, v.v.), nhưng bạn có thể tìm thấy chúng trong tập tin nguồn. Một lần nữa, tôi đang sử dụng các kỹ thuật CSS3 không hoạt động trên tất cả các trình duyệt. Vì vậy, hãy bắt đầu! Tạo kiểu cho biểu mẫu bằng CSS3 Trước tiên, hãy tạo cho biểu mẫu của chúng ta một kiểu cơ bản.

#subscribe, #login(vị trí: tuyệt đối; trên cùng: 0px; chiều rộng: 88%; phần đệm: 18px 6% 60px 6%; lề: 0 0 35px 0; nền: rgb(247, 247, 247); đường viền: liền khối 1px rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; chỉ số z: 22 )

Ở đây chúng ta sẽ gán thuộc tính cho tiêu đề:

/**** văn bản ****/ #wrapper h1( cỡ chữ: 48px; màu: rgb(6, 106, 117); phần đệm: 2px 0 10px 0; họ phông chữ: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: đậm; text-align: center; đệm-bottom: 30px; ) /** Hiện tại chỉ có webkit hỗ trợ nền-clip:text; **/ #wrapper h1( nền: -webkit-repeating-Tuyến tính-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: trong suốt; -webkit-background-clip: text ) #wrapper h1:after( nội dung: " "; hiển thị:khối; chiều rộng:100%; lề trên:10px; nền: gradient tuyến tính(trái, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20% 147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%));

Lưu ý rằng ngày nay chỉ có các trình duyệt có hỗ trợ webkit clip nền: văn bản, vì vậy chúng tôi sẽ tạo nền sọc chỉ dành cho webkit và gắn nó vào tiêu đề H1. Vì tham số clip nền: văn bản chỉ hoạt động trong trình duyệt Webkit, tôi quyết định chỉ hoạt động với các thuộc tính của webkit. Đó là lý do tại sao tôi chia CSS thành hai phần và chỉ sử dụng gradient của webkit. Tuy nhiên, bạn không nên chỉ sử dụng webkit trên trang web của mình! Vì vậy, ví dụ, tham số -webkit-text-fill-color: trong suốt cho phép chúng tôi có nền trong suốt, nhưng chỉ dành cho trình duyệt webkit, tất cả các trình duyệt khác sẽ bỏ qua thuộc tính này.

Chúng tôi cũng đã tạo dòng kẻ mảnh dưới tiêu đề sử dụng phần tử: pseudo-after-class. Chúng tôi đã sử dụng một gradient có chiều cao 2px và giảm độ mờ ở các cạnh xuống 0.

Bây giờ hãy chăm sóc các trường đầu vào và làm cho chúng trông đẹp mắt.

/**** kiểu đầu vào nâng cao ****/ /* giữ chỗ */ ::-webkit-input-placeholder ( color: rgb(190, 188, 188); kiểu phông chữ: in nghiêng; ) đầu vào:-moz- giữ chỗ, textarea:-moz-placeholder( color: rgb(190, 188, 188); kiểu phông chữ: in nghiêng; ) đầu vào ( phác thảo: none; )

Đầu tiên, chúng ta sẽ tạo kiểu cho lề và loại bỏ nét viền. Nhưng hãy cẩn thận: dàn ý giúp người dùng hiểu họ đang ở lĩnh vực nào. Nếu loại bỏ nó, bạn cần áp dụng các thuộc tính: active và: focus.

/* tất cả các trường loại trừ gửi và hộp kiểm */ #wrapper input:not())( width: 92%; lề trên: 4px; phần đệm: 10px 5px 10px 32px; đường viền: 1px Solid rgb(178, 178, 178); box -sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inet; tiêu điểm(viền: 1px rắn rgba(91, 90, 90, 0.7); nền: rgba(238, 236, 240, 0.2); bóng hộp: 0px 1px 4px 0px rgba(168 , 168, 168, 0.9) inet )

Ở đây chúng tôi đã sử dụng lớp giả:không để tạo kiểu cho tất cả các trường ngoại trừ các hộp kiểm. Ngoài ra, tôi quyết định loại bỏ nét vẽ và thêm các thuộc tính:focus và:active.

Giờ là lúc giải trí: phông chữ có biểu tượng. Vì chúng ta không thể sử dụng các lớp giả :trước và :after nên chúng ta sẽ thêm biểu tượng vào tham số nhãn và sau đó đặt nó vào trường. Tôi sẽ sử dụng thư viện fontomas. Bạn có thể tự ghép các biểu tượng với chữ cái tương ứng. Thuộc tính ghi nhớ biểu tượng dữ liệu? Đây là nơi bạn cần chèn chữ cái. tôi đã sử dụng biểu tượng dữ liệu='u'để đăng nhập, 'e' cho email, 'p' cho mật khẩu. Sau khi chọn các chữ cái, tôi tải xuống phông chữ và sử dụng trình tạo phông chữ Fontsquirrel để chuyển đổi nó sang định dạng phù hợp với @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** trò ảo thuật! **/ :after ( nội dung: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); vị trí: tuyệt đối; bên trái: 10px; trên cùng: 35px; chiều rộng: 30px; )

Đó là tất cả. Bạn không cần phải có lớp riêng cho từng biểu tượng. Chúng tôi đã sử dụng tham số nội dung: attr(data-icon)để lấy chữ cái từ thuộc tính biểu tượng dữ liệu. Như vậy, chúng ta chỉ cần gán phông chữ, chọn màu và đặt biểu tượng.

Bây giờ hãy gán quy tắc cho nút gửi biểu mẫu.

/*tạo kiểu cho cả hai nút*/ #wrapper p.button input( width: 30%; con trỏ: con trỏ; nền: rgb(61, 157, 179); phần đệm: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; màu: #fff; cỡ chữ: 24px; đường viền: 1px rgb đặc (28, 108, 122); lề dưới: 10px; bóng văn bản: 0 1px 1px rgba(0, 0 , 0, 0,5); bán kính đường viền: 3px; bóng hộp: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) chèn, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); chuyển tiếp: tất cả 0,2 giây tuyến tính; ) #wrapper p.button input:hover( nền: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. nút đầu vào: tiêu điểm( nền: rgb(40, 137, 154); vị trí: tương đối; trên cùng: 1px; đường viền: 1px rgb rắn (12, 76, 87); bóng hộp: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) inet; ) p.login.button, p.signin.button( text-align: right; lề: 5px 0; )

Bí quyết là sử dụng bóng hộp để tạo nhiều khung. Đương nhiên, bạn chỉ có thể sử dụng một khung hình, nhưng bạn cũng có thể sử dụng nhiều khung hình. Chúng ta sẽ sử dụng tham số độ dài để tạo đường viền màu trắng thứ hai “giả”, rộng 3px, không bị mờ.

Bây giờ hãy tạo kiểu cho hộp kiểm, chúng tôi sẽ không làm bất cứ điều gì bất thường ở đây:

/* tạo kiểu cho hộp kiểm “nhớ tôi”*/ .keeplogin( lề-top: -5px; ) .keeplogin đầu vào, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping(margin-right: 5px; ) .keeplogin label( width: 80%; )

Tạo kiểu cho chân trang biểu mẫu bằng bội số độ dốc tuyến tínhđể tạo một gradient sọc.

P.change_link(vị trí: tuyệt đối; màu: rgb(127, 124, 124); trái: 0px; chiều cao: 20px; chiều rộng: 440px; phần đệm: 17px 30px 20px 30px; cỡ chữ: 16px; căn chỉnh văn bản: phải; đường viền trên cùng: 1px rgb rắn (219, 229, 232); bán kính đường viền: 0 0 5px 5px; nền: rgb(225, 234, 235); nền: lặp lại-tuyến tính-gradient (-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); hiển thị: khối nội tuyến; độ dày phông chữ: in đậm; nền: rgb(247, 248, 241); phần đệm: 2px 6px; màu: rgb(29, 162, 193); ; bán kính đường viền: 4px; đường viền: rgb rắn 1px (203, 213, 214); chuyển tiếp: tất cả 0,4 giây tuyến tính; nền: rgb (247, 247, 247); 198) #wrapper p.change_link a:active( vị trí: tương đối; top: 1px; )

Bây giờ bạn có thể thấy rằng chúng ta có hai hình dạng đẹp, nhưng chúng ta chỉ muốn hiển thị một trong số chúng. Đã đến lúc hoạt hình!

Tạo hoạt ảnh Điều đầu tiên chúng ta sẽ làm là ẩn hình dạng thứ hai bằng cách đặt độ mờ thành 0:

#register( z-index: 21; độ mờ: 0; )

Hãy nhớ rằng biểu mẫu đăng nhập có chỉ mục z: 22? Đối với biểu mẫu thứ hai, chúng tôi sẽ gán tham số này cho 21 để đặt nó “dưới” biểu mẫu đăng nhập.

Bây giờ là phần thú vị: chúng ta hoán đổi các biểu mẫu bằng cách sử dụng lớp giả:target. Bạn cần hiểu một điều về :target: chúng ta sẽ dùng neo để di chuyển nó. Hành vi bình thường của mỏ neo là nhảy lên yếu tố cụ thể trang. Nhưng chúng tôi không muốn điều đó, chúng tôi chỉ muốn hoán đổi hình dạng. Đây chính là lúc thủ thuật sử dụng hai liên kết ở đầu trang của chúng tôi được phát huy tác dụng. Thay vì hướng chúng ta trực tiếp đến dạng thứ hai và mạo hiểm gây ra hiệu ứng nhảy, chúng ta sẽ cung cấp cho các liên kết một tham số không trưng bày. Điều này sẽ giúp tránh nhảy. Tôi phát hiện ra thủ thuật này trên trang web: CSS3 create (tiếng Pháp).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )

Đây là những gì xảy ra: khi chúng ta nhấp vào nút Tham gia, chúng tôi đang hướng tới #toregister. Sau đó, hoạt ảnh xuất hiện và chỉ khi đó chúng ta mới chuyển sang phần tử #register. Chúng tôi sử dụng một hình ảnh động được gọi là mờ dầnInLeft. Vì chúng ta đang "ẩn" hình dạng bằng độ trong suốt bằng 0 nên chúng ta sẽ áp dụng một hình ảnh động sẽ dần dần xuất hiện. Chúng tôi cũng đã thay đổi chỉ mục z để nó xuất hiện ở trên cùng của hình dạng khác. Điều tương tự cũng xảy ra với hình thức khác.
Đây là mã cho hình ảnh động. Chúng tôi đã sử dụng khung hoạt hình CSS3 từ Dan Eden và điều chỉnh khung này cho hướng dẫn của mình.

Animate( animation-duration: 0.5s; animation-timing-function: easy; animation-fill-mode: cả hai; ) @keyframes fadeInLeft ( 0% ( opacity: 0; Transform: TranslateX(-20px); ) 100% ( opacity : 1; biến đổi: dịchX(0);

Hình dạng "biến mất" sẽ có hoạt ảnh mờ dần ở bên trái:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animation-name: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacity: 1; Transform: TranslateX(0); ) 100% ( opacity : 0; biến đổi: dịchX(-20px);

Bây giờ bạn có thể sử dụng các hoạt ảnh khác từ tệp animate.css của Dan Eden: chỉ cần thay đổi lớp .animate và tên hoạt ảnh. Bạn cũng sẽ tìm thấy một số hoạt ảnh khác ở cuối tệp animate-custom.css.

Thế thôi, các bạn. Tôi hy vọng bạn thích hướng dẫn này!

Lưu ý rằng trong một số trình duyệt, tùy chọn clip nền: văn bản không được hỗ trợ. TRONG trình duyệt web IE 9 hình ảnh động không hoạt động. Trong Internet Explorer 8 trở xuống, lớp giả: lớp giả đích không được hỗ trợ, do đó hiệu ứng này hoàn toàn không hoạt động ở đó.

tái bút Tôi sẽ sẵn sàng chấp nhận mọi ý kiến ​​liên quan đến bản dịch trong tin nhắn cá nhân. Cảm ơn!

Thẻ: Thêm thẻ

Gần như tất cả dự án trực tuyến bao gồm hai phần - mở, có sẵn cho tất cả người dùng và đóng, chỉ có thể truy cập sau khi đăng ký trên trang web.

Rõ ràng, để người dùng tài nguyên web của bạn có thể để lại dữ liệu đăng ký của họ để truy cập các phần đã đóng của trang web (có thể là blog hoặc), bạn cần phải tạo Mẫu đăng ký, trên bất kỳ trang nào của trang web. Và ở đây nhiều người đang thắc mắc làm thế nào để tạo và cài đặt một biểu mẫu như vậy.

Dễ dàng hơn cho những người sử dụng Chức năng CMS, vì các hệ thống này có các mô-đun được tạo sẵn để làm việc với các biểu mẫu web. Đúng là khả năng của họ có hạn. Trong các trường hợp khác, bạn cần học các ngôn ngữ lập trình (như PHP, HTML) và hiểu hệ thống quản lý cơ sở dữ liệu (bạn có thể tốn rất nhiều công sức và quan trọng nhất là thời gian nhưng vẫn không đạt được kết quả). Có một lựa chọn khác - thuê một chuyên gia sẽ hoàn thành nhiệm vụ. Nhưng công việc của các lập trình viên không hề rẻ, nhưng nếu không có đủ tiền trả cho công việc thì sao?

Vừa mới xuất hiện cách mới tạo các biểu mẫu web (đăng ký, biểu mẫu nhận xét, đặt hàng hóa hoặc dịch vụ trực tuyến, v.v.), không yêu cầu kiến ​​thức về ngôn ngữ lập trình (PHP, HTML) và các công nghệ web khác (CSS, MySQL) - đây là dịch vụ MyTaskHelper.ru - nhà xây dựng trực tuyến các hình thức Trang web này có trực quan giao diện rõ ràng và không yêu cầu bất kỳ kiến ​​thức lập trình nào.

Thật dễ dàng để tạo một biểu mẫu đăng ký và cài đặt nó trên trang web của bạn; bạn chỉ cần dành vài phút và làm theo một loạt các bước đơn giản:

1.Đầu tiên, hãy thực hiện quá trình đăng ký và kích hoạt tài khoản của bạn (mất chưa đầy một phút);

2.Tạo một dự án và một biểu mẫu (đối với mỗi dự án, bạn có thể tạo bao nhiêu biểu mẫu tùy thích);

3.Thêm các trường bắt buộc vào mẫu đăng ký (việc lựa chọn tên là của bạn, tất cả phụ thuộc vào mục đích của biểu mẫu). Trong hệ thống, bạn có thể chọn loại từng trường (MyTaskHelper cung cấp 20 các loại khác nhau, chẳng hạn như một dòng văn bản, văn bản nhiều dòng, ngày tháng, tệp, hộp kiểm, danh sách thả xuống và những thứ khác);

4.Nếu cần, hãy định cấu hình chức năng của từng trường (đây có thể là xác thực, hoàn thành tự động, mặc định, kích thước trường);

5.Trong mô-đun Widgets, tạo một thiết kế biểu mẫu để hài hòa với những gì đã tồn tại trên trang web (có sẵn một số lượng lớn thông số). Cũng đang sử dụng của mô-đun này bạn có thể đặt “hành vi” của biểu mẫu khi người dùng điền vào biểu mẫu, nghĩa là làm cho biểu mẫu trở nên động.

6. Vậy là xong, mẫu đăng ký đã sẵn sàng. Sao chép mã nhúng và đặt nó vào trang web mong muốn.

Với MyTaskHelper, tất cả những gì bạn cần để tạo biểu mẫu web là trình duyệt và kết nối Internet. Tính năng quan trọng Dịch vụ này là tất cả các bản ghi được người dùng nhập vào biểu mẫu đăng ký sẽ được lưu trữ trên các máy chủ trong hệ thống của chúng tôi trong cơ sở dữ liệu đặc biệt được tạo cùng với biểu mẫu. Bạn không chỉ có thể xem thông tin được thu thập bằng bất kỳ biểu mẫu nào. Mỗi người dùng có quyền truy cập vào các tùy chọn như nhóm dữ liệu, sắp xếp cơ sở dữ liệu, tìm kiếm và lọc.

Xin chào! Bây giờ chúng ta sẽ cố gắng triển khai nhiều nhất đăng ký đơn giản trên trang web với sử dụng PHP+ MySQL. Để thực hiện việc này, Apache phải được cài đặt trên máy tính của bạn. Nguyên tắc làm việc của tập lệnh của chúng tôi được hiển thị dưới đây.

1. Hãy bắt đầu bằng cách tạo bảng người dùng trong cơ sở dữ liệu. Nó sẽ chứa dữ liệu người dùng (đăng nhập và mật khẩu). Hãy truy cập phpmyadmin (nếu bạn đang tạo cơ sở dữ liệu trên PC của mình http://localhost/phpmyadmin/). Chúng ta tạo một bảng user , nó sẽ có 3 trường.

Tôi tạo nó trong cơ sở dữ liệu mysql, bạn có thể tạo trong cơ sở dữ liệu khác. Tiếp theo, thiết lập các giá trị như trong hình:

2. Cần có kết nối với bảng này. Hãy tạo một tệp bd.php. Nội dung của nó:

Trong trường hợp của tôi nó trông như thế này:

Lưu bd.php .
Tuyệt vời! Chúng tôi có một bảng trong cơ sở dữ liệu và kết nối với nó. Bây giờ bạn có thể bắt đầu tạo một trang mà người dùng sẽ để lại dữ liệu của họ.

3. Tạo tệp reg.php có nội dung (tất cả các nhận xét bên trong):



Sự đăng ký


Sự đăng ký


Đăng nhập của bạn:




Mật khẩu của bạn:








4. Tạo một tệp sẽ nhập dữ liệu vào cơ sở dữ liệu và lưu người dùng. save_user.php (bình luận bên trong):

5. Bây giờ người dùng của chúng tôi có thể đăng ký! Tiếp theo, bạn cần tạo một “cánh cửa” cho những người dùng đã đăng ký để vào trang web. index.php (bình luận bên trong):




Trang chủ


Trang chủ


Đăng nhập của bạn:


Mật khẩu của bạn:






Đăng ký



Được rồi, mọi chuyện đã kết thúc rồi! Bài học có thể nhàm chán nhưng rất hữu ích. Ở đây chỉ có ý tưởng đăng ký được hiển thị, sau đó bạn có thể cải thiện nó: thêm bảo mật, thiết kế, trường dữ liệu, tải hình đại diện, đăng xuất khỏi tài khoản của bạn (để thực hiện việc này, chỉ cần hủy các biến khỏi phiên bằng chức năng chưa đặt) và sớm. Chúc may mắn!

Tôi đã kiểm tra mọi thứ, nó hoạt động bình thường!

Đây là một ví dụ về mẫu đăng ký sử dụng HTML. Tại đây, người lập trình có thể hiển thị bao nhiêu "Trường văn bản" tùy thích. Tên ở phía trước Trường văn bản được gọi là "Nhãn". Tại kết thúc của biểu mẫu đăng ký, phía sau có nút "THÊM" mà bất kỳ liên kết mong muốn nào cũng có thể được sử dụng. Sau khi nhấp vào nó sẽ chuyển hướng đến đích cụ thể đó.

Đây là một ví dụ về mẫu đăng ký sử dụng HTML. Tại đây, lập trình viên có thể hiển thị bao nhiêu "Trường văn bản" tùy thích. Tên ở phía trước Trường văn bản được gọi là "Nhãn". Ở cuối biểu mẫu đăng ký, phía sau có nút "THÊM" mà bất kỳ liên kết mong muốn nào cũng có thể được sử dụng. Sau khi nhấp vào nó sẽ chuyển hướng đến đích cụ thể đó. HTML Mã cho Mẫu đăng ký

Đây là một ví dụ về mẫu đăng ký sử dụng HTML. Tại đây, lập trình viên có thể hiển thị bao nhiêu "Trường văn bản" tùy thích. Tên ở phía trước Trường văn bản được gọi là "Nhãn". Ở cuối biểu mẫu đăng ký, phía sau có nút "THÊM" mà bất kỳ liên kết mong muốn nào cũng có thể được sử dụng. Sau khi nhấp vào nó sẽ chuyển hướng đến đích cụ thể đó.

Trong ví dụ này chúng tôi đã hiển thị 9 "Trường văn bản". Kích thước của Text Box cũng có thể được thay đổi theo yêu cầu.

đăng ký.html

Mẫu đăng ký Mẫu đăng ký

Nhận dạng:
Tên:
Khóa học:
Chi nhánh:
Rollno:
Địa chỉ email:
Tên tài khoản:
Về chúng tôi:
Mật khẩu:

Bạn có biết rằng bạn có thể sử dụng dịch vụ Google, tạo biểu mẫu đăng ký cho trang web của bạn chỉ bằng một cú nhấp chuột? Mọi người có tài khoản Google, có thể nhấp vào nút và đăng nhập ngay vào ứng dụng của bạn, bằng email, tên và ảnh của anh ấy.

Dịch vụ này được gọi là đăng nhập liên kết và được xây dựng trên giao thức OAuth2. Cái này quá trình khó khăn, bao gồm việc chia sẻ dữ liệu giữa máy chủ của bạn và Google, nhưng chúng tôi sẽ giao tất cả công việc đó cho thư viện PHP của Google, thư viện này sẽ xử lý hầu hết mọi thứ phía máy chủ.

Sử dụng dịch vụ này, bạn có thể đơn giản hóa đáng kể quy trình ủy quyền/đăng ký cho bạn và người dùng của bạn. Dưới đây là một số lợi ích:

  • Không cần tạo và xác thực các biểu mẫu đăng ký và ủy quyền;
  • Không cần tính năng khôi phục mật khẩu bị quên;
  • Ủy quyền/đăng ký rất đơn giản - bạn sẽ nhận được e-mail người, tên và ảnh chỉ bằng một cú nhấp chuột;
  • Địa chỉ đã được Google xác minh nên bạn không cần gửi tin nhắn để xác minh.
  • Bảo mật nghiêm túc từ Google.

Tất nhiên, điều này sẽ chỉ hoạt động nếu người đó có tài khoản Google, vì vậy sẽ hợp lý hơn nếu sử dụng dịch vụ này như một sự bổ sung cho hệ thống hiện có sự đăng ký. Vậy hãy bắt đầu!

Cài đặt

Bước đầu tiên là tạo một ứng dụng mới thông qua Bảng điều khiển API của Google. Làm theo hướng dẫn để nhận thông tin thêm. Sau khi quá trình hoàn tất, hãy sao chép các khóa nhận được vào tệp setup.php.

Chạy mã từ lược đồ.sql (bạn có thể tìm thấy mã trong kho lưu trữ) trong PhpMyAdmin hoặc một công cụ tương tự. Nó sẽ tạo một bảng glogin_users trong cơ sở dữ liệu, bảng này sẽ được sử dụng để lưu trữ thông tin về tài khoản người dùng trong ứng dụng của bạn. Sau đó, viết chi tiết kết nối cơ sở dữ liệu của bạn vào setup.php.

PHP

Chúng tôi tạo một biểu mẫu đăng nhập bằng cách sử dụng thông tin đăng nhập Liên kết của Google. Điều này có nghĩa là khách truy cập trang web của bạn nhấp vào liên kết đến trang Google, nơi họ cấp cho ứng dụng quyền truy cập vào tài khoản của mình và sau đó sẽ được chuyển hướng trở lại. Sau đó, bạn nhận được mã thông báo truy cập mà bạn có thể sử dụng để yêu cầu thông tin về họ. Dưới đây là mô tả đơn giản về quy trình ủy quyền:

  • Khi người dùng nhấp vào nút "Đăng nhập bằng Google" trong bản demo của chúng tôi, họ sẽ được đưa đến trang đăng nhập của Google nơi họ xem ứng dụng của chúng tôi yêu cầu những quyền gì.
  • Sau khi cho phép truy cập vào ứng dụng này, họ sẽ được chuyển hướng trở lại trang web, trong khi tham số đặc biệt mã sốđược chuyển vào URL. Ứng dụng của chúng tôi sẽ sử dụng mã này để nhận mã thông báo truy cập;
  • Sử dụng mã thông báo, ứng dụng sẽ yêu cầu thông tin về người dùng, thông tin này được lưu trữ trong cơ sở dữ liệu.

Để đọc và chèn vào cơ sở dữ liệu, tôi sử dụng thư viện Idiorm nhỏ mà bạn có thể tìm thấy trong thư mục thư viện.

Mã PHP của chúng tôi được tổ chức như sau:

  • index.php là tệp ứng dụng chính;
  • setup.php - tệp này chứa thông tin kết nối cơ sở dữ liệu và các khóa nhận được từ Bảng điều khiển API của Google;
  • Thư mục thư viện - chứa thư viện Idiorm, PHP Thư viện Google và một lớp để bao gồm dấu thời gian tương đối.

Chúng ta hãy xem đoạn mã ở đầu file index.php:

yêu cầu "setup.php"; // Tạo một cái mới API Google khách hàng
$client = apiClient mới();
//$client->setApplicationName("Tutorialzine"); // Cấu hình nó
$client -> setClientId ($client_id);
$client -> setClientSecret ($client_secret);
$client -> setDeveloperKey ($api_key);
$client -> setRedirectUri ($redirect_url);
$client -> setApprovalPrompt ( sai );
$oauth2 = apiOauth2Service mới ($ client ) ; // Tham số mã biểu thị rằng đây là
// chuyển hướng từ google, mang mã tạm thời
if (isset ($_GET [ "code" ] ) ) ( // Phương thức này sẽ lấy mã thông báo truy cập thực tế từ Google,
// để chúng ta có thể yêu cầu thông tin người dùng
$client -> xác thực () ; // Lấy dữ liệu người dùng
$info = $oauth2 -> thông tin người dùng -> get () ; // Tìm người này trong cơ sở dữ liệu
$person = ORM::for_table ("glogin_users") -> ở đâu ("email" , $info [ "email" ] ) -> find_one () ; nếu (! $person ) (
// Không tìm thấy người như vậy. Đăng ký! $person = ORM::for_table("glogin_users")->create(); // Đặt các thuộc tính sẽ được chèn vào db
$person -> email = $info [ "email" ] ;
$person -> name = $info [ "name" ] ;

if (isset ($thông tin [ "hình ảnh" ] ) ) (
// Nếu người dùng đã đặt google công khaiảnh tài khoản
$person -> photo = $info [ "picture" ] ;
}
khác(
// nếu không thì sử dụng mặc định
$person -> photo = "assets/img/default_avatar.jpg" ;
) // chèn bản ghi vào cơ sở dữ liệu
$person -> lưu () ;
) // Lưu id người dùng vào phiên
$_SESSION [ "user_id" ] = $person -> id () ; // Chuyển hướng đến URL demo cơ sở
header("Vị trí: $redirect_url");
lối ra ;
) //Xử lý đăng xuất
if (isset ($_GET [ "đăng xuất" ] ) ) (
bỏ đặt ($_SESSION [ "user_id" ] );
) $người = null ;
if (isset ($_SESSION [ "user_id" ] ) ) (
// Lấy người từ cơ sở dữ liệu
$person = ORM::for_table("glogin_users") -> find_one($_SESSION["user_id"]) ;
}

Điều đang xảy ra ở đây là chúng tôi đang kiểm tra mã trong $_ NHẬN thông số. Như tôi đã đề cập ở trên, cài đặt này được Google thiết lập khi người dùng được chuyển hướng trở lại sau khi cho phép truy cập vào ứng dụng. Sau đó chúng tôi yêu cầu thông tin về người dùng và ghi lại thông tin đó vào cơ sở dữ liệu. ID người dùng (giá trị ID trong cơ sở dữ liệu) được ghi vào phiên. Nó được lưu giữa các yêu cầu và được sử dụng làm cờ cho biết người dùng đã được xác thực

Nếu bạn muốn tìm hiểu thêm về OAuth, hãy đọc thông tin liên quan từ Google về chủ đề này. Ở đó bạn cũng có thể thấy một bảng chứa các trường mà phương thức get() trả về.

Đến cuối cùng, chúng tôi xác định biến $person. Nó chứa một đối tượng được thư viện Idiorm trả về, với các thuộc tính cho từng cột trong bảng glogin_users. Bạn có thể xem đối tượng này được sử dụng như thế nào trong phần tiếp theo.

HTML

Mã HTML cho ví dụ của chúng tôi nằm ở cuối tệp index.php. Do đó, chúng ta có quyền truy cập vào đối tượng $person, điều này rất hữu ích khi hiển thị tên và ảnh của người dùng. Bản thân trang này là tài liệu chuẩn HTML5:





Biểu mẫu đăng nhập do Google cung cấp




mẫu đăng nhập