Paglikha ng isang form sa HTML. Pagpapadala ng data ng form Itakda ang form ng pahintulot sa html

Sa artikulong ito matututunan mo paano gumawa ng registration at authorization form gamit ang HTML, JavaScript, PHP at MySql. Ang ganitong mga form ay ginagamit sa halos bawat website, anuman ang uri nito. Nilikha ang mga ito para sa isang forum, isang online na tindahan, mga social network (tulad ng Facebook, Twitter, Odnoklassniki) at marami pang ibang uri ng mga site.

Kung mayroon kang website sa iyong lokal na computer, inaasahan kong mayroon ka na . Kung wala ito, walang gagana.

Paglikha ng talahanayan sa Database

Upang maipatupad ang pagpaparehistro ng gumagamit, una sa lahat kailangan namin ng isang Database. Kung mayroon ka na nito, mahusay, kung hindi, kailangan mong likhain ito. Sa artikulo, ipinapaliwanag ko nang detalyado kung paano ito gagawin.

At kaya, mayroon kaming isang Database (pinaikling DB), ngayon kailangan naming lumikha ng isang talahanayan mga gumagamit kung saan idaragdag namin ang aming mga nakarehistrong user.

Ipinaliwanag ko rin kung paano lumikha ng isang talahanayan sa isang database sa artikulo. Bago lumikha ng isang talahanayan, kailangan nating matukoy kung anong mga patlang ang nilalaman nito. Ang mga field na ito ay tumutugma sa mga field mula sa registration form.

Kaya, naisip namin, naisip kung anong mga patlang ang mayroon ang aming form at lumikha ng isang talahanayan mga gumagamit kasama ang mga field na ito:

• id- Identifier. Patlang id Ang bawat talahanayan sa database ay dapat magkaroon nito.
• pangalan- Upang i-save ang pangalan.
• huling pangalan- Upang mapanatili ang apelyido.
• email- Upang i-save ang postal address. Gagamitin namin ang e-mail bilang login, kaya ang field na ito ay dapat na natatangi, ibig sabihin, mayroong NATATANGING index.
• email_status- Field upang ipahiwatig kung ang mail ay nakumpirma o hindi. Kung nakumpirma ang mail, magkakaroon ito ng halaga na 1, kung hindi, ang halaga ay 0.
• password- Upang i-save ang password.

Kung gusto mong magkaroon ng ibang field ang iyong registration form, maaari mo ring idagdag ang mga ito dito.

Ayan, table namin mga gumagamit handa na. Lumipat tayo sa susunod na yugto.

Koneksyon sa Database

Nagawa namin ang database, ngayon kailangan naming kumonekta dito. Kami ay kumonekta gamit ang PHP extension MySQLi.

Sa folder ng aming site, lumikha ng isang file na may pangalan dbconnect.php, at isulat ang sumusunod na script dito:

Error sa koneksyon ng DB. Paglalarawan ng error: ".mysqli_connect_error()."

"; exit(); ) // Itakda ang connection encoding $mysqli->set_charset("utf8"); // Para sa kaginhawahan, magdagdag ng variable dito na maglalaman ng pangalan ng aming site $address_site = "http://testsite .lokal" ; ?>

Ang file na ito dbconnect.php ay kailangang konektado sa mga humahawak ng form.

Pansinin ang variable $address_site, dito ko ipinahiwatig ang pangalan ng aking test site na aking gagawin. Mangyaring ipahiwatig ang pangalan ng iyong site nang naaayon.

Istraktura ng site

Ngayon tingnan natin ang istruktura ng HTML ng aming site.

Ililipat namin ang header at footer ng site sa magkahiwalay na mga file, header.php At footer.php. Isasama namin sila sa lahat ng pahina. Lalo na sa pangunahing pahina (file index.php), sa pahinang may registration form (file form_register.php) at sa pahinang may form ng pahintulot (file form_auth.php).

I-block gamit ang aming mga link, pagpaparehistro At awtorisasyon, idagdag ang mga ito sa header ng site upang maipakita ang mga ito sa lahat ng pahina. Isang link ang ilalagay sa pahina ng registration form(file form_register.php) at ang isa pa sa pahinang may form ng awtorisasyon(file form_auth.php).

Mga nilalaman ng header.php file:

Pangalan ng aming site

Bilang resulta, ganito ang hitsura ng aming pangunahing pahina:

Siyempre, maaaring may ganap na kakaibang istraktura ang iyong site, ngunit hindi ito mahalaga para sa amin ngayon. Ang pangunahing bagay ay mayroong mga link (mga pindutan) para sa pagpaparehistro at awtorisasyon.

Ngayon ay lumipat tayo sa form ng pagpaparehistro. Tulad ng naiintindihan mo na, mayroon kami nito sa file form_register.php.

Pumunta sa Database (sa phpMyAdmin), buksan ang istraktura ng talahanayan mga gumagamit at tingnan kung anong mga field ang kailangan natin. Nangangahulugan ito na kailangan namin ng mga field para sa pagpasok ng una at apelyido, isang field para sa pagpasok ng postal address (Email) at isang field para sa pagpasok ng password. At para sa mga layuning pangseguridad, magdaragdag kami ng field para sa pagpasok ng captcha.

Sa server, bilang isang resulta ng pagproseso ng form ng pagpaparehistro, iba't ibang mga error ang maaaring mangyari dahil sa kung saan ang gumagamit ay hindi makakapagrehistro. Samakatuwid, upang maunawaan ng user kung bakit nabigo ang pagpaparehistro, kinakailangang magpakita ng mga mensahe tungkol sa mga error na ito.

Bago ipakita ang form, magdagdag ng block upang ipakita ang mga mensahe ng error mula sa session.

At isa pang bagay, kung ang user ay awtorisado na, at dahil sa pag-usisa siya ay direktang pumunta sa pahina ng pagpaparehistro sa pamamagitan ng pagsulat sa address bar ng browser site_address/form_register.php, pagkatapos sa kasong ito, sa halip na ang form ng pagpaparehistro, magpapakita kami ng isang header na nagsasaad na siya ay nakarehistro na.

Sa pangkalahatan, ang file code form_register.php nakuha namin ito:

Nakarehistro ka na

Sa browser, ganito ang hitsura ng page na may registration form:

Sa pamamagitan ng paggamit kinakailangang katangian, ginawa naming mandatoryo ang lahat ng field.

Bigyang-pansin ang registration form code kung saan ipinapakita ang captcha:

Tinukoy namin ang path sa file sa halaga ng src attribute para sa imahe captcha.php, na bumubuo ng captcha na ito.

Tingnan natin ang file code captcha.php:

Ang code ay mahusay na nagkomento, kaya ako ay tumutok sa isang punto lamang.

Sa loob ng isang function imageTtfText(), ang path patungo sa font ay tinukoy verdana.ttf. Kaya para gumana ng tama ang captcha, dapat tayong gumawa ng folder mga font, at ilagay ang font file doon verdana.ttf. Maaari mong mahanap ito at i-download ito mula sa Internet, o kunin ito mula sa archive kasama ang mga materyales ng artikulong ito.

Tapos na kami sa HTML structure, oras na para magpatuloy.

Sinusuri ang bisa ng email gamit ang jQuery

Kailangang suriin ng anumang form ang bisa ng inilagay na data, kapwa sa panig ng kliyente (gamit ang JavaScript, jQuery) at sa panig ng server.

Dapat nating bigyan ng espesyal na pansin ang field ng Email. Napakahalaga na valid ang inilagay na postal address.

Para sa input field na ito, itinakda namin ang uri ng email (type="email"), ito ay bahagyang nagbabala sa amin laban sa mga maling format. Ngunit hindi ito sapat, dahil sa pamamagitan ng inspektor ng code na ibinibigay sa atin ng browser, madali nating mababago ang halaga ng katangian uri Sa email sa text, at iyon nga, hindi na magiging valid ang aming tseke.

At sa kasong ito, dapat tayong gumawa ng mas maaasahang pagsusuri. Upang gawin ito, gagamitin namin ang library ng jQuery mula sa JavaScript.

Upang ikonekta ang jQuery library, sa file header.php sa pagitan ng mga tag , bago ang pansarang tag , idagdag ang linyang ito:

Kaagad pagkatapos ng linyang ito, idaragdag namin ang email validation code. Dito kami ay magdagdag ng isang code upang suriin ang haba ng inilagay na password. Ang haba nito ay dapat na hindi bababa sa 6 na character.

Gamit ang script na ito, tinitingnan namin ang inilagay na email address para sa bisa. Kung nagpasok ang user ng maling Email, nagpapakita kami ng mensahe ng error tungkol dito at hindi pinagana ang button na isumite ang form. Kung maayos ang lahat, aalisin namin ang error at i-activate ang button na isumite ang form.

At kaya, tapos na kami sa pagpapatunay ng form sa panig ng kliyente. Ngayon ay maaari na naming ipadala ito sa server, kung saan gagawa din kami ng ilang mga pagsusuri at magdagdag ng data sa database.

Pagpaparehistro ng user

Ipinapadala namin ang form sa file para sa pagproseso magparehistro.php, sa pamamagitan ng POST method. Ang pangalan ng handler file na ito ay tinukoy sa attribute value aksyon. At ang paraan ng pagpapadala ay tinukoy sa halaga ng katangian paraan.

Buksan ang file na ito magparehistro.php at ang unang bagay na kailangan nating gawin ay magsulat ng function ng paglulunsad ng session at ikonekta ang file na ginawa natin kanina dbconnect.php(Sa file na ito gumawa kami ng koneksyon sa database). At saka, agad nating ideklara ang mga cell error_messages At tagumpay_mensahe sa global session array. SA error_mesages itatala namin ang lahat ng mga mensahe ng error na nangyayari sa pagpoproseso ng form, at sa tagumpay_mensahe, magre-record kami ng mga masasayang mensahe.

Bago tayo magpatuloy, dapat nating suriin naisumite ba ang form?. Maaaring tingnan ng isang attacker ang value ng attribute aksyon mula sa form, at alamin kung aling file ang nagpoproseso ng form na ito. At maaaring may ideya siyang direktang pumunta sa file na ito sa pamamagitan ng pag-type ng sumusunod na address sa address bar ng browser: http://site_address/register.php

Kaya kailangan nating suriin para sa isang cell sa pandaigdigang POST array na ang pangalan ay tumutugma sa pangalan ng aming "Register" na button mula sa form. Sa ganitong paraan, tinitingnan namin kung ang "Register" na buton ay na-click o hindi.

Kung susubukan ng isang umaatake na direktang pumunta sa file na ito, makakatanggap sila ng mensahe ng error. Hayaan akong ipaalala sa iyo na ang $address_site variable ay naglalaman ng pangalan ng site at ito ay idineklara sa file dbconnect.php.

Error! pangunahing pahina.

"); } ?>

Ang halaga ng captcha sa session ay idinagdag noong ito ay nabuo, sa file captcha.php. Bilang paalala, ipapakita ko sa iyo muli ang piraso ng code na ito mula sa file captcha.php, kung saan idinaragdag ang halaga ng captcha sa session:

Ngayon ay magpatuloy tayo sa mismong pag-verify. Nasa file magparehistro.php, sa loob ng if block, kung saan tinitingnan namin kung na-click ang "Register" button, o kung saan nakasaad ang komento "" // (1) Space para sa susunod na piraso ng code"nagsusulat kami:

//Suriin ang natanggap na captcha //Trim ang mga puwang mula sa simula at dulo ng linya $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Ihambing ang natanggap na value sa value mula sa session. if($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Kung hindi tama ang captcha, ibabalik namin ang user sa pahina ng pagpaparehistro, at doon kami magpapakita ng mensahe ng error sa kanya na mali ang captcha niyang ipinasok . $error_message = "

Error! Maling captcha ang ipinasok mo

"; // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] = $error_message; // Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: " .$address_site ."/form_register.php"); //Ihinto ang script exit(); // (2) Ilagay para sa susunod na piraso ng code )else( //Kung ang captcha ay hindi naipasa o ito ay walang laman na exit( "

Error! Walang verification code, iyon ay, isang captcha code. Maaari kang pumunta sa pangunahing pahina.

"); }

Susunod, kailangan nating iproseso ang natanggap na data mula sa POST array. Una sa lahat, kailangan nating suriin ang mga nilalaman ng pandaigdigang POST array, iyon ay, kung mayroong mga cell doon na ang mga pangalan ay tumutugma sa mga pangalan ng mga input field mula sa aming form.

Kung umiiral ang cell, pagkatapos ay pinuputol namin ang mga puwang mula sa simula at dulo ng linya mula sa cell na ito, kung hindi, ire-redirect namin ang user pabalik sa pahina na may form ng pagpaparehistro.

Susunod, pagkatapos naming i-trim ang mga puwang, idagdag namin ang linya sa variable at suriin ang variable na ito para sa kawalan ng laman, pagkatapos ay magpatuloy kami, kung hindi, ire-redirect namin ang gumagamit pabalik sa pahina na may form ng pagpaparehistro.

I-paste ang code na ito sa tinukoy na lokasyon" // (2) Space para sa susunod na piraso ng code".

/* Suriin kung mayroong data na ipinadala mula sa form sa pandaigdigang array $_POST at balutin ang isinumiteng data sa mga regular na variable.*/ if(isset($_POST["first_name"]))( //Trim ang mga puwang mula sa simula at dulo ng string $first_name = trim($_POST["first_name"]); //Suriin ang variable para sa kawalan kung(!empty($first_name))( // Para sa kaligtasan, i-convert ang mga espesyal na character sa HTML entity $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Ilagay ang iyong pangalan

Nawawala ang field ng pangalan

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) if( isset($_POST["apelyido"]))( //Puwang sa simula at dulo ng linya $last_name = trim($_POST["apelyido"]); if(!empty($last_name)) ( // Para sa seguridad , i-convert ang mga espesyal na character sa HTML entity $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Pakilagay ang iyong apelyido

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) )iba ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Nawawala ang field ng apelyido

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) if( isset($_POST["email"]))( //Trim space mula sa simula at dulo ng linya $email = trim ($_POST["email"]); if(!empty($email)) ($email = htmlspecialchars ($email, ENT_QUOTES); // (3) Lokasyon ng code para sa pagsuri sa format ng email address at sa pagiging natatangi nito )else( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .="

Ilagay ang iyong email

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) )iba ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) if( isset($_POST["password"]))( //Trim space mula sa simula at dulo ng string $password = trim ($_POST["password"]); if(!empty($password)) ($password = htmlspecialchars ($password, ENT_QUOTES); //I-encrypt ang password $password = md5($password."top_secret");else( //I-save ang mensahe ng error sa session. $_SESSION["error_messages"] . = "

Ipasok ang iyong password

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) )iba ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) // (4) Lugar para sa code para sa pagdaragdag ng user sa database

Ang partikular na kahalagahan ay ang larangan email. Dapat nating suriin ang format ng natanggap na postal address at ang pagiging natatangi nito sa database. Ibig sabihin, mayroon bang user na may parehong email address na nakarehistro na?

Sa tinukoy na lokasyon" // (3) Code location para tingnan ang format ng postal address at ang uniqueness nito" idagdag ang sumusunod na code:

//Suriin ang format ng natanggap na email address gamit ang isang regular na expression $reg_email = "/^**@(+(*+)*\.)++/i"; //Kung ang format ng natanggap na email address ay hindi tumutugma sa regular na expression kung(!preg_match($reg_email, $email))( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Naglagay ka ng maling email

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) // Sinusuri namin kung ang naturang address ay nasa database na = $mysqli->query("PUMILI `email` MULA sa `users` WHERE `email`="".$email."""); ay eksaktong isang row, na nangangahulugang ang user na may ganitong email address ay nakarehistro na if($result_query->num_rows == 1)( //Kung hindi false ang nakuhang resulta kung(($row = $result_query->fetch_assoc() ) != false) ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Nakarehistro na ang isang user na may ganitong email address

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); )else( // I-save ang mensahe ng error sa session na $_SESSION["error_messages"] .="

Error sa query sa database

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); ) /* pagsasara ng seleksyon */ $ result_query-> close(); //Stop the script exit() /* closing the selection */ $result_query->close();

At kaya, tapos na kami sa lahat ng mga pagsusuri, oras na para idagdag ang user sa database. Sa tinukoy na lokasyon" // (4) Lugar para sa code para sa pagdaragdag ng user sa database" idagdag ang sumusunod na code:

//Query para magdagdag ng user sa database $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name ." ", "".$email.", "".$password."")"); if(!$result_query_insert)( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Error sa kahilingang magdagdag ng user sa database

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); )iba( $_SESSION["success_messages"] = "

Matagumpay na nakumpleto ang pagpaparehistro!!!
Ngayon ay maaari kang mag-log in gamit ang iyong username at password.

"; //Ipadala ang user sa header ng pahina ng awtorisasyon("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); ) /* Pagkumpleto ng kahilingan */ $ result_query_insert-> close(); //Isara ang koneksyon sa database $mysqli->close();

Kung may naganap na error sa kahilingang magdagdag ng user sa database, nagdaragdag kami ng mensahe tungkol sa error na ito sa session at ibabalik namin ang user sa pahina ng pagpaparehistro.

Kung hindi, kung naging maayos ang lahat, nagdaragdag din kami ng mensahe sa session, ngunit sa pagkakataong ito ay mas kaaya-aya, ibig sabihin, sasabihin namin sa user na matagumpay ang pagpaparehistro. At nire-redirect namin ito sa page na may authorization form.

Ang script para sa pagsuri sa format ng email address at haba ng password ay nasa file header.php, kaya malalapat din ito sa mga field mula sa form na ito.

Sinimulan din ang session sa file header.php, kaya sa file form_auth.php Hindi na kailangang magsimula ng session, dahil magkakaroon tayo ng error.

Tulad ng nasabi ko na, gumagana din dito ang script para sa pagsuri sa format ng email address at haba ng password. Samakatuwid, kung ang gumagamit ay nagpasok ng isang maling email address o maikling password, agad siyang makakatanggap ng isang mensahe ng error. Isang buton pumasok magiging hindi aktibo.

Pagkatapos ayusin ang mga error, ang pindutan pumasok nagiging aktibo, at magagawa ng user na isumite ang form sa server, kung saan ito ipoproseso.

Pahintulot ng user

Upang i-attribute ang halaga aksyon ang kapansanan sa pahintulot ay may tinukoy na file auth.php, nangangahulugan ito na ipoproseso ang form sa file na ito.

At kaya, buksan ang file auth.php at sumulat ng code upang iproseso ang form ng pahintulot. Ang unang bagay na kailangan mong gawin ay magsimula ng isang session at ikonekta ang file dbconnect.php upang kumonekta sa database.

//Ipahayag ang isang cell upang magdagdag ng mga error na maaaring mangyari kapag pinoproseso ang form. $_SESSION["error_messages"] = ""; //Magdeklara ng cell para sa pagdaragdag ng matagumpay na mga mensahe $_SESSION["success_messages"] = "";

/* Suriin kung ang form ay isinumite, iyon ay, kung ang Login button ay na-click. Kung oo, pagkatapos ay lumipat kami, kung hindi, pagkatapos ay magpapakita kami ng isang mensahe ng error sa gumagamit na nagpapahiwatig na na-access niya ang pahinang ito nang direkta. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Space para sa susunod na piraso ng code )else( exit("

Error! Direkta mong na-access ang page na ito, kaya walang data na ipoproseso. Maaari kang pumunta sa pangunahing pahina.

"); }

//Suriin ang natanggap na captcha if(isset($_POST["captcha"]))( //Trim ang mga puwang mula sa simula at dulo ng linya $captcha = trim ($_POST["captcha"]); if(! empty($captcha ))( //Ihambing ang natanggap na value sa value mula sa session. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // Kung mali ang captcha , ibabalik namin ang user sa pahina ng awtorisasyon, at doon ay magpapakita kami ng mensahe ng error sa kanya na mali ang ipinasok niyang captcha $error_message = ".

Error! Maling captcha ang ipinasok mo

"; // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] = $error_message; // Ibalik ang user sa authorization page header("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: " .$address_site ."/form_auth.php"); //Ihinto ang paglabas ng script( )else( $error_message = "

Error! Hindi dapat walang laman ang captcha entry field.

"; // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] = $error_message; // Ibalik ang user sa authorization page header("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: " .$address_site ."/form_auth.php"); //Stop the script exit(); //(2) Lugar para sa pagproseso ng email address //(3) Lugar para sa pagpoproseso ng password //(4) Lugar para sa pagbuo isang kahilingan sa database )else ( // Kung ang captcha ay hindi naipasa exit("

Error! Walang verification code, iyon ay, isang captcha code. Maaari kang pumunta sa pangunahing pahina.

"); }

Kung naipasok ng user ang verification code nang tama, pagkatapos ay magpapatuloy kami, kung hindi, ibabalik namin siya sa pahina ng pahintulot.

Sinusuri ang mailing address

//Trim spaces mula sa simula at dulo ng linya $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Suriin ang format ng natanggap na email address gamit ang isang regular na expression $ reg_email = " /^**@(+(*+)*\.)++/i"; //Kung ang format ng natanggap na email address ay hindi tumutugma sa regular na expression kung(!preg_match($reg_email, $email ))( // I-save sa mensahe ng error sa session. $_SESSION["error_messages"] .= "

Naglagay ka ng maling email

"; //Ibalik ang user sa authorization page header("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); //Ihinto ang script exit(); ) )iba ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Ang field para sa pagpasok ng postal address (email) ay hindi dapat walang laman.

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_register.php"); //Ihinto ang script exit(); ) )iba ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Nawawala ang field ng pag-input ng email

"; //Ibalik ang user sa authorization page header("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); //Ihinto ang script exit(); ) // (3) Lugar sa pagpoproseso ng password

Kung naglagay ang user ng email address sa maling format o walang laman ang value ng field ng email address, ibabalik namin siya sa page ng awtorisasyon kung saan nagpapakita kami ng mensahe tungkol dito.

Pag-verify ng password

Ang susunod na field na ipoproseso ay ang field ng password. Sa tinukoy na lugar" //(3) Lugar para sa pagproseso ng password", sumulat kami:

If(isset($_POST["password"]))( //Turiin ang mga puwang mula sa simula at dulo ng string $password = trim ($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); //I-encrypt ang password $password = md5($password."top_secret");else( //I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Ipasok ang iyong password

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); //Ihinto ang script exit(); ) )iba ( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Nawawala ang field ng password

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); //Ihinto ang script exit(); )

Dito ginagamit namin ang function na md5() upang i-encrypt ang natanggap na password, dahil ang aming mga password ay nasa naka-encrypt na form sa database. Isang karagdagang lihim na salita sa pag-encrypt, sa aming kaso " sobrang sekreto" ay dapat ang ginamit noong nirerehistro ang user.

Ngayon ay kailangan mong gumawa ng isang query sa database upang pumili ng isang user na ang email address ay katumbas ng natanggap na email address at ang password ay katumbas ng natanggap na password.

//Query sa database batay sa pagpili ng user. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AT password = "".$password."""); if(!$result_query_select)( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Error sa query kapag pumipili ng user mula sa database

"; //Ibalik ang user sa header ng pahina ng pagpaparehistro("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); //Ihinto ang script exit(); )else( //Suriin kung walang user na may ganoong data sa database, pagkatapos ay magpakita ng mensahe ng error kung($result_query_select->num_rows == 1)( // Kung ang ipinasok na data ay tumutugma sa data mula sa database, pagkatapos ay i-save ang login at password sa array ng mga session $_SESSION["email"] = $_SESSION["password"] = $password; //Ibalik ang user sa header ng pangunahing pahina("HTTP/1.1 301 Permanenteng Inilipat" ); ."/index.php"); )else( // I-save ang mensahe ng error sa session. $_SESSION["error_messages"] .= "

Maling login at/o password

"; //Ibalik ang user sa authorization page header("HTTP/1.1 301 Permanenteng Inilipat"); header("Lokasyon: ".$address_site."/form_auth.php"); //Ihinto ang script exit(); ) )

Lumabas mula sa site

At ang huling bagay na ipinapatupad namin ay pamamaraan para sa pag-alis sa site. Sa ngayon, sa header ay ipinapakita namin ang mga link sa pahina ng pahintulot at pahina ng pagpaparehistro.

Sa header ng site (file header.php), gamit ang session na tinitingnan namin kung awtorisado na ang user. Kung hindi, ipinapakita namin ang mga link sa pagpaparehistro at awtorisasyon, kung hindi man (kung siya ay awtorisado), pagkatapos ay sa halip na mga link sa pagpaparehistro at awtorisasyon ay nagpapakita kami ng isang link Lumabas.

Binagong piraso ng code mula sa file header.php:

Pagpaparehistro

Lumabas

Kapag nag-click ka sa exit link mula sa site, dadalhin kami sa isang file logout.php, kung saan sinisira lang namin ang mga cell na may email address at password mula sa session. Pagkatapos nito, ibabalik namin ang gumagamit pabalik sa pahina kung saan na-click ang link labasan.

File code logout.php:

Iyon lang. Ngayon alam mo na kung paano ipatupad at iproseso ang mga form sa pagpaparehistro at awtorisasyon user sa iyong website. Ang mga form na ito ay matatagpuan sa halos bawat website, kaya dapat malaman ng bawat programmer kung paano likhain ang mga ito.

Natutunan din namin kung paano i-validate ang data ng input, kapwa sa panig ng kliyente (sa browser, gamit ang JavaScript, jQuery) at sa panig ng server (gamit ang PHP). Natuto din kami magpatupad ng pamamaraan para sa pag-alis sa site.

Ang lahat ng mga script ay nasubok at gumagana. Maaari mong i-download ang archive gamit ang mga file ng maliit na site na ito mula sa link na ito.

Sa hinaharap, susulat ako ng isang artikulo kung saan ilalarawan ko. At plano ko ring magsulat ng isang artikulo kung saan ako ay magpapaliwanag (nang hindi nagre-reload ng pahina). Kaya, upang manatiling alam tungkol sa pagpapalabas ng mga bagong artikulo, maaari kang mag-subscribe sa aking website.

Kung mayroon kang anumang mga katanungan, mangyaring makipag-ugnay sa akin, at kung mapansin mo ang anumang error sa artikulo, mangyaring ipaalam sa akin.

Lesson Plan (Bahagi 5):

1. Paglikha ng HTML structure para sa authorization form
2. Pinoproseso namin ang natanggap na data
3. Ipinapakita namin ang pagbati ng user sa header ng site

Nagustuhan mo ba ang artikulo?

Ang mga HTML form ay mga kumplikadong elemento ng interface. Kabilang sa mga ito ang iba't ibang functional na elemento: mga input field At , mga listahan <select>, mga tip, atbp. Lahat ng form code ay nakapaloob sa elemento <form> .</p> <p>Karamihan sa impormasyon sa web form ay inihahatid gamit ang elemento <input>. Upang magpasok ng isang linya ng teksto, gamitin ang elemento <input type="text">, para sa maraming linya - elemento <textarea>. Elemento <select>lumilikha ng isang dropdown na listahan.</p> <p>Elemento <label>lumilikha ng mga label para sa mga field ng form. Mayroong dalawang paraan upang pagpangkatin ang mga label at field. Kung ang field ay nasa loob ng isang elemento <label>, kung gayon ang para sa attribute ay hindi kailangang tukuyin.</p><p> <label for="lastname">Huling pangalan</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Huling pangalan</label> <label>Huling pangalan <input type="text" name="lastname"></label> </p><p>Ang mga patlang ng form ay maaaring hatiin sa mga lohikal na bloke gamit ang elemento <fieldset>. Ang bawat seksyon ay maaaring pangalanan gamit ang elemento <legend> .</p><p> <fieldset> <legend>Impormasyon sa Pakikipag-ugnayan</legend> <label>Pangalan <input type="text" required></label> <label>Email <input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>kanin. 1. Pagpapangkat ng mga field ng form</p><p>Upang gawing mas naiintindihan ng mga user ang form, idinaragdag ang text sa mga field ng form upang magbigay ng halimbawa ng data ng input. Ang ganitong uri ng text ay tinatawag na wildcard text at ginawa gamit ang placeholder attribute.</p> <p>Dapat ding i-highlight ang mga kinakailangang field. Bago ang HTML5, ginamit ang asterisk * na simbolo sa tabi ng pangalan ng field. Ang bagong detalye ay nagpapakilala ng isang espesyal na kinakailangang katangian, na nagbibigay-daan sa iyong markahan ang isang kinakailangang field sa antas ng markup. Ang katangiang ito ay nagtuturo sa browser (ipagpalagay na sinusuportahan nito ang HTML5) na huwag magpadala ng data pagkatapos mag-click ang user na isumite hanggang sa makumpleto ang mga tinukoy na field.</p><p> <input type="text" required placeholder="ang pangalan mo"> </p><p>Upang baguhin ang hitsura ng isang field ng text kapag tumatanggap ng focus, gamitin ang focus pseudo-class. Halimbawa, maaari mong gawing mas madilim ang background ng kasalukuyang field o magdagdag ng may kulay na hangganan upang gawin itong kakaiba sa iba:</p><p>Input:focus ( background: #eaeaea; )</p><p>Ang isa pang kapaki-pakinabang na katangian ng HTML5 ay ang katangian ng autofocus. Binibigyang-daan ka nitong awtomatikong itakda ang focus sa gustong paunang field para sa mga elemento <input>At <textarea>(isang elemento lamang ng bawat anyo).</p> <h2>Halimbawa ng paggawa ng registration form</h2> <div class="form-wrap"> <div class="profile"><img src='https://i0.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Pagpaparehistro</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Pangalan</label> <input type="text" name="name" required> </div> <div class="radio">Sahig <label> <input type="radio" name="sex" value="lalaki">lalaki <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="babae">babae <div class="radio-control female"></div> </label> </div> <div> <label for="email">Email</label> <input type="email" name="email" required> </div> <div> <label for="country">Isang bansa</label> <select name="country"> <option>Piliin ang iyong bansang tinitirhan</option> <option value="Russia">Russia</option> <option value="Ukraine">Ukraine</option> <option value="Belarus">Belarus</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Ipadala</button> </form> </div> <p><b>Tandaan</b><br>action="form.php" - link sa form handler file. Gumawa ng file sa UTF-8 encoding, i-upload ito sa server at palitan ang action="form.php" ng path patungo sa file sa iyong server.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>kanin. 2. Default na anyo ng anyo <p>Tulad ng nakikita mo mula sa figure, ang bawat elemento ng form ay may mga default na istilo ng browser. I-clear natin ang mga istilo at i-istilo ang mga elemento ng form.</p><p> Form-wrap ( width: 550px; background: #ffd500; border-radius: 20px; ) .form-wrap *(transition: .1s linear) .profile ( width: 240px; float: left; text-align: center; padding : 30px; ) form ( background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; .form-wrap:after, form div:after ( content: ""; display: table; clear: both; ) form div ( margin-bottom: 15px; position: relative; ) h1 ( font-size: 24px; font-weight: 400; position: relative ; margin-top: 50px; ) h1:after ( content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50 %); ) /****************** pag-istilo ng mga elemento ng form ******************** ** / label, span ( display: block; font-size: 14px; margin-bottom: 8px; ) input, input ( border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; ) input:focus, input:focus ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); .radio label (posisyon: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; ) .radio input (position: absolute; opacity: 0; ) .radio -control ( position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; ) .male:before ( content: " \f222"; font-family: FontAwesome; font-weight: bold; ) .female:before ( content: "\f221"; font-family: FontAwesome; font-weight: bold; ) .radio label:hover input ~ . radio-control, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: pula; ) piliin (lapad: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /* alisan ng check ang webkit -browsers */ -moz-appearance: none; /*uncheck in Mozilla Firefox*/ ) piliin::-ms-expand ( display: none; /*uncheck in IE*/ ) .select-arrow ( position: absolute ; tuktok: 38px; kanan: 15px; lapad: 0; taas: 0; pointer-events: wala; /*activate ang display ng listahan kapag nag-click ka sa arrow*/ border-style: solid; lapad ng hangganan: 8px 5px 0 5px; kulay ng hangganan: #7b7b7b transparent transparent transparent; ) button ( padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform : uppercase; ) /******************** magdagdag ng kakayahang umangkop sa form ****************** ** **/ @media (max-width: 600px) ( .form-wrap (margin: 20px auto; max-width: 550px; width:100%;) .profile, form (float: none; width: 100% ;) h1 (margin-top: auto; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;) )</p><p><b>Form.php file</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: your_email." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "Salamat! Matagumpay kang nakarehistro."; ) ?></p><p><b>Tandaan</b><br>Sa $subject variable, tukuyin ang text na ipapakita bilang pamagat ng liham; <br>Your_name - dito maaari mong tukuyin ang pangalan na ipapakita sa field na "kung kanino nagmula ang sulat"; <br>palitan ang your_site_url ng address ng site gamit ang registration form; <br>palitan ang iyong_email ng iyong email address; <br>$headers .= "Bcc: your_email". "\r\n"; nagpapadala ng BCC sa iyong email address.</p> <br>Hello, mahal na habrafriend! Sa tutorial na ito, matututunan natin kung paano gumawa ng dalawang HTML5 form: isang login form at isang registration form. Ang mga hugis na ito ay ipapalit sa isa't isa gamit ang CSS3 :target pseudo-class. Gagamitin namin ang CSS3 at isang icon na font. Ang ideya ng demo na ito ay upang ipakita sa user ang isang login form at bigyan sila ng link na "pumunta sa" sa form ng pagpaparehistro. <br>Sa tutorial na ito ay magsasalita ako nang detalyado tungkol sa kung paano lumikha ng isang epekto tulad ng sa Demo 1. <h3>HTML</h3> <div id="container_demo" > <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --> <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Mag log in</h1> <p> <label for="username" class="uname" data-icon="u" >Ang iyong email o username</label> <input id="username" name="username" required="required" type="text" placeholder="myusername o mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p">Ang iyong password</label> <input id="password" name="password" required="required" type="password" placeholder="hal. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Panatilihin akong naka-log in</label> </p> <p class="login button"> <input type="submit" value="Mag log in" /> </p> <p class="change_link">hindi pa miyembro? Sumali ka</p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Mag-sign up</h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Ang iyong username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" >Ang email mo</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Ang iyong password</label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="hal. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Pakikumpirma ang iyong password</label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="hal. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Mag-sign up"/> </p> <p class="change_link">miyembro na? Pumunta at mag-log in</p> </form> </div> </div> </div> <br>Dito ay gumamit kami ng ilang HTML5 trick. Halimbawa, elemento <i>uri=password</i> awtomatikong itinatago kung ano ang uri ng user at pinapalitan ang mga character ng mga tuldok o asterisk (depende sa browser). Elemento <i>type=email</i> nagbibigay-daan sa browser na suriin kung ang email address ay na-format nang tama. Bilang karagdagan, ginamit namin ang parameter <i>kailangan=kailangan</i>; Hindi papayagan ng mga browser na sumusuporta sa setting na ito ang user na isumite ang form hanggang sa mapunan ang field na walang JavaScript na kailangan dito. Parameter <i>autocomplete=on</i> awtomatikong pupunuin ang ilang field. Gumamit din kami ng alt text para gabayan ang user kapag pinupunan ang form. <p>Ngayon tungkol sa dalawang nakakalito na punto. Marahil ay napansin mo ang dalawang link <a href>sa simula ng form. Ang maayos na trick na ito ay magbibigay-daan sa aming form na kumilos nang tama kapag nagtatrabaho sa mga anchor.</p><p>Ang pangalawang punto ay nauugnay sa paggamit ng isang font na may mga icon. Gagamit kami ng data-attribute upang ipakita ang mga icon. Pagtatakda ng parameter <i>data-icon=”icon_character”</i> Gamit ang naaangkop na mga character sa HTML, kailangan lang naming magtalaga ng isang panuntunan sa CSS upang i-istilo ang lahat ng mga icon. Maaari kang magbasa nang higit pa tungkol sa diskarteng ito sa website: 24 Mga Paraan: Pagpapakita ng Mga Icon na may Mga Font at Data-Attribute.</p><h2>CSS</h2>Upang mapanatiling malinis ang code, laktawan ko ang mga pangunahing parameter (html, body, atbp.), ngunit mahahanap mo ang mga ito sa mga source file. Muli, gumagamit ako ng mga diskarte sa CSS3 na hindi gagana sa lahat ng browser. Kaya simulan na natin! <h4>Pag-istilo ng Mga Form Gamit ang CSS3</h4>Una, bigyan natin ng base style ang ating mga form. <p>#subscribe, #login( position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); z-index: 22;</p><p>Dito kami magtatalaga ng mga katangian para sa header:</p><p>/**** text ****/ #wrapper h1( font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Kasalukuyang webkit lang ang sumusuporta sa background-clip:text; **/ #wrapper h1( background: -webkit-repeating-linear-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: transparent; " "; display:block; lapad:100%; rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%));</p><p>Tandaan na ngayon ang mga browser lamang na may suporta sa webkit <i>background-clip: teksto</i>, kaya gagawa kami ng isang webkit-only na may guhit na background at itali ito sa H1 header. Dahil ang parameter <i>background-clip: teksto</i> gumagana lamang sa mga browser ng Webkit, nagpasya akong magtrabaho lamang sa mga katangian ng webkit. Iyon ang dahilan kung bakit hinati ko ang CSS sa dalawang bahagi at ginamit lang ang webkit gradient. Gayunpaman, hindi mo lang dapat gamitin ang webkit sa iyong mga website! Kaya, halimbawa, ang parameter <i>-webkit-text-fill-color: transparent</i> nagbibigay-daan sa amin na magkaroon ng transparent na background, ngunit para lamang sa mga webkit browser, babalewalain ng lahat ng iba pang browser ang property na ito.</p><p>Gumawa rin kami ng manipis na linya sa ibaba ng pamagat gamit ang :after pseudo-class na elemento. Gumamit kami ng gradient na may taas na 2px at binawasan ang opacity sa mga gilid sa zero.</p><p>Ngayon, alagaan natin ang mga input field at gawin itong maganda.</p><p>/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder ( color: rgb(190, 188, 188); font-style: italic; ) input:-moz- placeholder, textarea:-moz-placeholder( color: rgb(190, 188, 188); font-style: italic; ) input (outline: none; )</p><p>Una, i-istilo namin ang mga margin at aalisin ang stroke. Ngunit mag-ingat: tinutulungan ng outline ang user na maunawaan kung saang field sila naroroon. Kung aalisin mo ito, kailangan mong ilapat ang mga katangian: aktibo at: focus.</p><p>/* lahat ng field ay hindi kasama ang pagsusumite at checkbox */ #wrapper input:not())( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing: nilalaman-kahon; focus( border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168 , 168, 168, 0.9) inset )</p><p>Dito ginamit namin ang pseudo class:not to style all fields maliban sa mga checkbox. Bilang karagdagan, nagpasya akong alisin ang stroke at idinagdag ang mga katangian:focus at:aktibo.</p><p>Ngayon ay oras na para magsaya: font na may mga icon. Dahil hindi namin magagamit ang :before at :after pseudo-classes, idaragdag namin ang icon sa parameter ng label at pagkatapos ay ilagay ito sa field. Gagamitin ko ang fontomas library. Maaari mong itugma ang mga icon sa kaukulang titik sa iyong sarili. Tandaan ang katangian <i>icon ng data</i>? Ito ay kung saan kailangan mong ipasok ang liham. ginamit ko <i>data-icon='u'</i> para sa pag-login, 'e' para sa email, 'p' para sa password. Sa sandaling napili ko ang mga titik, na-download ko ang font at ginamit ang font generator ng fontsquirrel para i-convert ito sa isang format na angkop para sa @font-face.</p><p>@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; ) /** magic trick! **/ :after ( content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; )</p><p>Iyon lang. Hindi mo kailangang magkaroon ng hiwalay na klase para sa bawat icon. Ginamit namin ang parameter <i>nilalaman: attr(data-icon)</i> upang makuha ang titik mula sa katangian ng data-icon. Kaya, kailangan lang nating magtalaga ng font, pumili ng kulay at maglagay ng icon.</p><p>Ngayon, magtalaga tayo ng mga panuntunan para sa button na isumite ang form.</p><p>/*style both buttons*/ #wrapper p.button input( width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0 , 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px (210, 210, 210); transition: lahat ng 0.2s linear; ) #wrapper p.button input:hover(background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. input ng button: focus( background: rgb(40, 137, 154); posisyon: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) inset; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )</p><p>Ang lansihin ay ang paggamit ng box-shadow upang lumikha ng maramihang mga frame. Naturally, maaari kang gumamit lamang ng isang frame, ngunit maaari ka ring gumamit ng ilan. Gagamitin namin ang parameter ng haba para gumawa ng "pekeng" pangalawang puting hangganan, 3px ang lapad, nang hindi lumalabo.</p><p>Ngayon, i-istilo natin ang checkbox, wala tayong gagawing kakaiba dito:</p><p>/* style ang checkbox na "tandaan mo ako"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label(lapad: 80%; )</p><p>Pag-istilo sa footer ng form gamit ang maraming linear gradient para gumawa ng striped gradient.</p><p>P.change_link( position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px; text-align: right; border-top: 1px solid rgb(219, 229, 232); 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247) 24; display: inline-block; font-weight: naka-bold; ; radius ng hangganan: 4px; 198) #wrapper p.change_link a:active( position: relative; top: 1px; )</p><p>Ngayon ay makikita mo na mayroon kaming dalawang magagandang hugis, ngunit isa lamang sa mga ito ang nais naming ipakita. Oras na para sa animation!</p><h4>Paglikha ng animation</h4>Ang unang bagay na gagawin namin ay itago ang pangalawang hugis sa pamamagitan ng pagtatakda ng opacity sa 0: <p>#register(z-index: 21; opacity: 0; )</p><p>Tandaan na ang login form ay may z-index: 22? Para sa pangalawang form, itatalaga namin ang parameter na ito sa 21 upang ilagay ito "sa ilalim" ng form sa pag-login.</p><p>Ngayon ang nakakatuwang bahagi: pinapalitan namin ang mga form gamit ang pseudo class:target. Kailangan mong maunawaan ang isang bagay tungkol sa :target: gagamit kami ng mga anchor upang ilipat ito. Ang normal na gawi ng isang anchor ay tumalon sa isang partikular na elemento ng page. Pero hindi namin gusto iyon, gusto lang naming magpalit ng mga hugis. Dito nakaligtas ang aming trick sa paggamit ng dalawang link sa itaas ng page. Sa halip na direktang idirekta kami sa pangalawang anyo at ipagsapalaran ang epekto ng pagtalon, bibigyan namin ang mga link ng parameter <i>display: wala</i>. Makakatulong ito na maiwasan ang pagtalon. Natuklasan ko ang trick na ito sa site: CSS3 create (French).</p><p>#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )</p><p>Ito ang nangyayari: kapag nag-click kami sa pindutan <i>Sumali</i>, papunta na kami sa #toregister. Pagkatapos ay nangyayari ang animation at pagkatapos lamang ay lumipat kami sa elementong #register. Gumagamit kami ng animation na tinatawag <i>fadeInLeft</i>. Dahil "tinatago" namin ang hugis gamit ang zero transparency, maglalapat kami ng animation na unti-unting lilitaw. Binago din namin ang z-index upang lumitaw ito sa ibabaw ng iba pang hugis. Ang parehong nangyayari para sa iba pang anyo. <br>Narito ang code para sa animation. Ginamit namin ang CSS3 animation framework mula sa Dan Eden at inangkop ang framework na ito para sa aming tutorial.</p><p>Animate( animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; ) @keyframes fadeInLeft ( 0% ( opacity: 0; transform: translateX(-20px); ) 100% ( opacity : 1; transform: translateX(0);</p><p>Ang hugis na "nawawala" ay magkakaroon ng fade animation sa kaliwa:</p><p>#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animation-name: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacity: 1; transform: translateX(0); ) 100% ( opacity : 0; transform: translateX(-20px);</p><p>Magagamit mo na ngayon ang iba pang mga animation ni Dan Eden gamit ang animate.css file: palitan lang ang .animate class at mga pangalan ng animation. Makakakita ka rin ng ilang iba pang mga animation sa dulo ng animate-custom.css file.</p><p>Iyon lang, mga kaibigan. Sana ay nagustuhan mo ang tutorial na ito!</p><p><b>Tandaan na sa ilang mga browser ang opsyon <i>background-clip: teksto</i> Hindi suportado. Hindi gumagana ang mga animation sa Internet Explorer 9. Sa Internet Explorer 8 at mas mababa, ang pseudo-class:target pseudo-class ay hindi suportado, kaya ang epektong ito ay hindi gagana doon.</b></p><p><b>P.S.</b> Malugod kong tatanggapin ang anumang komento tungkol sa pagsasalin sa isang personal na mensahe. Salamat!</p><p>Mga Tag: Magdagdag ng mga tag</p> <p>Sa pormat ng araling ito ay gagawa tayo <b>Form sa pag-login ng CSS</b>, ipapakita ko sa iyo kung paano ikonekta ang mga icon ng font, kung paano magtakda ng transparency para sa mga elemento, at gumamit ng mga animated na hover effect sa form.</p> <h3>Form framework sa HTML</h3> <p>Una, lumikha kami ng frame ng form. Buksan ang template ng html at isulat ang sumusunod na code sa pagitan ng mga tag.</p> <p>Gumawa tayo ng isang bloke na magsisilbing lalagyan para sa form. Italaga natin ang klase ng .container, ilagay ang isang form na may input dito. Ang unang input ay para sa pagpasok ng login <span>type="text" name="username" placeholder="Ilagay ang iyong login" !}</span>, pangalawa <span>input type="password" name="password" placeholder="Ipasok ang password" !}</span> tumatanggap ng password na sinusundan ng isang button na isumite. Sa ibaba ay naglalagay kami ng inskripsyon para sa pagbawi ng password, gagawin namin itong isang simpleng link.</p><p> <div class="container"> <form> <input type="text" name="username" placeholder="Ipasok ang login"> <input type="password" name="password" placeholder="Ilagay ang password"> <input type="submit" name="submit" value="PUMASOK">Ibalik ang password</form> </div> </p><h3>Naglalarawan ng mga elemento ng form sa CSS</h3> <p>Pagkatapos ay i-format namin ang mga elemento ng form na ito. Gumawa tayo ng karagdagang CSS directory kung saan maglalagay tayo ng mga style file. Sa loob nito, lumikha kami ng isang file style.css at ikinonekta ito sa aming pahina.</p><p> <link rel="stylesheet" href="css/style.css" type="text/css"> </p><p>Iminumungkahi kong maglagay ng larawan sa background upang magawa ito, gumawa tayo ng karagdagang direktoryo ng img at ilagay ang ating larawan dito. Isinama namin ang larawan sa style.css para sa katawan . Isinulat namin ang landas patungo sa imahe, lumabas sa kasalukuyang direktoryo, pumunta sa img folder, at pagkatapos ay ang pangalan ng imahe. <br></p><p>Body( background-image: url("../img/bg.png"); )</p><p>A( color: #fff; ) a:hover( text-decoration: none; )</p><p>Istilo natin ang lalagyan gamit ang .container form. Itakda natin ang lapad sa 450 pixels, at pansamantalang itakda ang taas sa 500 pixels. Itakda natin ang kulay sa #182134 at igitna ito sa gitna ng margin ng screen: 250px auto 0 auto; . Ilagay ang text sa loob ng block sa gitna, na may indent na 20 pixels sa itaas. <br></p><p>Container( width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; )</p><p>Pagkatapos ay gumawa tayo ng input para sa pagpasok ng iyong login at password. Upang hindi maapektuhan ang button, pipiliin namin ang mga ito ayon sa mga katangian ng text at password, na tumutukoy sa lapad na 300 pixels. , may taas na 50 peak. Palakihin ang text ng 18 px, gumawa ng mga indent sa pagitan ng mga ito na 25 px, bilugan ang mga sulok ng border-radius: 4px; , ilipat ang teksto sa 10 pixels. pa-kaliwa.</p><p>Input,input( width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; )</p><p>Pagkatapos ay isentro namin ang inpyt sa pamamagitan ng pagbabalot ng mga ito sa isang karagdagang bloke at pagtatalaga ng klase .dws-input . Gumawa tayo ng line break pagkatapos ng button, at maglagay ng larawan na may logo sa itaas bago ang button. Upang gawin ito, kopyahin ito sa img folder, at isulat ang path img src="img/men.png" dito. <br></p><p> <div class="container"> <img src='https://i1.wp.com/img/men.png' loading=lazy loading=lazy> <form> <div class="dws-input"> <input type="text" name="username" placeholder="Ipasok ang login"> </div> <div class="dws-input"> <input type="password" name="password" placeholder="Ilagay ang password"> </div> <input type="submit" name="submit" value="PUMASOK"><br />Ibalik ang password</form> </div> </p><p>Susunod ay ilalarawan natin ang mga istilo nito. Magtalaga tayo ng lapad at taas na 120 pixels sa larawan. , pagkatapos ay itaas ito sa itaas lamang ng margin ng hugis: -60px 0 30px 0; , gumawa ng tungkol sa vodka sa 5 peak. hangganan: 5px solid #1a394f; , ikot sa mga sulok 50%.</p><p>Container img( width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; )</p><p>Ngayon ilarawan natin ang mga estilo ng button. Italaga natin dito ang klase .dws-submit at magtalaga ng mga istilo dito. Nagtatalaga kami ng mga indent, dagdagan ang teksto ng 15 pixels, gawin itong puti, at ang background ng button ay asul, alisin ang vodka at gumawa ng isang parisukat sa ibaba, pati na rin ang isang Pointer cursor.</p><p>Dws-submit ( padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer ;)</p><p>Upang isentro ang mga input at ang button, ilagay natin ang mga ito nang hiwalay, bawat isa sa kanilang sariling bloke. Ilarawan natin ang mga istilo ng button kapag naka-hover. Gumagawa kami ng isang maayos na paglipat, binabago ang kulay ng pindutan sa puti, at sa parehong oras ang font ay magiging madilim.</p><p>Dws-submit:hover( transition: lahat ng 0.5s; background: #fff; color: #2c536c; )</p><p>Gumawa tayo ng asul na bloke sa ibabaw ng ating hugis, box-shadow: 0 -5px 0 #3adbfd; , at idagdag ito sa image box-shadow: 0 -5px 0 #3adbfd; . Gawin nating mas transparent ang background ng form upang magawa ito, isusulat natin ang kulay na ito sa format na RGBA.</p> <p>Ginagamit ko ang serbisyong w3schools.com, pumunta sa Color Picker, ilagay ang aming kulay sa form at i-convert ito sa RGB. Kopyahin at i-paste sa istilo ng lalagyan.</p><p>Container( width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; ) .container img( width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; )</p><p>Para sa epekto, bilugan ang mga sulok sa ibaba, para dito magsusulat kami ng border-radius: 0 0 10px 10px; . <br></p> <h3>Pagdaragdag ng mga icon ng font</h3> <p>Magdagdag tayo ng mga icon sa anyo ng mga font, pumunta sa serbisyo ng fontawesome.io at i-download ang mga ito sa iyong computer. I-unpack natin ang archive, kopyahin ang folder ng mga font, na naglalaman ng mga font, at kopyahin ang file ng mga estilo sa direktoryo ng css. Pagkatapos ay ikinonekta namin ang mga estilo sa pahina.</p><p> <link rel="stylesheet" href="css/font-awesome.css" type="text/css"> </p><p>Pumili tayo ng mga icon para sa ating mga input, para dito pumunta tayo sa page <b>Mga icon</b>, ang una ay upang ikonekta ang estilo para sa pagpasok ng login, gamitin <b>gumagamit</b>, kopyahin ang code nito <b>f007</b>, at ilarawan ito sa mga istilo gamit ang isang pseudo-element.</p> <p>Pagkonekta ng mga font font-family: "FontAwesome"; , pagkatapos ay ang icon mismo, ilagay ito nang ganap sa mga margin, dagdagan ito ng 30 pixels, igitna ito at baguhin ang kulay.</p><p>Dws-input::before( font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; )</p><p>Igalaw natin ng kaunti ang text sa input - padding-left: 40px; .</p> <p>Piliin natin ang pangalawang icon na may pangalan <b>kandado</b>, kopyahin ang code nito <b>f023</b>, at ilarawan ang mga istilo nito.</p> <p>Upang gawin ito, piliin ang pangalawang elemento <span>.dws-input:nth-child(2)::before()</span>, at isulat ang nilalaman ng larawan: " <b>\f023</b>";. <br></p><p>Dws-input::before( font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; ) .dws-input: nth-child(2)::before( content: "\f023"; )</p><p>Dws-input:hover::before(kulay: #319ebc; transition: lahat ng 0.3s; )</p><p>At gayundin, mag-hover ng mga istilo para sa mga input. <br></p><p>Dws-input input:hover( box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); )</p><p> <i class="fa fa-vk" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-google-plus-official" aria-hidden="true"></i> <i class="fa fa-odnoklassniki" aria-hidden="true"></i> </p><p>Para sa kaginhawahan, balutin natin sila sa isang bloke gamit ang .social class at ilarawan ang kanilang mga istilo. Baguhin natin ang kanilang kulay sa puti, dagdagan ang mga ito ng 20 pixels, gawin silang 20 pixels ang lapad, at magdagdag ng ilang padding. <br></p><p>Dws-social i( kulay: #fff; laki ng font: 20px; lapad: 20px; padding: 10px; )</p><p>Susunod, ilalarawan namin ang mga estilo ng hover. Gumawa tayo ng puting bloke, gawing madilim ang background ng icon, bilugan ang mga sulok at ipakita ang cursor kapag nag-hover. <br></p><p>Social i:hover(kulay ng background: #fff; kulay: #1a394f; border-radius: 5px; cursor: pointer; )</p><p>Alisin natin ang taas ng form block, na itinakda sa pinakadulo simula, at sa lugar nito magdagdag ng ilalim na padding-bottom: 20px; .</p> <p>Sa prinsipyo, iyon lang, nakakuha kami ng magandang form na maaaring ikonekta sa site at magamit para sa pahintulot.</p> <p>Subukang gumawa ng isang bagay na orihinal gamit ang halimbawa ng araling ito, pagsasanay, at huwag kalimutang ibahagi ang materyal na ito.</p> <p>Tulad ng alam mo na, ang web client ay may kakayahang magpadala ng iba't ibang impormasyon sa web server gamit ang GET at POST na mga kahilingan. <i>Mga form ng HTML</i> ay ang pangunahing tool para sa paglikha ng mga naturang query. Sa esensya, ang HTML form ay isang field o field para sa paglalagay ng impormasyon sa isang web page. Ang isang magandang halimbawa ng HTML form ay ang form para sa pagpasok ng login at password para sa awtorisasyon sa site.</p> <p>Inilalarawan ang isang HTML form gamit ang isang nakapares na tag <i>anyo</i>. Ang tag na ito ay may dalawang mahalagang katangian: <i>paraan</i> At <i>aksyon</i>. Tinutukoy ng katangian ng pamamaraan ang uri ng kahilingan sa HTTP (kumuha o mag-post), at ang katangian ng pagkilos ay tumutukoy sa hiniling na dokumento, iyon ay, ang path patungo sa file kung saan ang kahilingan ay gagawin. Ang path ay maaaring maging ganap (nagsasaad ng domain ng site) o kamag-anak. Halimbawa:</p> <<span>form method = "get" action = "/login.php" ></span> ... <<span>/form></span> <p>Mayroong ilang iba't ibang uri ng mga elemento ng pagpasok ng data na akma sa loob ng isang form. Ang elementong gusto kong simulan ay tinatawag <i>ipasa</i>:</p> <<span>input type = "submit" value = "Login" / > !}</span> <p>Ang elemento ay isang pindutan, pag-click sa kung saan nagreresulta sa isang kahilingan sa HTTP. Katangian <i>halaga</i> itinatakda ang label sa button. Ang isang form ay maaaring maglaman ng maramihang mga elemento ng pagsusumite. Upang matukoy kung aling pindutan ang na-click sa hiniling na dokumento, kailangan mong itakda ang mga katangian ng mga elemento ng pagsusumite <i>pangalan</i>. Halimbawa:</p> <<span>form method = "get" action = "/control.php" ></span> <<span>input type = "submit" name = "submit" value = "Add" / > !}</span> <<span>input type = "submit" name = "submit" value = "Edit" / > !}</span> <<span>/form></span> <p>Kapag bumubuo ng isang kahilingan, ang web browser ay magsasama ng isang parameter ng HTTP na nagpapakilala sa na-click na elemento ng pagsusumite. Ang value ng name attribute ng pinindot na button ay kukunin bilang parameter name, at ang value ng value attribute bilang value. Kaya, kapag na-click mo ang Add button, ang sumusunod na kahilingan ay mabubuo:</p><p>/control.php?submit=Add</p><p>at kapag pinindot mo ang Edit button:</p><p>/control.php?submit=Edit</p><p>Ang sumusunod na elemento ay ang pinakasimpleng elemento para sa pagpasok ng single-line na teksto. Ang HTML code nito:</p> <<span>uri ng input = "text" name = "name" / ></span> <p><input type="text"></p> <p>Ang pangalan ay isang kinakailangang katangian upang makalahok sa isang kahilingan sa HTTP. Ang value ng attribute na ito ay gagamitin bilang HTTP parameter name. Lahat ng uri ng mga elemento ng form ay may ganitong katangian.</p> <p>Maaari mo ring itakda ang value attribute sa isang elemento sa pamamagitan ng pagtukoy sa text na ilalagay sa elemento bilang default. Halimbawa:</p> <<span>uri ng input = "text" name = "login" value = <span>"Username"</span> / > </span> <p>Elemento <i>password</i> ginagamit para magpasok ng mga password. Ang panlabas ay pareho, ngunit ang ipinasok na teksto ay ipinapakita bilang mga asterisk o tuldok:</p> <<span>uri ng input = "password" / ></span> <p><input type="password"></p> <p>Ito, sa prinsipyo, ay sapat na upang lumikha ng pinakasimpleng anyo ng awtorisasyon. Subukan nating ipatupad ito, at pagkatapos ay bumalik sa pagsasaalang-alang sa natitirang mga uri ng mga elemento.</p> <p>Gumawa tayo ng file auth.php sa root directory na may sumusunod na nilalaman:</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= <span>"http://www.w3.org/1999/xhtml"</span>> </span> <<span>ulo ></span> <<span>pamagat ></span> Awtorisasyon<<span>/title></span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / ></span> <<span>/ulo></span> <<span>katawan ></span> <<span>form method = "get" action = "/auth.php" ></span> <<span>talahanayan ></span> <<span>tr ></span> <<span>td ></span> Username:<<span>/td></span> <<span>td ></span> <<span>uri ng input = "text" name = "login" value = "" / ></span> <<span>/td></span> <<span>/tr></span> <<span>tr ></span> <<span>td ></span> Password:<<span>/td></span> <<span>td ></span> <<span>uri ng input = "password" name = "pass" value = "" / ></span> <<span>/td></span> <<span>/tr></span> <<span>/table></span> <<span>input type = "submit" value = "Login" / > !}</span> <<span>/form></span> <<span>/katawan></span> <<span>/html></span> <p>Tulad ng nakikita mo, sa loob ng tag ng form maaari kang maglagay ng mga tag na makakatulong sa iyong magandang markahan ang form (naglagay ako ng talahanayan sa loob). Ang form ay naglalaman ng mga field ng username at password na pinangalanang login at pass, ayon sa pagkakabanggit. Kapag na-click mo ang "Login," isang GET na kahilingan para sa dokumento /auth.php ay nabuo (iyon ay, ang pahina ay humihiling mismo). Sa aking kaso, ang buong URL ng pahina ay kamukha <i>http://test-domain3/auth.php</i>.</p> <p>Ipasok ang iyong mga detalye at i-click ang "Login". Dapat mag-reload ang page. Dapat ding magbago ang address ng page. Sa aking kaso kinuha ang form:</p><p>Http://test-domain3/auth.php?login=Joker-jar&pass=12345</p><p>Nangangahulugan ito na ang auth.php na dokumento ay hiniling na may mga parameter ng GET na inilagay gamit ang isang HTML form. Maglagay ng PHP handler sa simula ng auth.php file na makakatanggap ng data ng pahintulot:</p> <?php <span>//--Suriin kung nailipat ang data</span> if ( isset ($_GET [ "login" ] ) && isset ($_GET [ "pass" ] ) ) ( echo <span>"Ang iyong username: "</span>. $_GET [ "login" ] . ", ang iyong password: " . $_GET["pass"]; labasan ; ) ?> <p>Kung ang page ay binigyan ng login at password, ang kundisyon ay ma-trigger at may ipapakitang mensahe. Tatawagin din <i>labasan</i>, na hihinto sa karagdagang pagpapatupad ng script, samakatuwid ang form ay hindi ipapakita.</p> <p>Hindi ligtas na ipadala ang password gamit ang isang kahilingan sa GET dahil nakikita ito sa address bar. Baguhin natin ang uri ng kahilingan sa POST. Upang gawin ito, baguhin ang halaga ng attribute ng method, at sa PHP handler para sa pag-access sa array, baguhin ang $_GET sa $_POST. Suriin ang functionality ng script.</p> <p>Susunod na elemento - <i>checkbox</i>. Ito ay ginagamit kapag ang isang "oo/hindi" na sagot ay kinakailangan mula sa gumagamit:</p> <<span>uri ng input = "checkbox" / ></span> <p>Kung hindi naka-check ang checkbox, walang naipapasa sa mga parameter. Kung hindi, ang parameter ng pangalan ay ipinapasa kasama ang halaga <i>sa</i>. May isa pang punto. Bilang panuntunan, mayroong isang tekstong nagpapaliwanag sa tabi ng checkbox. Magandang kasanayan para sa webmaster na magkaroon ng checkbox na tumugon sa mga pag-click sa tekstong ito. Ito ay ginagawa nang simple. Ang bandila ay itinalaga ng isang tiyak na id, at ang inskripsyon mismo ay pinalamutian ng isang tag <i>label</i> may katangian <i>para sa</i>, na ang halaga ay katumbas ng checkbox identifier:</p> <<span>uri ng input = "checkbox" id = "tandaan" pangalan = "tandaan" / ></span> <<span>label para sa = "tandaan" ></span> Tandaan mo ako<<span>/label></span> <p><input id="remember" name="remember" type="checkbox"></p> <p>Ang isang katulad na elemento ay ginagamit upang pumili ng isang sagot mula sa isang hanay ng mga halaga. Sabihin nating kailangan ng user na pumili ng isa sa tatlong kulay:</p> <<span>input type = "radio" id = "red" name = "color" value = "red" / > !}</span> <<span>label para sa = "pula" ></span> Pula<<span>/label></span> <<span>br/></span> <<span>input type = "radio" id = "green" name = "color" value = "green" / > !}</span> <<span>label para sa = "berde" ></span> Berde<<span>/label></span> <<span>br/></span> <<span>input type = "radio" id = "blue" name = "color" value = "blue" / > !}</span> <<span>label para sa = "asul" ></span> Asul<<span>/label></span> <<span>br/></span> <p><input id="red" name="color" type="radio" value="pula"><br><input id="green" name="color" type="radio" value="berde"><br><input id="blue" name="color" type="radio" value="asul"></p> <p>Tandaan na ang lahat ng mga elemento ay may parehong halaga ng pangalan. Maaari ka lamang pumili ng isang halaga. Ang parameter ng HTTP ay maglalaman ng halaga ng napiling elemento, halimbawa <i>kulay=asul</i>.</p> <p>Upang ang isa sa mga elemento ay unang mapili, halimbawa, ang una, kailangan itong bigyan ng isang katangian <i>sinuri</i> may kahulugan <i>sinuri</i>(Pamantayang XHTML):</p> <<span>input type = "radio" id = "red" name = "color" value = "red" checked = "checked" / > !}</span> <p>Mayroong isang espesyal na elemento para sa pagpasok ng malaking multi-line na teksto <i>textarea</i>:</p> <<span>textarea rows = "6" cols = "20" name = "text" ></span> Teksto sa loob ng elemento<<span>/textarea></span> <p>Teksto sa loob ng elemento</p> <p>Ang elementong ito, tulad ng nakikita mo, ay naiiba sa mga nauna. Ito ay isang nakapares na tag, at ang teksto ay hindi inilalagay sa katangian, ngunit sa katawan ng tag. Ang elemento ay mayroon ding katangian ng pangalan. Gamit ang attribute <i>mga hilera</i> maaari mong itakda ang bilang ng mga linya sa isang elemento, <i>cols</i>- ang bilang ng mga character sa linya. Ang elemento ng textarea ay ginagamit, bilang panuntunan, sa mga form ng POST, dahil... nagsasangkot ng pagpasok ng mahabang teksto (halimbawa, isang form ng mensahe sa isang forum).</p> <p>Listahan ng drop-down. Marahil ay nakatagpo ka ng gayong elemento sa mga programa. Binibigyang-daan kang pumili ng isang value mula sa isang set. Ang code ng elemento ay hindi rin ganap na karaniwan. Una, nilikha ang isang elemento ng lalagyan <i>pumili</i>, binibigyan ito ng attribute ng pangalan:</p> <<span>piliin ang pangalan = "mga bayan" ></span> <<span>/select></span> <p>Ang mga elemento ng listahan ay inilalagay sa loob ng lalagyan. Ang elemento ng listahan ay isang nakapares na tag <i>opsyon</i>, ang bawat elemento ay binibigyan ng value attribute. Ang inskripsiyon ng elemento ay nakasulat sa katawan ng elemento:</p> <<span>piliin ang pangalan = "bayan" ></span> <<span>halaga ng opsyon = "msk" > !}</span> Moscow<<span>/opsyon></span> <<span>halaga ng opsyon = "vlad" > !}</span> Vladivostok<<span>/opsyon></span> <<span>halaga ng opsyon = "nsk" > !}</span> Novosibirsk<<span>/opsyon></span> <<span>/select></span> <p>Ang kahilingan sa HTTP ay nagpapasa ng isang parameter na may pangalan ng pangalan at ang halaga ng napiling elemento, halimbawa <i>bayan=vlad</i>. Bilang default, napili ang unang elemento ng listahan, kung gusto mong pumili ng isa pang elemento, bigyan ito ng katangian <i>pinili</i> may kahulugan <i>pinili</i>:</p> <<span>halaga ng opsyon = "vlad" selected = "selected" > !}</span> Vladivostok<<span>/opsyon></span> <p>Listahan ng mga halaga. Kung ang piling elemento ay bibigyan ng katangian <i>laki</i> na may numerong halaga, ang dropdown na listahan ay magiging isang listahan ng mga halaga. Sa kasong ito, tutukuyin ng value ng attribute na laki ang patayong laki ng elemento:</p> <<span>piliin ang pangalan = "bayan" laki = "3" ></span> <<span>halaga ng opsyon = "msk" > !}</span> Moscow<<span>/opsyon></span> <<span>halaga ng opsyon = "vlad" > !}</span> Vladivostok<<span>/opsyon></span> <<span>halaga ng opsyon = "nsk" > !}</span> Novosibirsk<<span>/opsyon></span> <<span>/select></span> <p>Moscow Vladivostok Novosibirsk</p> <p>Kung ang piling elemento ay bibigyan ng katangian <i>maramihan</i> may kahulugan <i>maramihan</i>(Pamantayang XHTML), posibleng pumili ng higit sa isang elemento nang sabay-sabay (halimbawa, habang pinipigilan ang Ctrl key). Sa kasong ito, ang lahat ng napiling elemento na may parehong mga pangalan ay ipapadala sa kahilingan sa HTTP, halimbawa: <i>bayan=msk&bayan=vlad&bayan=nsk</i>.</p> <p>Minsan kinakailangan na magpasa ng parameter sa isang kahilingan sa HTTP na hindi dapat i-edit ng user, at kung minsan ay makikita pa nga. Sabihin nating nagpapatupad ka ng form sa pag-edit ng balita. Ang kahilingan sa HTTP ay dapat maglaman ng identifier ng balitang ito. Para sa mga ganitong kaso, mayroong isang nakatagong elemento ng mga HTML form:</p> <<span>uri ng input = "nakatagong" pangalan = "param" na halaga = "" / ></span> <p>Ang elementong ito ay hindi makikita sa form, ngunit ang HTTP parameter name=value ay ipapasa kapag ang kahilingan ay ginawa.</p> <p>Minsan maaaring maging kapaki-pakinabang ang isang elementong nag-clear sa form. Isang button na, kapag na-click, binubura ang lahat ng data na ipinasok ng user sa form:</p> <<span>input type = "reset" value = "Clear" / > !}</span> <p>Ang mga nakalistang elemento ay may dalawang espesyal na katangian:</p> <p>readonly="readonly" - ipinagbabawal ang pagbabago ng impormasyon sa elemento (read-only mode); <br>disabled="disabled" - ginagawang hindi aktibo ang elemento.</p> <p>Mayroon ding elemento para sa pagpili ng file na ia-upload sa web server kapag naisumite na ang form, ngunit malamang na tatalakayin ito sa isang hiwalay na artikulo.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> <div id="ftwp-postcontent-end"></div> </div> <div style="clear:both"></div> <div class="thn_post_wrap wp_link_pages"></div> <div id="yandex_rtb_niz" style="text-align: center;"></div> <div class="post_foot"> <div class="post_meta"></div> </div> </div> </div> <div id="ast_nextprev" class="navigation "> <span class="div_middle"><i class="fa fa-stop"></i></span> <div class="nav-box ast-prev"> <a href="https://mjmall.ru/tl/networks-and-communications/mak-ne-vidit-printer-ne-pechataet-printer-reshenie-problemy.html" rel="prev"><i class="fa fa-angle-left"></i><br><span>Hindi nakikita ni Mac ang printer. Hindi nagpi-print ang printer. Solusyon sa problema. Pagtatakda ng default na printer</span></a> <div class="prev_cat_name"> <a href="https://mjmall.ru/tl/category/networks-and-communications/">Mga network at komunikasyon</a></div> </div> <!-- /next_post --> <div class="nav-box ast-next"> <a href="https://mjmall.ru/tl/online-services/kak-uznat-dannye-fotografii-volshebnyi-exif-exif-tehnicheskie-dannye.html" rel="next"><i class="fa fa-angle-right"></i><br><span>Paano malalaman ang data ng larawan: mahiwagang EXIF</span></a> <div class="next_cat_name"> <a href="https://mjmall.ru/tl/category/online-services/">Mga online na serbisyo</a></div> </div> <!-- /next_post --> </div> </div> </div> <div id="sidebar" class="home_sidebar "> <div class="widgets"> <div id="recent-posts-2" class="widget widget_recent_entries" data-widget-id="recent-posts-2"> <div class="widget_wrap"> <h3 class="widgettitle">Mga Kamakailang Entri</h3> <ul> <li> <a href="https://mjmall.ru/tl/drives/territoriya-fermerov-shkatulka-s-valentinkami-shifr-sekrety-territoriya-fermerov.html">Mga lihim ng mga mandaraya sa teritoryo ng mga magsasaka, libreng agrobucks, mga code para sa pera</a></li> <li> <a href="https://mjmall.ru/tl/programs-utilities/sistemnye-trebovaniya-igry-path-of-exile-path-of-exile-sistemnye-trebovaniya.html">Path of Exile - mga kinakailangan ng system</a></li> <li> <a href="https://mjmall.ru/tl/games/samye-minimalnye-trebovaniya-dlya-forza-horizon-3-vliyanie-nastroek-na.html">Epekto ng mga setting sa pagganap at kalidad</a></li> <li> <a href="https://mjmall.ru/tl/hardware-news/ne-poluchaetsya-dobavit-kartu-v-paypal-esli-ne-privyazyvaetsya-karta-k.html">Kung ang card ay hindi naka-link sa PayPal</a></li> <li> <a href="https://mjmall.ru/tl/processors-and-memory/kak-vyglyadit-trek-nomer-posylki-iz-kitaya-kak-uznat.html">Paano malalaman ang track number ng isang parsela na ipinadala sa pamamagitan ng koreo</a></li> <li> <a href="https://mjmall.ru/tl/smartphones/obzor-rasshirenii-i-raznovidnostei-nastolnoi-igry-imadzhinarium-igra.html">Imaginarium laro Imaginarium laro uri</a></li> <li> <a href="https://mjmall.ru/tl/cellular/obzor-nastolnoi-igry-imadzhinarium-kak-igrat-v-igru-imadzhinarium.html">Paano laruin ang laro Imaginarium Game Imaginarium kung ano ang mga asosasyon upang makabuo ng</a></li> <li> <a href="https://mjmall.ru/tl/cellular/funkcii-yazyka-zaprosov-1s-8-3-sozdanie-i-rabota-s-zaprosami-dlya.html">Mga function ng query language 1s 8</a></li> <li> <a href="https://mjmall.ru/tl/smartphones/obmen-s-podklyuchaemym-oborudovaniem-offline-instrukciya-k-upravleniyu.html">Mga tagubilin para sa pangangasiwa ng pangangalakal UT11 Exchange na may konektadong kagamitan offline</a></li> <li> <a href="https://mjmall.ru/tl/online-services/testovye-izobrazheniya-dlya-proverki-rgb-cvetovogo-profilya-test-foto.html">Subukan ang mga larawan upang suriin ang profile ng kulay ng RGB</a></li> </ul> <span class="widget_corner"></span> </div> </div> <div id="text-4" class="widget widget_text" data-widget-id="text-4"> <div class="widget_wrap"> <div class="textwidget"> <div id="yandex_rtb_R-A-210521-45" class="yandex_rtb_R-A-210521-45" style="text-align: center;"></div> </div> <span class="widget_corner"></span></div> </div> </div> </div> </div> </div> </div> <a class="to_top "><i class="fa-angle-up fa-2x"></i></a> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700&subset=cyrillic-ext" rel="stylesheet"> <link rel="stylesheet" href="/css/font-awesome.min.css"> <div class="footer_wrap layer_wrapper "> <div id="footer"> <div class="center"></div> <div id="copyright" class="soc_right copyright_center"> <div class="center"> <div class="copytext">mjmall.ru - Mga Programa. Mga utility. Mga smartphone. Internet. Analytics</div> <div class="foot_right_wrap"> <div class="foot_soc"></div> </div> </div> </div> </div> </div> <!--[if lte IE 9]> <script>(function($) { $(document).ready(function() { $( '#ftwp-container' ).addClass( 'ftwp-ie9' ); } ); } )(jQuery);</script> <![endif]--> <script type="text/javascript" defer src="https://mjmall.ru/wp-content/cache/autoptimize/js/autoptimize_d190c113c8b6a6db43f296ae02ecb197.js"></script> </body> </html>