Hoe maak je een registratiepagina in HTML. HTML-formulieren maken

In dit bericht beschrijf ik stap voor stap hoe je online registratieformulieren maakt, hoe je deze vervolgens op de website plaatst en de verzamelde gegevens op je computer opslaat. Sommigen vinden dit misschien te gedetailleerd. Sorry bij voorbaat. Niet alle gebruikers begrijpen informatie onmiddellijk.

Soms is het nodig om deelnemers voor een evenement online te registreren. Als alternatief kunt u gebruikers eenvoudigweg vragen een bestand met een vragenlijst te downloaden, in te vullen en naar te sturen opgegeven e-mailadres. Ik hou niet van deze methode omdat het vereist aanvullende verwerking vragenlijsten ingediend.

Laten we eens kijken naar de mogelijkheid om online te registreren, waarbij de gebruiker een formulier op uw website invult en alle gegevens in een tabel worden ingevoerd, die vervolgens naar een computer kunnen worden gedownload.

We gaan geen fiets uitvinden, maar gebruiken deze voor deze doeleinden Google-service Documenten. Als u de dienst heeft geactiveerd Google Drive, dan bevinden de documenten zich in uw Google-account wordt opgeslagen in de sectie Schijf.

Deze service biedt geweldige tools waarmee u een formulier kunt maken online registratie deelnemers van welke complexiteit dan ook.

Dus laten we beginnen!

Ga naar Google Documenten (Drive) en log in.


Klik in de linkerhoek op de knop Maken en selecteer Formulier.


De formuliereditor verschijnt in een nieuw venster.


Zoals u kunt zien, kunt u er een titel en beschrijving in invoeren, en we hebben al twee tekstvelden voorbereid op het formulier. In het eerste veld in de regel 'Vraag' schreef ik 'Uw naam'. Bij ‘Uitleg’ heb ik ‘Voer je echte naam in’ ingevoerd. Het veld ‘Vraagtype’ bleef staan ​​als ‘Tekst’. Ik heb ook het selectievakje 'Maak deze vraag verplicht' aangevinkt - hierdoor kan de gebruiker geen gegevens indienen totdat hij dit veld heeft ingevuld.


Klik op de knop "Gereed".

Laten we verder gaan met de tweede vraag. Om dit te doen, selecteert u het met een muisklik en klikt u op het pictogram Bewerken.
Laten we deze vraag bijvoorbeeld als volgt invullen: Vraag - Waar bent u in geïnteresseerd? Uitleg - Beschrijf uw interesses en gebieden waarin u zichzelf als expert beschouwt. Wijzig het vraagtype in - Tekst (paragraaf). Vink het selectievakje 'Deze vraag verplicht stellen' aan.


Klik op de knop "Gereed".

We hebben geen lege velden meer, dus om nieuwe velden toe te voegen hebben we links nodig bovenste hoek Klik op de knop ‘Element toevoegen’. Deze keer selecteren we het element “Eén uit de lijst”.


Laten we deze vraag als volgt invullen: Vraag – Uw geslacht, Uitleg – laat dit leeg, Type vraag laat staan ​​– Eén uit de lijst. Vink het vakje ‘Ga naar de antwoordpagina’ niet aan. U hebt het nodig als u besluit formulieren met meerdere pagina's te maken. Vink nogmaals het selectievakje ‘Maak deze vraag verplicht’ aan.


Klik op de knop "Gereed".

Toevoegen nieuw onderdeel- "Verschillende uit de lijst." Ik zal mijn opties niet herschrijven - kijk maar naar de foto.


Klik op “Voltooien”.

Voeg een nieuw element toe – ​​“Vervolgkeuzelijst”. Vul in zoals op de afbeelding.


Klik op “Voltooien”. Voeg een nieuw element toe – ​​"Schaal". Vul zoals eerder het voorbeeld op de afbeelding in.


Klik op “Voltooien”. Het zal er als volgt uitzien:


Voeg een nieuw element toe – ​​“Raster”. Laten we het invullen...


Laten we eens kijken..


Als je alles klaar hebt, klik dan op de knop Opslaan rechtsboven en iets links in het menu Aanvullende acties selecteer “Insluiten”.



We voegen de resulterende code toe aan onze pagina en bewonderen het resultaat.

Gefeliciteerd. Je hebt het formulier gemaakt online-enquête. Creëren nieuw uniform al met uw parameters en gebruik deze voor uw gezondheid.

Laten we niet bij de pakken blijven zitten en blijven kijken naar de mogelijkheden Google-documenten formulieren maken.

Laten we het kijken naar de formuliereditor afmaken en vervolgens verder gaan met het werken met documenten.

In het menu “Element toevoegen” hebben we nog twee onbeschreven items over – dit zijn “Sectiekop” en “Pagina-einde”. Ik gebruik ze meestal samen. Soms blijkt de vorm te langwerpig en is het raadzaam deze in twee delen te splitsen. Voor deze doeleinden wordt “Pagina-einde” gebruikt. Maar ik voeg na de pauze de “Sectiekop” toe, zodat de gebruiker niet vergeet wat hij invult en waarom.

We hebben ook een menu “Thema”, waarin u een van de voorgestelde ontwerpopties voor uw formulier kunt kiezen. Er is één voorbehoud: niet alle thema's geven Russische karakters correct weer.


Laten we nu terugkeren naar het menu "Aanvullende acties", waarin we het item "Wijzigingsbevestiging" niet hebben overwogen.
Hier kunt u uw tekst schrijven, die de gebruiker te zien krijgt na het invullen van het formulier. Het selectievakje 'Reactieoverzicht publiceren' toont gebruikers een link naar uw enquêteresultaten. Ik raad af om dit in registratieformulieren voor online evenementen te plaatsen, omdat het beter is om de persoonlijke gegevens van de gebruiker niet op internet weer te geven.

Het volgende menu is “Antwoorden bekijken”. Het bevat slechts twee items: "Samenvatting" en "Tabel".



Met het volgende menu “Verzenden per e-mail” kunt u uw formulier naar het e-mailadres van de gebruiker verzenden.


Hiermee zijn we klaar met het beoordelen van de belangrijkste functies van de formuliereditor en gaan we verder met het werken met het document waarin de resultaten van ons werk worden opgeslagen. Als we terugkeren naar de documentenpagina, zullen we zien dat deze al is verschenen nieuw document, waarin alle gegevens worden opgeslagen die de gebruiker heeft ingevoerd in ons online registratieformulier.


Klik op het document. Het wordt in een nieuw venster geopend.


Zoals u kunt zien, worden de resultaten opgeslagen in een handige tabelvorm.

We zullen niet alle menu-items in deze sectie bekijken, maar alleen de belangrijkste functies die u nodig heeft.


Om het registratieformulier te bewerken, moet u “Formulier bewerken” selecteren in het menu “Formulieren”.


In dit menu schakelt het selectievakje “Antwoorden accepteren” de weergave van uw formulier in/uit. Ik verwijder het meestal als de tijd die gebruikers hebben om zich voor een evenement te registreren, is verstreken.


Dat is waarschijnlijk alles. Ik dank u allen voor uw aandacht. Als je vragen hebt, stel ze dan in de reacties - ik zal proberen te helpen.

Ik breng een heel eenvoudig en functioneel onder uw aandacht registratie- en autorisatiescript op de site, bestaande uit 3 PHP-bestanden met de verbinding van twee Java-scripts, met behulp waarvan fouten in het formulier zelf worden weergegeven zonder de pagina opnieuw te laden.

Het script is succesvol getest PHP-versies 5.3.3 en PHP 5.6.3

Wat het script kan en heeft

  • Registreer nieuwe gebruikers;
  • Gebruikers autoriseren en cookies registreren voor een bepaalde periode (u hoeft niet elke keer in te loggen);
  • Bepaalde informatie tonen en verbergen voor respectievelijk geautoriseerde en ongeautoriseerde gebruikers;
  • Heeft een ADMIN PANEL waar u alle gegevens kunt bewerken en gebruikers kunt verwijderen.

DEMO- en beheerderspanelen zijn er ook

STAP 1.
Als u het lokale registratie- en autorisatiescript gebruikt met DENWER, hoeft u geen wijzigingen aan te brengen in de bestanden om verbinding te maken met de database.
Open anders de bestanden: stayt.php, klassen/Auth.class.php en adminka/connect.php, en vervang helemaal bovenaan de gegevens voor verbinding met de database door die van u.

STAP 2.
Ga (als je DENWER gebruikt) naar het adres: http://localhost/Tools/phpmyadmin/, als je op hosting zit, klik dan op Databases en maak nieuwe basis met naam: registreren en vergelijking: utf8_general_ci .
Je kunt uiteraard je eigen naam instellen, maar vervang deze dan wel in de bestanden om verbinding te maken met de database (zie stap 1).

STAP 3.
Klik op de aangemaakte registerdatabase en vervolgens op het bovenste tabblad SQL en plak in het invoervenster dat verschijnt deze code en klik op OK.

MAAK TABEL INDIEN NIET BESTAAT `mijn_gebruikers` (`id` int(11) NIET NULL AUTO_INCREMENT, `gebruikersnaam` varchar(255) NIET NULL, `names` varchar(15) NIET NULL, `wachtwoord` varchar(255) NIET NULL, `salt` varchar(100) NIET NULL, PRIMAIRE SLEUTEL (`id`)) ENGINE=MyISAM STANDAARD CHARSET=utf8;

Alle! Ga naar uw adres in de browser, probeer en experimenteer.

Beheerderspaneel

Nadat u minimaal één registratie heeft voltooid, kunt u naar het ADMIN-gedeelte gaan.
Log in op het ADMIN-PANEEL:

Http://uw_site.ru/adminka/

Vergeet niet deze map te beveiligen en u kunt deze ook hernoemen.
Wanneer u het beheerdersdashboard opent, klikt u op de knop ZOEKEN en alle geregistreerde gebruikers worden weergegeven, waar u op klikt specifiek nummer ID, u ziet gebruikersgegevens die u kunt bewerken.

U kunt een gebruiker ook snel vinden via zijn e-mailadres; u hoeft alleen maar een bekend e-mailadres in het veld ZOEKEN in te voeren en op de knop te klikken.
Ik raad het gebruik van de knop TOEVOEGEN af, omdat de gebruiker zonder wachtwoord aan het systeem wordt toegevoegd. En ik heb geen idee waarom ze het überhaupt hebben gemaakt.

Dat is alles, als het niet lukt of niet duidelijk is, stel dan vragen.


Onderweg kun je proberen informatie (producten) te verkopen.

Hier is een voorbeeld van een registratieformulier met HTML. Hier kan een programmeur zoveel "Tekstvelden" weergeven als hij/zij wil. De naam vóór het tekstveld heet "Label". Aan het einde van het registratieformulier bevindt zich een knop "TOEVOEGEN" waarachter elke gewenste link kan worden gebruikt. Eenmaal erop geklikt, wordt het doorgestuurd naar die specifieke bestemming.

Hier is een voorbeeld van een registratieformulier met HTML. Hier kan een programmeur zoveel "Tekstvelden" weergeven als hij/zij wil. De naam vóór het tekstveld heet "Label". Aan het einde van het registratieformulier bevindt zich een knop "TOEVOEGEN" waarachter elke gewenste link kan worden gebruikt. Eenmaal erop geklikt, wordt het doorgestuurd naar die specifieke bestemming.

HTML-code voor registratieformulier

Hier is een voorbeeld van een registratieformulier met HTML. Hier kan een programmeur zoveel "Tekstvelden" weergeven als hij/zij wil. De naam vóór het tekstveld heet "Label". Aan het einde van het registratieformulier bevindt zich een knop "TOEVOEGEN" waarachter elke gewenste link kan worden gebruikt. Eenmaal erop geklikt, wordt het doorgestuurd naar die specifieke bestemming.

In dit voorbeeld hebben we 9 "Tekstvelden" getoond. De grootte van het tekstvak kan ook worden gewijzigd volgens de vereisten.

registratie.html

registratieformulier

Registratieformulier

Hallo! Nu zullen we proberen het meeste te implementeren eenvoudige registratie op de website met met behulp van PHP+ MySQL. Om dit te doen, moet Apache op uw computer zijn geïnstalleerd. Het werkingsprincipe van ons script wordt hieronder weergegeven.

1. Laten we beginnen met het maken van de gebruikerstabel in de database. Het bevat gebruikersgegevens (login en wachtwoord). Laten we naar phpmyadmin gaan (als u een database op uw pc aanmaakt http://localhost/phpmyadmin/). Maak een tabel gebruikers, zal het 3 velden hebben.

Ik creëer het in mysql-database, kunt u in een andere database maken. Stel vervolgens de waarden in zoals in de afbeelding:

2. Er is een verbinding met deze tafel vereist. Laten we een bestand maken bd.php. De inhoud:

$db = mysql_connect("uw MySQL-server", "log in voor deze server", "wachtwoord voor deze server");
mysql_select_db ("naam van de database waarmee we verbinding maken", $db);
?>

In mijn geval ziet het er zo uit:

$db = mysql_connect("localhost", "gebruiker", "1234");
mysql_select_db("mijnsql",$db);
?>

Redden bd.php.
Geweldig! We hebben een tabel in de database en een verbinding ermee. Nu kunt u beginnen met het maken van een pagina waarop gebruikers hun gegevens achterlaten.

3. Maak een reg.php-bestand met inhoud (alle opmerkingen erin):



Registratie


Registratie


















4. Maak een bestand, waarmee gegevens in de database worden ingevoerd en de gebruiker wordt opgeslagen. save_user.php(opmerkingen binnenin):



{
}
//als de login en het wachtwoord worden ingevoerd, verwerken we deze zodat tags en scripts niet werken, je weet nooit wat mensen invoeren


//verwijder extra spaties
$login = trim($login);
$wachtwoord = trim($wachtwoord);
// maak verbinding met de database
// controleer of er een gebruiker met dezelfde login bestaat
$result = mysql_query("SELECT id FROM gebruikers WHERE login="$login"",$db);
if (!empty($mijnrij["id"])) (
exit("Sorry, de door u ingevoerde login is al geregistreerd. Voer een andere login in.");
}
// als dit niet het geval is, sla dan de gegevens op
$result2 = mysql_query("INSERT INTO gebruikers (login,wachtwoord) VALUES("$login","$password")");
// Controleer of er fouten zijn
als ($result2=="TRUE")
{
echo "Je bent succesvol geregistreerd! Nu kun je de site betreden. Homepagina";
}
anders(
echo "Fout! Je bent niet geregistreerd.";
}
?>

5. Nu kunnen onze gebruikers zich registreren! Vervolgens moet u een “deur” creëren zodat reeds geregistreerde gebruikers de site kunnen betreden. index.php(opmerkingen binnen):

// de hele procedure werkt in sessies. Hier worden de gegevens van de gebruiker opgeslagen terwijl hij op de site is. Het is heel belangrijk om ze helemaal aan het begin van de pagina te lanceren!!!
sessie_start();
?>


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


Startpagina











Register



// Controleer of de variabelen login en gebruikers-ID leeg zijn
if (leeg($_SESSION["login"]) of leeg($_SESSION["id"]))
{
// Indien leeg, tonen we de link niet
echo "Je bent ingelogd als gast
Deze link is alleen beschikbaar voor geregistreerde gebruikers";
}
anders
{

In bestand index.php We zullen een link weergeven die alleen toegankelijk is voor geregistreerde gebruikers. Dit is het hele punt van het script: de toegang tot alle gegevens beperken.

6. Er blijft een bestand achter met verificatie van de ingevoerde login en wachtwoord. testreg.php (commentaar binnen):

session_start();// de hele procedure werkt op sessies. Hier worden de gegevens van de gebruiker opgeslagen terwijl hij op de site is. Het is heel belangrijk om ze helemaal aan het begin van de pagina te lanceren!!!
if (isset($_POST["login"])) ( $login = $_POST["login"]; if ($login == "") ( unset($login);) ) //voer de login in die is ingevoerd door de gebruiker in de variabele $login, als deze leeg is, vernietig dan de variabele
if (isset($_POST["wachtwoord"])) ( $password=$_POST["wachtwoord"]; if ($wachtwoord =="") ( unset($wachtwoord);) )
//plaats het door de gebruiker ingevoerde wachtwoord in de variabele $password. Als deze leeg is, vernietig dan de variabele
if (empty($login) or empty($password)) //als de gebruiker geen login of wachtwoord heeft ingevoerd, geven we een foutmelding en stoppen we het script
{
exit("Je hebt nog niet alle gegevens ingevuld, ga terug en vul alle velden in!");
}
//als de login en het wachtwoord worden ingevoerd, verwerken we deze zodat tags en scripts niet werken, je weet nooit wat mensen invoeren
$login = stripslashes($login);
$login = htmlspecialchars($login);
$wachtwoord = stripslashes($wachtwoord);
$wachtwoord = htmlspecialchars($wachtwoord);
//verwijder extra spaties
$login = trim($login);
$wachtwoord = trim($wachtwoord);
// maak verbinding met de database
include("bd.php");// het bd.php-bestand moet zich in dezelfde map bevinden als alle andere, als dit niet het geval is, verander dan gewoon het pad

$result = mysql_query("SELECT * VAN gebruikers WAAR login="$login"",$db); //haal alle gegevens over de gebruiker met de ingevoerde login op uit de database
$mijnrow = mysql_fetch_array($result);
if (leeg($mijnrij["wachtwoord"]))
{
//als de gebruiker met de ingevoerde login niet bestaat
}
anders(
//if bestaat, controleer dan de wachtwoorden
if ($mijnrij["wachtwoord"]==$wachtwoord) (
//als de wachtwoorden overeenkomen, starten we een sessie voor de gebruiker! Je kunt hem feliciteren, hij is binnen!
$_SESSION["inloggen"]=$mijnrij["inloggen"];
$_SESSION["id"]=$myrow["id"];//deze gegevens worden heel vaak gebruikt, dus de ingelogde gebruiker zal deze “met zich meedragen”
echo "Je bent succesvol op de site terechtgekomen! Startpagina";
}
anders(
//als de wachtwoorden niet overeenkomen

Afsluiten ("Sorry, de login of het wachtwoord dat u heeft ingevoerd is onjuist.");
}
}
?>

Nou, dat is het! De les is misschien saai, maar erg nuttig. Hier wordt alleen het idee van registratie getoond, daarna kunt u het verbeteren: bescherming, ontwerp, gegevensvelden toevoegen, avatars laden, uitloggen bij uw account (om dit te doen, vernietig eenvoudigweg variabelen uit de sessie met de functie uitgeschakeld) enzovoort. Succes!

Ik heb alles gecontroleerd, het werkt naar behoren!

HTML-formulieren S - complexe elementen interface. Ze omvatten verschillende functionele elementen: invoervelden En