Paano gumawa ng pahina ng pagpaparehistro sa html. Paglikha ng mga HTML Form

Sa post na ito ay ilalarawan ko ang hakbang-hakbang kung paano lumikha ng mga online na form sa pagpaparehistro, kung paano ito ilagay sa website at i-save ang nakolektang data sa iyong computer. Maaaring makita ng ilan na masyadong detalyado ito - paumanhin nang maaga. Hindi lahat ng user ay nakakakuha ng impormasyon sa mabilisang paraan.

Minsan may pangangailangan na magsagawa ng online na pagpaparehistro ng mga kalahok para sa isang kaganapan. Bilang kahalili, maaari mo lamang hilingin sa mga user na mag-download ng file na may questionnaire, punan ito at ipadala ito sa tinukoy na email. Hindi ko gusto ang pamamaraang ito dahil nangangailangan ito karagdagang pagproseso nagsumite ng mga talatanungan.

Isaalang-alang natin ang opsyon ng pagsasagawa ng online na pagpaparehistro, kung saan pinunan ng user ang isang form sa iyong website, at ang lahat ng data ay ipinasok sa isang talahanayan, na maaaring ma-download sa isang computer.

Hindi kami mag-iimbento ng bisikleta, ngunit gagamitin ito para sa mga layuning ito serbisyo ng Google Mga dokumento. Kung na-activate mo na ang serbisyo Google Drive, pagkatapos ang mga dokumento ay nasa iyong Google account ay maiimbak sa seksyong Disk.

Ang serbisyong ito ay nagbibigay ng mahusay na mga tool na magbibigay-daan sa iyong lumikha ng isang form online na pagpaparehistro mga kalahok ng anumang kumplikado.

Kaya simulan na natin!

Pumunta sa Google Docs (Drive) at mag-log in.


Sa kaliwang sulok, mag-click sa button na Lumikha at piliin ang Form.


Ang editor ng form ay lilitaw sa isang bagong window.


Gaya ng nakikita mo, maaari kang maglagay ng pamagat at paglalarawan dito, at mayroon na kaming dalawang text field na nakahanda sa form. Sa unang field sa linyang "Tanong", isinulat ko ang "Ang iyong pangalan." Sa "Mga Paliwanag" inilagay ko ang "Ipasok ang iyong tunay na pangalan." Ang field na "Uri ng tanong" ay naiwan bilang "Text". Nilagyan ko rin ng check ang checkbox na "Gawing kailanganin ang tanong na ito" - hindi nito papayagan ang user na magsumite ng data hanggang sa punan niya ang field na ito.


Mag-click sa pindutang "Tapos na".

Lumipat tayo sa pangalawang tanong. Upang gawin ito, piliin ito gamit ang isang pag-click ng mouse at mag-click sa icon ng pag-edit.
Bilang halimbawa, punan natin ang tanong na ito tulad nito: Tanong - Ano ang interesado ka?, Paliwanag - Ilarawan ang iyong mga interes at mga lugar kung saan itinuturing mo ang iyong sarili bilang mga eksperto, Baguhin ang uri ng tanong sa - Teksto (talata). Lagyan ng check ang checkbox na "Gawing kailangan ang tanong na ito."


Mag-click sa pindutang "Tapos na".

Naubusan na kami ng mga blangko, kaya para magdagdag ng mga bagong field kailangan namin sa kaliwa itaas na sulok Mag-click sa pindutang "Magdagdag ng elemento". Sa pagkakataong ito pipiliin namin ang elementong "Isa mula sa listahan".


Punan natin ang tanong na ito tulad nito: Tanong - Ang iyong kasarian, Mga Paliwanag - iwanang blangko, Uri ng tanong na umalis - Isa mula sa listahan, Huwag lagyan ng tsek ang kahon na "Pumunta sa pahina ng sagot". Kakailanganin mo ito kung magpasya kang lumikha ng mga multi-page na form. Muli, lagyan ng check ang checkbox na "Gawing mandatoryo ang tanong na ito."


Mag-click sa pindutang "Tapos na".

Idagdag bagong elemento- "Ilan mula sa listahan." Hindi ko muling isusulat ang aking mga pagpipilian - tingnan lamang ang larawan.


I-click ang "Tapos na".

Magdagdag ng bagong elemento – "Drop-down list". Punan tulad ng nasa larawan.


I-click ang "Tapos na". Magdagdag ng bagong elemento - "Scale". Gaya ng dati, punan ang halimbawa sa larawan.


I-click ang “Tapos na”. Magiging ganito ang hitsura:


Magdagdag ng bagong elemento - "Grid". Punan natin...


Tingnan natin..


Kung natapos mo na ang lahat, pagkatapos ay mag-click sa pindutan ng pag-save sa kanang sulok sa itaas at kaunti sa kaliwa sa menu Mga karagdagang aksyon piliin ang “I-embed”.



Idinaragdag namin ang resultang code sa aming page at hinahangaan ang resulta.

Binabati kita. Nakagawa ka na ng form online na survey. Lumikha bagong uniporme na sa iyong mga parameter at gamitin ito sa iyong kalusugan.

Huwag tayong magpahinga at patuloy na tumingin sa mga posibilidad Google Docs upang lumikha ng mga form.

Tapusin natin ang pagtingin sa editor ng form at pagkatapos ay magpatuloy sa pagtatrabaho sa mga dokumento.

Sa menu na "Magdagdag ng Elemento," mayroon kaming dalawang hindi inilarawang item na natitira - ito ay "Seksyon Heading" at "Page Break". Karaniwang ginagamit ko ang mga ito nang magkasama. Minsan ang hugis ay lumalabas na masyadong pinahaba at ipinapayong hatiin ito sa dalawang bahagi. Ginagamit ang "Page Break" para sa mga layuning ito. Ngunit idinagdag ko ang "Section Heading" pagkatapos ng pahinga upang hindi makalimutan ng gumagamit kung ano ang kanyang pinupunan at kung bakit.

Mayroon din kaming menu na "Tema", kung saan maaari kang pumili ng isa sa mga iminungkahing pagpipilian sa disenyo para sa iyong form. Mayroong isang caveat - hindi lahat ng mga tema ay nagpapakita ng mga character na Ruso nang tama.


Ngayon bumalik tayo sa menu na "Mga karagdagang pagkilos", kung saan hindi namin isinasaalang-alang ang item na "Baguhin ang kumpirmasyon".
Dito maaari mong isulat ang iyong teksto, na makikita ng user pagkatapos punan ang form. Ang checkbox na "I-publish ang buod ng tugon" ay magpapakita ng isang link sa iyong mga resulta ng survey sa mga user. Hindi ko inirerekumenda na ilagay ito sa mga form ng pagpaparehistro para sa mga online na kaganapan, dahil mas mahusay na huwag ipakita ang personal na data ng gumagamit sa Internet.

Ang susunod na menu ay "Tingnan ang mga sagot". Naglalaman lamang ito ng dalawang item: "Buod" at "Talahanayan".



Ang susunod na menu na “Ipadala sa pamamagitan ng email” ay nagbibigay-daan sa iyong ipadala ang iyong form sa email ng user.


Sa pamamagitan nito, natapos na naming suriin ang mga pangunahing pag-andar ng editor ng form at magpapatuloy sa pagtatrabaho kasama ang dokumento kung saan iimbak ang mga resulta ng aming trabaho. Pagbabalik sa pahina ng mga dokumento, makikita natin na ito ay lumitaw na bagong dokumento, kung saan nakaimbak ang lahat ng data na ipinasok ng user sa aming online registration form.


Mag-click sa dokumento. Magbubukas ito sa isang bagong window.


Tulad ng nakikita mo, ang mga resulta ay nai-save sa isang maginhawang tabular form.

Hindi namin titingnan ang lahat ng mga item sa menu sa seksyong ito, ngunit titingnan lamang ang mga pangunahing pag-andar na kakailanganin mo.


Upang i-edit ang form ng pagpaparehistro, kakailanganin mong piliin ang "I-edit ang Form" mula sa menu na "Mga Form".


Sa menu na ito, ang checkbox na "Tanggapin ang mga tugon" ay ino-on/i-off ang pagpapakita ng iyong form. Karaniwan kong inaalis ito kapag nag-expire ang oras na pinapayagan para sa mga user na magparehistro para sa isang kaganapan.


Malamang yun lang. Salamat sa lahat ng iyong atensyon. Kung mayroon kang anumang mga katanungan, tanungin sila sa mga komento - susubukan kong tumulong.

Dinadala ko sa iyong pansin ang isang napaka-simple at functional registration at authorization script sa site, na binubuo ng 3 PHP file na may koneksyon ng dalawang java script, sa tulong kung saan ang mga error ay ipinapakita sa mismong form nang hindi nire-reload ang pahina.

Matagumpay na nasubok ang script Mga bersyon ng PHP 5.3.3 at PHP 5.6.3

Ano ang magagawa at mayroon ang script

  • Magrehistro ng mga bagong user;
  • Pahintulutan ang mga user at mag-record ng cookies para sa isang tiyak na panahon (hindi na kailangang mag-log in sa bawat oras);
  • Ipakita at itago ang ilang partikular na impormasyon para sa mga awtorisado at hindi awtorisadong user, ayon sa pagkakabanggit;
  • May ADMIN PANEL kung saan maaari mong i-edit ang lahat ng data at tanggalin ang mga user.

Ang mga DEMO at Admin Panel ay naroon din

HAKBANG 1.
Kung gagamitin mo ang script ng lokal na pagpaparehistro at awtorisasyon gamit ang DENWER, hindi mo kailangang gumawa ng mga pagbabago sa mga file upang kumonekta sa database.
Kung hindi, buksan ang mga file: stayt.php, classes/Auth.class.php at adminka/connect.php, at sa pinakatuktok ay palitan ang data para sa pagkonekta sa database gamit ang sa iyo.

HAKBANG 2.
Pumunta (kung gumagamit ka ng DENWER) sa address: http://localhost/Tools/phpmyadmin/, kung sa pagho-host, pagkatapos ay i-click ang Mga Database at lumikha bagong base na may pangalan: rehistro at paghahambing: utf8_general_ci .
Siyempre, maaari mong itakda ang iyong pangalan, ngunit siguraduhing palitan ito sa mga file upang kumonekta sa database (tingnan ang hakbang 1).

HAKBANG 3.
Mag-click sa nilikhang database ng pagpaparehistro at pagkatapos ay sa tuktok na tab na SQL at sa lalabas na window ng input, i-paste ang code na ito at i-click ang OK.

GUMAWA NG TALAAN KUNG WALANG `my_users` (`id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `name` varchar(15) NOT NULL, `password` varchar(255) NOT NULL, `salt` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Lahat! Pumunta sa iyong address sa browser, subukan at mag-eksperimento.

Admin Panel

Pagkatapos mong makumpleto ang hindi bababa sa isang pagpaparehistro, maaari kang pumunta sa seksyon ng ADMIN.
Mag-login sa ADMIN PANEL:

Http://your_site.ru/adminka/

Huwag kalimutang i-secure ang folder na ito at maaari mo ring palitan ang pangalan nito.
Kapag binubuksan ang Admin Panel, i-click ang SEARCH button at lahat ng rehistradong user ay ipapakita, kung saan kapag nag-click ka tiyak na numero ID, makikita mo ang data ng user para sa pag-edit.

Maaari mo ring mabilis na mahanap ang isang user sa pamamagitan ng kanyang E-mail upang gawin ito, ipasok lamang ang isang kilalang e-mail sa field ng PAGHAHANAP at mag-click sa pindutan.
Hindi ko inirerekomenda ang paggamit ng ADD button, dahil ang user ay idinagdag sa system nang walang password. At hindi ko alam kung bakit nila ginawa iyon.

Iyon lang, kung hindi ito gumana o hindi malinaw, magtanong.


Kasabay nito, maaari mong subukang magbenta ng impormasyon (mga produkto).

Narito ang isang halimbawa ng Registration form gamit ang HTML. Dito maaaring magpakita ang isang programmer ng maraming "Text Field" hangga't gusto niya. Ang pangalan sa harap ng Text Field ay tinatawag na "Label". Sa dulo ng registration form ang kanilang ay isang "ADD" na buton sa likod kung saan maaaring gamitin ang anumang nais na link. Kapag na-click ito ay magre-redirect sa partikular na destinasyon.

Narito ang isang halimbawa ng Registration form gamit ang HTML. Dito maaaring magpakita ang isang programmer ng maraming "Text Field" hangga't gusto niya. Ang pangalan sa harap ng Text Field ay tinatawag na "Label". Sa dulo ng registration form ang kanilang ay isang "ADD" na buton sa likod kung saan maaaring gamitin ang anumang nais na link. Kapag na-click ito ay magre-redirect sa partikular na destinasyon.

HTML Code para sa registration form

Narito ang isang halimbawa ng Registration form gamit ang HTML. Dito maaaring magpakita ang isang programmer ng maraming "Text Field" hangga't gusto niya. Ang pangalan sa harap ng Text Field ay tinatawag na "Label". Sa dulo ng registration form ang kanilang ay isang "ADD" na buton sa likod kung saan maaaring gamitin ang anumang nais na link. Kapag na-click ito ay magre-redirect sa partikular na destinasyon.

Sa halimbawang ito ipinakita namin ang 9 na "Text Field". Ang laki ng Text Box ay maaari ding baguhin ayon sa kinakailangan.

pagpaparehistro.html

form ng pagpaparehistro

Form ng pagpaparehistro

Hello! Ngayon ay susubukan naming ipatupad ang pinaka simpleng pagpaparehistro sa website na may gamit ang PHP+ MySQL. Upang gawin ito, dapat na naka-install ang Apache sa iyong computer. Ang prinsipyo ng pagtatrabaho ng aming script ay ipinapakita sa ibaba.

1. Magsimula tayo sa paglikha ng talahanayan ng mga gumagamit sa database. Maglalaman ito ng data ng gumagamit (pag-login at password). Pumunta tayo sa phpmyadmin (kung gumagawa ka ng database sa iyong PC http://localhost/phpmyadmin/). Gumawa ng table mga gumagamit, magkakaroon ito ng 3 field.

Nilikha ko ito database ng mysql, maaari kang lumikha sa ibang database. Susunod, itakda ang mga halaga tulad ng sa figure:

2. Kinakailangan ang koneksyon sa talahanayang ito. Gumawa tayo ng file bd.php. Ang nilalaman nito:

$db = mysql_connect("iyong MySQL server","mag-login para sa server na ito", "password para sa server na ito");
mysql_select_db ("pangalan ng database kung saan kami kumukonekta", $db);
?>

Sa aking kaso, ganito ang hitsura:

$db = mysql_connect("localhost","user","1234");
mysql_select_db("mysql",$db);
?>

I-save bd.php.
Mahusay! Mayroon kaming isang talahanayan sa database at isang koneksyon dito. Ngayon ay maaari ka nang magsimulang lumikha ng isang pahina kung saan iiwan ng mga user ang kanilang data.

3. Lumikha ng isang reg.php file na may mga nilalaman (lahat ng mga komento sa loob):



Pagpaparehistro


Pagpaparehistro


















4. Gumawa ng file, na magpapasok ng data sa database at i-save ang user. save_user.php(mga komento sa loob):



{
}
//kung ipinasok ang login at password, pagkatapos ay pinoproseso namin ang mga ito upang hindi gumana ang mga tag at script, hindi mo alam kung ano ang maaaring ipasok ng mga tao


//alisin ang mga karagdagang espasyo
$login = trim ($login);
$password = trim ($password);
// kumonekta sa database
// suriin ang pagkakaroon ng user na may parehong login
$result = mysql_query("SELECT id FROM users WHERE login="$login"",$db);
kung (!empty($myrow["id"])) (
exit("Paumanhin, ang login na iyong ipinasok ay nakarehistro na. Mangyaring magpasok ng isa pang login.");
}
// kung hindi ito ang kaso, pagkatapos ay i-save ang data
$result2 = mysql_query("INSERT INTO users (login,password) VALUES("$login","$password")");
// Suriin kung may mga error
kung ($result2=="TRUE")
{
echo "Matagumpay kang nakarehistro! Ngayon ay maaari ka nang pumasok sa site. Home page";
}
iba pa(
echo "Error! Hindi ka nakarehistro.";
}
?>

5. Ngayon ang aming mga gumagamit ay maaaring magparehistro! Susunod, kailangan mong lumikha ng isang "pinto" para sa mga nakarehistrong user na makapasok sa site. index.php(mga komento sa loob):

// gumagana ang buong pamamaraan sa mga session. Ito ay kung saan naka-imbak ang data ng user habang siya ay nasa site. Napakahalaga na ilunsad ang mga ito sa pinakadulo simula ng pahina!!!
session_start();
?>


<a href="https://redcomrade.ru/tl/processors/kak-sdelat-stranicu-glavnoi-kak-izmenit-startovuyu-stranicu-v/">Home page</a>


Home page











Magrehistro



// Suriin kung walang laman ang login at user id variable
kung (walang laman($_SESSION["login")) o walang laman($_SESSION["id"]))
{
// Kung walang laman, hindi namin ipapakita ang link
echo "Naka-log in ka bilang bisita
Ang link na ito ay magagamit lamang sa mga rehistradong gumagamit";
}
iba pa
{

Nasa file index.php Magpapakita kami ng link na magbubukas lamang sa mga rehistradong user. Ito ang buong punto ng script - upang limitahan ang pag-access sa anumang data.

6. May natitira pang file na may verification ng inilagay na login at password. testreg.php (mga komento sa loob):

session_start(); // gumagana ang buong procedure sa mga session. Ito ay kung saan naka-imbak ang data ng user habang siya ay nasa site. Napakahalaga na ilunsad ang mga ito sa pinakadulo simula ng pahina!!!
if (isset($_POST["login"])) ($login = $_POST["login"]; if ($login == "") ( unset($login);) ) //ipasok ang login na ipinasok ni ang user sa $login variable, kung ito ay walang laman, pagkatapos ay sirain ang variable
if (isset($_POST["password"])) ($password=$_POST["password"]; if ($password =="") ( unset ($password);) )
//ilagay ang password na ipinasok ng user sa $password variable, kung ito ay walang laman, pagkatapos ay sirain ang variable
if (empty($login) or empty($password)) //kung ang user ay hindi nagpasok ng login o password, maglalabas kami ng error at itigil ang script
{
exit("Hindi mo nailagay ang lahat ng impormasyon, bumalik at punan ang lahat ng mga patlang!");
}
//kung ipinasok ang login at password, pagkatapos ay pinoproseso namin ang mga ito upang hindi gumana ang mga tag at script, hindi mo alam kung ano ang maaaring ipasok ng mga tao
$login = stripslashes($login);
$login = htmlspecialchars($login);
$password = stripslashes($password);
$password = htmlspecialchars($password);
//alisin ang mga karagdagang espasyo
$login = trim ($login);
$password = trim ($password);
// kumonekta sa database
include("bd.php");// ang bd.php file ay dapat nasa parehong folder tulad ng lahat ng iba pa, kung hindi, palitan lang ang path

$result = mysql_query("SELECT * FROM users WHERE login="$login"",$db); //kunin mula sa database ang lahat ng data tungkol sa user na may inilagay na login
$myrow = mysql_fetch_array($result);
kung (walang laman($myrow["password")]))
{
//kung ang user na may inilagay na login ay wala
}
iba pa(
//kung mayroon, suriin ang mga password
kung ($myrow["password"]==$password) (
//kung tumugma ang mga password, maglulunsad kami ng session para sa user! Maaari mo siyang batiin, nakapasok siya!
$_SESSION["login"]=$myrow["login"];
$_SESSION["id"]=$myrow["id"];//ang data na ito ay madalas na ginagamit, kaya ang naka-log in na user ay "dalhin ito kasama niya"
echo "Matagumpay kang nakapasok sa site! Home page";
}
iba pa(
//kung ang mga password ay hindi tugma

Exit ("Paumanhin, ang login o password na iyong inilagay ay hindi tama.");
}
}
?>

Well yun lang! Ang aralin ay maaaring mayamot, ngunit lubhang kapaki-pakinabang. Tanging ang ideya ng pagpaparehistro ay ipinapakita dito, pagkatapos ay maaari mong pagbutihin ito: magdagdag ng proteksyon, disenyo, mga patlang ng data, pag-load ng mga avatar, pag-log out sa account (upang gawin ito, sirain lamang ang mga variable mula sa session gamit ang function hindi nakatakda) at iba pa. Good luck!

Sinuri ko ang lahat, gumagana ito nang maayos!

Mga form ng HTML s - mga kumplikadong elemento interface. Kasama nila ang iba't ibang functional na mga elemento: input field At