Auktoriserat inloggningsformulär html. Skapa ett formulär i HTML

HTML -taggar som definierar HTML -formulär på webbplatsen

Vi skapar webbplatser och enskilda sidor på Internet att kommunicera med besökare.

HTML -formulär används för att registrera besökare på webbplatsen, för interaktiva omröstningar och omröstningar, låter dig skicka meddelanden, göra inköp och så vidare. Html Formuläret skapas med ett syfte: insamling och efterföljande överföring av information för bearbetning till ett programskript eller via e-post.

Exempel på HTML -formulär | Ange webbplatsen

Taggar, attribut och värden

• - bestämma formen.
• name = "" - definierar formulärets namn.
• method = "" - definierar metoden för att skicka data från formuläret. Värden: "get" (standard) och "post". "Post" -metoden används ofta, eftersom den låter dig överföra stora mängder data.
• action = "" - definierar webbadressen som data skickas till för behandling. I vårt fall, enter_data.php ..
• - definiera sådana formelement som knappar, alternativknappar, textfält för datainmatning.
• type = "text" - definierar ett textfält för datainmatning.
• type = "password" - definierar ett fält för att ange ett lösenord, medan texten visas som asterisker eller cirklar.
• type = "checkbox" - definierar en kryssruta.
• type = "hidden" - definierar ett dolt formulärelement - används för att skicka ytterligare information till servern.
• size = "25" - textfältets längd i tecken.
• maxlength = "30" - det maximala antalet tecken som ska anges.
• value = "" - definierar det värde som ska skickas för bearbetning om det hänvisar till alternativknappar eller omkopplare. Värdet på detta attribut som en del av ett textfält eller en knapp visas som till exempel Vasya eller Login i exemplet ovan.

Exempel på HTML -formulär | Kommentarer på sajten

namn Post

Taggar, attribut och värden

• action = "http: //site/comments.php" - definierar webbadressen till vilken data från formuläret kommer att skickas.
• id = "" - definierar formelementets namn, identifierare.
• name = "" - definierar formelementets namn.
• - definiera ett textfält som en del av ett formulär.
• cols = "" - definierar antalet kolumner i formulärets textfält.
• rader = "" - definierar antalet rader i formulärets textfält.

Om mellan lägg text, kommer det att visas inuti rutan som ett exempel som är lätt att ta bort.

Exempel på HTML -formulär | Listruta

Första positionen Andra positionen Tredje position Fjärde position

Taggar, attribut och värden

• - definiera en lista med positioner för val.
• size = "" - definierar antalet synliga listpositioner. Om värdet är 1 har vi att göra med en rullgardinsmeny.
• - definiera listans positioner (objekt).
• value = "" - innehåller det värde som skickas av formuläret vid den angivna webbadressen för bearbetning.
• vald = "vald" - Väljer listans position som exempel.

Exempel på HTML -formulär | Rullningslista

Genom att öka värdet på attributet size = "" får vi en lista med en rullningslist:

Första position Andra position Tredje position Fjärde position

Första positionen Andra positionen Tredje position Fjärde position

För det här alternativet använder vi multipel = "multipel" -flaggan, vilket gör det möjligt att välja flera positioner. Hans frånvaro gör att endast ett objekt kan väljas.

typ = "skicka" - definierar knappen.

type = "reset" - definierar återställningsknappen.

value = "" - definierar etiketten på knappen.

Se mer:

HTML -formulär är komplexa gränssnittselement. De innehåller olika funktionella element: inmatningsfält och , listor <select>, tips osv. All formulärkod är innesluten i ett element <form> .</p> <p>Merparten av informationen i webbformulär skickas med hjälp av elementet <input>... För att ange en textrad används elementet <input type="text">, för flera rader - element <textarea>... Element <select>skapar en rullgardinsmeny.</p> <p>Element <label>skapar etiketter för formulärfält. Det finns två sätt att gruppera en etikett och marginal. Om fältet är inuti elementet <label>, då behöver inte attributet for anges.</p><p> <label for="lastname">Efternamn</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Efternamn</label> <label>Efternamn <input type="text" name="lastname"></label> </p><p>Formfält kan delas in i logiska block med hjälp av elementet <fieldset>... Varje sektion kan ges en titel med hjälp av elementet <legend> .</p><p> <fieldset> <legend>Kontaktinformation</legend> <label>namn <input type="text" required></label> <label>E-post <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>Ris. 1. Gruppera formulärfält</p><p>För att göra formuläret mer läsbart för användare läggs text till i formulärfälten som innehåller ett exempel på inmatningsdata. Sådan text kallas platshållartext och skapas med hjälp av attributet platshållare.</p> <p>Obligatoriska fält måste också markeras. Innan HTML5 användes en asterisk * bredvid ett fältnamn. Den nya specifikationen har ett speciellt obligatoriskt attribut som gör att du kan markera ett obligatoriskt fält på markeringsnivån. Detta attribut instruerar webbläsaren (förutsatt att den stöder HTML5) att inte skicka data efter att användaren klickat på skicka -knappen tills de angivna fälten har fyllts i.</p><p> <input type="text" required placeholder="ditt namn"> </p><p>Om du vill ändra textrutans utseende när den får fokus använder du pseudoklassen fokus. Till exempel kan du göra bakgrunden för det aktuella fältet mörkare eller lägga till en färgad kant så att den sticker ut från resten:</p><p>Ingång: fokus (bakgrund: #eaeaea;)</p><p>Ett annat användbart html5 -attribut är autofokusattributet. Det låter dig automatiskt ställa in fokus på önskat startfält för element <input>och <textarea>(endast ett element i varje formulär).</p> <h2>Ett exempel på att skapa ett registreringsformulär</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>registrering</h1> </div> <form method="post" action="form.php"> <div> <label for="name">namn</label> <input type="text" name="name" required> </div> <div class="radio">Golv <label> <input type="radio" name="sex" value="manlig">manlig <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="kvinna">kvinna <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-post</label> <input type="email" name="email" required> </div> <div> <label for="country">Land</label> <select name="country"> <option>Välj ditt hemland</option> <option value="Ryssland">Ryssland</option> <option value="Ukraina">Ukraina</option> <option value="Vitryssland">Vitryssland</option> </select> <div class="select-arrow"></div> </div> <button type="submit">skicka</button> </form> </div> <p><b>Notera</b><br>action = "form.php" - länk till filen för formulärhanteraren. Skapa en fil i UTF-8-kodning, ladda upp den till servern och ersätt action = "form.php" med sökvägen till filen på din server.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Ris. 2. Standardformulärets utseende <p>Som du kan se från figuren har varje formulärelement standardwebbläsartyper. Låt oss städa upp stilarna och styla formelementen.</p><p> Form-wrap (bredd: 550px; bakgrund: # ffd500; kantradie: 20px;) .form-wrap * (övergång: .1s linjär) .profil (bredd: 240px; float: vänster; text-align: center; vaddering : 30px;) form (bakgrund: vit; float: vänster; bredd: calc (100%-240px); vaddering: 30px; kantradie: 0 20px 20px 0; färg: # 7b7b7b;) .form-wrap: efter, form div: after (innehåll: ""; display: tabell; tydlig: båda;) form div (margin-bottom: 15px; position: relativ;) 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 %);) / ********************** styling av formelementen ******************** * ** / label, span (display: block; font-size: 14px; margin-bottom: 8px;) input, input (border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; bakgrund: # e6e6e6;) input: focus, input: focus (box-sha dow: infälld 0 0 0 2px rgba (0,0,0, .2); ) .radioetikett (position: relativ; vaddering-vänster: 50px; markör: pekare; bredd: 50%; float: vänster; radhöjd: 40px;) .radioingång (position: absolut; opacitet: 0;) .radio -kontroll (position: absolut; topp: 0; vänster: 0; höjd: 40px; bredd: 40px; bakgrund: # e6e6e6; kantradie: 50%; text-align: center;). hane: före (innehåll: " \ f222 "; font-family: FontAwesome; font-weight: bold;) .female: before (content:" \ f221 "; font-family: FontAwesome; font-weight: bold;). radioetikett: sväng inmatning ~. radiokontroll, .radiol ingång: fokus ~ .radio-kontroll (box-skugga: infälld 0 0 0 2px rgba (0,0,0, .2);) .radioingång: kontrollerad ~ .radio-kontroll (färg: röd;) välj (bredd: 100%; markör: pekare; vaddering: 10px 15px; kontur: 0; kant: 0; bakgrund: # e6e6e6; färg: # 7b7b7b; -webkit -utseende: ingen; / * avmarkera webkiten - webbläsare * / -moz -utseende: ingen; / * avmarkera Mozilla Firefox * /) välj :: -ms -expand (display: none; / * avmarkera IE * /) .val-pil (position: absolut; topp: 38px; höger: 15px; bredd: 0; höjd: 0; pekarhändelser: ingen; / * aktivera visningen av listan genom att klicka på pilen * / border-style: solid; kantbredd: 8px 5px 0 5px; kantfärg: # 7b7b7b transparent transparent transparent; ) -knapp (vaddering: 10px 0; kantbredd: 0; display: block; bredd: 120px; marginal: 25px auto 0; bakgrund: # 60e6c5; färg: vit; teckenstorlek: 14px; kontur: ingen; text-transform : versaler;) / ********************** lägga till anpassningsbarhet till formuläret ******************* ** ** / @media (maxbredd: 600px) (.form-wrap (marginal: 20px auto; maxbredd: 550px; bredd: 100%;) .profil, form (float: ingen; bredd: 100% ;) h1 (margin-top: auto; padding-bottom: 50px;) form (kantradie: 0 0 20px 20px;))</p><p><b>Form.php -fil</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: din_post "." \ r \ n "; if (! empty ($ name) &&! empty ($ sex) &&! empty ($ email) &&! empty ($ country) && filter_var ($ email, FILTER_VALIDATE_EMAIL)) (mail ($ email, $ subject, $ msg, $ headers); echo "Tack! Du har registrerat dig.";)?></p><p><b>Notera</b><br>I variabeln $ subject anger du texten som ska visas som ämnet för bokstaven. <br>Ditt_namn - här kan du ange namnet som ska visas i fältet "från vilken bokstaven"; <br>url_your_site, ersätt med webbplatsens adress med registreringsformuläret; <br>ersätt din_email med din e -postadress; <br>$ headers. = "Bcc: din_post". "\ r \ n"; skickar en blindkopia till din e -postadress.</p> <p>Som du redan vet har webbklienten möjlighet att överföra olika uppgifter till webbservern med hjälp av GET- och POST -förfrågningar. <i>HTML -formulär</i>är huvudverktyget för att skapa sådana frågor. I grund och botten är ett HTML -formulär ett eller flera fält för inmatning av information på en webbsida. Ett illustrativt exempel på ett HTML -formulär är formuläret för inloggning och lösenord för auktorisering på webbplatsen.</p> <p>HTML -formuläret beskrivs med en parad tagg <i>form</i>... Denna tagg har två viktiga attribut: <i>metod</i> och <i>handling</i>... Metodattributet anger typen av HTTP -begäran (get eller post), åtgärden anger det begärda dokumentet, det vill säga sökvägen till filen som kommer att begäras. Sökvägen kan antingen vara absolut (anger webbplatsens domän) eller relativ. Till exempel:</p> <<span>form method = "get" action = "/login.php"></span> ... <<span>/ form></span> <p>Det finns flera olika typer av datainmatningselement som passar in i ett formulär. Elementet jag skulle vilja börja med heter <i>Skicka in</i>:</p> <<span>input type = "submit" value = "(! LANG: Logga in" / > !}</span> <p>Elementet är en knapp som vid klickning utför en HTTP -begäran. Attribut <i>värde</i> sätter etiketten på knappen. Ett formulär kan innehålla flera inlämningselement. För att i det begärda dokumentet kunna avgöra vilken av knapparna som trycktes ned är det nödvändigt att ange attributen för skicka element <i>namn</i>... Till exempel:</p> <<span>form method = "get" action = "/control.php"></span> <<span>inmatningstyp = "skicka" namn = "skicka" värde = "(! LANG: Lägg till" / > !}</span> <<span>input type = "submit" name = "submit" value = "(! LANG: Edit" / > !}</span> <<span>/ form></span> <p>När du gör en begäran innehåller webbläsaren en HTTP -parameter som kännetecknar det klickade skicka -elementet. Värdet på namnattributet för den tryckta knappen kommer att tas som namnet på parametern, och värdet på värdeattributet kommer att tas som värdet. När du klickar på knappen Lägg till genereras en begäran:</p><p>/control.php?submit=Add</p><p>och när du klickar på knappen Redigera:</p><p>/control.php?submit=Redigera</p><p>Nästa element är det enklaste elementet för att mata in en enda textrad. Dess HTML -kod:</p> <<span>inmatningstyp = "text" namn = "namn" /></span> <p><input type="text"></p> <p>namn är ett obligatoriskt attribut för att delta i HTTP -begäran. Värdet på detta attribut används som namnet på HTTP -parametern. Detta attribut är tillgängligt för alla typer av formelement.</p> <p>Ett element kan också ställas in på värdeattributet och specificera texten som kommer att skrivas in som standard i elementet. Till exempel:</p> <<span>input type = "text" name = "login" value = <span>"Användarnamn"</span> / > </span> <p>Element <i>Lösenord</i> tjänar till att ange lösenord. Utåt är det samma, men den inmatade texten visas som asterisker eller prickar:</p> <<span>inmatningstyp = "lösenord" /></span> <p><input type="password"></p> <p>Detta är i princip tillräckligt för att skapa den enklaste formen av auktorisation. Låt oss försöka implementera det och sedan gå tillbaka till att titta på resten av elementtyperna.</p> <p>Låt oss skapa en auth.php -fil i rotkatalogen med följande innehåll:</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>huvud></span> <<span>titel></span> Tillstånd<<span>/ titel></span> <<span>meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" /></span> <<span>/ huvud></span> <<span>kropp></span> <<span>form method = "get" action = "/auth.php"></span> <<span>tabell></span> <<span>tr></span> <<span>td></span> Användarnamn:<<span>/ td></span> <<span>td></span> <<span>input type = "text" name = "login" value = "" /></span> <<span>/ td></span> <<span>/ tr></span> <<span>tr></span> <<span>td></span> Lösenord:<<span>/ td></span> <<span>td></span> <<span>inmatningstyp = "lösenord" namn = "pass" värde = "" /></span> <<span>/ td></span> <<span>/ tr></span> <<span>/ tabell></span> <<span>input type = "submit" value = "(! LANG: Logga in" / > !}</span> <<span>/ form></span> <<span>/ kropp></span> <<span>/ html></span> <p>Som du kan se, inuti formulärtaggen kan du placera taggar som hjälper till att fint markera formuläret (jag lägger ett bord inuti). Formuläret innehåller fält för att ange ett användarnamn och lösenord med namnen inloggning respektive pass. När du klickar på "Logga in" genereras en GET -begäran för dokumentet /auth.php (det vill säga sidan begär själv). I mitt fall var hela webbadressen till sidan <i>http: //test-domain3/auth.php</i>.</p> <p>Ange dina uppgifter och klicka på "Logga in". Sidan ska laddas om. Sidans adress bör också ändras. I mitt fall tog den formen:</p><p>Http: //test-domain3/auth.php? Login = Joker-jar & pass = 12345</p><p>Detta innebär att auth.php -dokumentet begärdes med GET -parametrar som angavs med ett HTML -formulär. Placera en PHP -hanterare högst upp i filen auth.php som accepterar autentiseringsuppgifter:</p> <?php <span>// - Kontrollera om data har överförts</span> if (isset ($ _GET ["login"]) && isset ($ _GET ["pass"])) (echo <span>"Ditt användarnamn:"</span>... $ _GET ["inloggning"]. ", ditt lösenord: " . $ _GET ["passera"]; utgång; )?> <p>Om ett användarnamn och lösenord har skickats till sidan utlöses villkoret och meddelandet visas. Kommer också att kallas <i>utgång</i>, vilket kommer att stoppa ytterligare körning av skriptet, därför kommer formuläret inte att visas.</p> <p>Att skicka ett lösenord med en GET -begäran är osäkert, eftersom det är synligt i adressfältet. Låt oss ändra förfrågningstypen till POST. För att göra detta, ändra värdet på metodattributet och i PHP -hanteraren för att komma åt $ _GET -arrayen, ändra det till $ _POST. Kontrollera om skriptet fungerar.</p> <p>Nästa element är <i>kryssruta</i>... Det används när ett ja / nej -svar krävs från användaren:</p> <<span>inmatningstyp = "kryssruta" /></span> <p>Om kryssrutan inte är markerad skickas ingenting i parametrarna. Annars skickas namnparametern med värdet <i>på</i>... Det finns en sak till. Som regel finns det en förklarande inskrift bredvid kryssrutan. Det är en bra metod för webbansvarig att implementera en kryssruta svar på klick på denna etikett. Detta görs enkelt. Kryssrutan tilldelas ett specifikt id, och själva etiketten är dekorerad med en tagg <i>märka</i> med attribut <i>för</i> vars värde är lika med kryssrutans identifierare:</p> <<span>input type = "checkbox" id = "remember" name = "remember" /></span> <<span>etikett för = "minns"></span> Kom ihåg mig<<span>/ etikett></span> <p><input id="remember" name="remember" type="checkbox"></p> <p>Ett utseendeelement används för att välja ett svar från en uppsättning värden. Låt oss säga att användaren måste välja en av tre färger:</p> <<span>inmatningstyp = "radio" id = "röd" namn = "färg" värde = "(! LANG: röd" / > !}</span> <<span>etikett för = "röd"></span> Röd<<span>/ etikett></span> <<span>br /></span> <<span>inmatningstyp = "radio" id = "grönt" namn = "färg" värde = "(! LANG: grönt" / > !}</span> <<span>etikett för = "grön"></span> Grön<<span>/ etikett></span> <<span>br /></span> <<span>inmatningstyp = "radio" id = "blå" namn = "färg" värde = "(! LANG: blå" / > !}</span> <<span>etikett för = "blå"></span> Blå<<span>/ etikett></span> <<span>br /></span> <p><input id="red" name="color" type="radio" value="röd"><br><input id="green" name="color" type="radio" value="grön"><br><input id="blue" name="color" type="radio" value="blå"></p> <p>Observera att alla element har samma namnvärde. Endast ett värde kan väljas. Värdet för det valda elementet skickas till exempel i HTTP -parametern <i>färg = blå</i>.</p> <p>För att initialt välja några av elementen, till exempel det första, måste det ställa in attributet <i>kontrollerade</i> med innebörden <i>kontrollerade</i>(XHTML -standard):</p> <<span>inmatningstyp = "radio" id = "röd" namn = "färg" värde = "(! LANG: röd" checked = "checked" / > !}</span> <p>Det finns ett speciellt element för att ange stor text med flera rader <i>textområde</i>:</p> <<span>textområde rader = "6" cols = "20" name = "text"></span> Texten inuti elementet<<span>/ textarea></span> <p>Texten inuti elementet</p> <p>Detta element, som du kan se, skiljer sig från de tidigare. Det är en parad tagg, och texten placeras inte i attributet, utan i taggens kropp. Elementet har också ett namnattribut. Använda attributet <i>rader</i> du kan ställa in antalet rader i ett element, <i>cols</i>- antalet tecken i raden. Textområdeselementet används som regel i POST-formulär, eftersom innebär att du skriver in en lång text (till exempel ett foruminlägg).</p> <p>Listruta. Visst stötte vi på ett sådant inslag i program. Låter dig välja ett värde från en uppsättning. Varukoden är inte heller helt vanlig. Först skapas ett behållarelement <i>Välj</i>, får det attributet name:</p> <<span>välj namn = "städer"></span> <<span>/ välj></span> <p>Listobjekt placeras inuti behållaren. Listobjektet är en parad tagg <i>alternativ</i>, får varje element ett värdeattribut. Elementets bildtext skrivs in i elementets kropp:</p> <<span>välj namn = "stad"></span> <<span>option value = "(! LANG: msk" > !}</span> Moskva<<span>/ alternativ></span> <<span>option value = "(! LANG: vlad" > !}</span> Vladivostok<<span>/ alternativ></span> <<span>option value = "(! LANG: nsk" > !}</span> Novosibirsk<<span>/ alternativ></span> <<span>/ välj></span> <p>I HTTP -begäran skickas en parameter med till exempel namnnamnet och värdet på det valda elementet <i>stad = vlad</i>... Som standard väljs det första elementet i listan. Om du vill att ett annat element ska väljas ställer du in attributet <i>vald</i> med innebörden <i>vald</i>:</p> <<span>option value = "(! LANG: vlad" selected = "selected" > !}</span> Vladivostok<<span>/ alternativ></span> <p>Värdeförteckning. Om väljelementet är inställt på attributet <i>storlek</i> med ett numeriskt värde blir rullgardinsmenyn till en lista med värden. I det här fallet kommer värdet på storleksattributet att bestämma elementets vertikala storlek:</p> <<span>välj namn = "stad" storlek = "3"></span> <<span>option value = "(! LANG: msk" > !}</span> Moskva<<span>/ alternativ></span> <<span>option value = "(! LANG: vlad" > !}</span> Vladivostok<<span>/ alternativ></span> <<span>option value = "(! LANG: nsk" > !}</span> Novosibirsk<<span>/ alternativ></span> <<span>/ välj></span> <p>Moskva Vladivostok Novosibirsk</p> <p>Om väljelementet är inställt på attributet <i>flera olika</i> med innebörden <i>flera olika</i>(XHTML -standard), kommer det att vara möjligt att välja mer än ett element samtidigt (till exempel genom att hålla ned Ctrl -tangenten). I det här fallet skickas alla valda objekt med samma namn i HTTP -begäran, till exempel: <i>stad = msk & stad = vlad & stad = nsk</i>.</p> <p>Ibland är det nödvändigt att skicka en parameter i en HTTP -begäran som användaren inte ska redigera och ibland även se. Låt oss säga att du implementerar ett formulär för redigering av nyheter. I HTTP -begäran måste du skicka identifieraren för denna nyhet. För sådana fall finns det ett dolt HTML -formelement:</p> <<span>input type = "hidden" name = "param" value = "" /></span> <p>Detta element kommer inte att synas på formuläret, men HTTP -parameternamnet = värde skickas när begäran görs.</p> <p>Ibland kan ett formrengöringselement vara till nytta. Knappen, när den trycks in, raderas all data som användaren anger i formuläret:</p> <<span>input type = "reset" value = "(! LANG: Clear" / > !}</span> <p>De listade elementen har två speciella attribut:</p> <p>readonly = "readonly" - förbjuder att ändra information i elementet (skrivskyddat läge); <br>inaktiverat = "inaktiverat" - gör elementet inaktivt.</p> <p>Det finns också ett element för att välja en fil som laddas upp till webbservern när formuläret skickas in, men detta finns troligen i en separat artikel.</p> <p>Hallå. Så vi har lärt oss några element för att skapa former. Det är dags att kombinera vår kunskap för att lösa ett större problem. Låt oss skapa det enklaste inloggningsformuläret på webbplatsen. För att göra detta behöver vi två fält, vi skapar och binder signaturer till dem.</p> <p>Det första fältet är för inloggning, det andra är för lösenordet. Och med det andra är inte allt så enkelt. Eftersom det för närvarande bara är ett fält för att mata in text.</p> <p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Logga in</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Lösenord</label></td> <td><input id="passwordField" type="text" name="password"></td> </tr> </table> </form> </p><p>Resultat i webbläsaren: <br><img src='https://i2.wp.com/webshake.ru/uploads/img/b46c524417a23a2090c6c78df55b64e6a0a7c8fffe166749d61cf537cda3bdcc.png' height="50" width="241" loading=lazy loading=lazy></p> <p>För att texten som skrivs in i den kan ersättas med asterisker, som vanligt för ett fält av denna typ, måste du göra en enkel åtgärd. Ersätt nämligen attributvärdet <b>typ</b> på <b>Lösenord</b>:</p><p> <input id="passwordField" type="password" name="password"> </p><p>Resultat: <br><img src='https://i1.wp.com/webshake.ru/uploads/img/fcc1b0948d956a9c687641df8bd80f2c2d6612c088edb674e53bf2b22b502684.png' height="57" width="240" loading=lazy loading=lazy></p> <h2>Knappen Skicka formulär</h2> <p>Här har du. Vår form är nästan klar. För att slutföra skapandet måste du skapa en knapp som ska användas för att skicka formuläret. Uppgiften löses med taggen <b><input> </b> med typ <b>Skicka in</b>.</p> <p>Om det skulle finnas någon form av inskription på knappen, kan det göras med attributet <b>värde</b>... Det är upp till dig att ange ett namn på knappen eller inte, men om du gör detta kommer servern att få detta namn, liksom värdet på knappen.</p> <p> <input type="submit" value="Att komma in"> </p><p>Som regel behövs namnet på formulärknappen när formuläret har flera knappar, som var och en utför en specifik åtgärd. Tack vare detta förstår servern, som tar emot namn och värde på knappen från webbläsaren, vilken knapp användaren tryckte på och vad som följaktligen behöver göras.</p> <p>Som ett resultat kommer koden för vårt formulär att vara följande:</p><p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Logga in</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Lösenord</label></td> <td><input id="passwordField" type="password" name="password"></td> </tr> <tr> <td colspan="2" style="text-align: center"><input type="submit" value="Att komma in"></td> </tr> </table> </form> </p><p>Resultat i webbläsaren: <br><img src='https://i1.wp.com/webshake.ru/uploads/img/eb03f584a26e6ec91e1be78ab7c996db8d84a9c6d56e52926ca73271189646dd.png' height="82" width="241" loading=lazy loading=lazy></p> <p>Själva formuläret är vanligtvis avsett att ta emot information från användaren för att skicka den vidare till servern, där formulärdata tas emot av hanteringsprogrammet. Ett sådant program kan skrivas på valfritt programmeringsspråk på serversidan som PHP, Perl, etc. Programadressen anges i taggens actionattribut <form>som visas i exempel 1.</p><p>Exempel 1. Skicka formulärdata</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Formulärdata</title> </head> <body> <form action="/example/handler.php"> <p><input name="login"> <input type="password" name="pass"></p> <p><input type="submit"></p> </form> </body> </html> </p><p>I det här exemplet skickas formulärdata betecknade med namnattributet (inloggning och lösenord) till en fil på /example/handler.php. Om åtgärdsattributet inte är angivet sker överföringen till adressen för den aktuella sidan.</p><p>Överföringen till servern sker i två olika metoder: GET och POST, för att ställa in metoden i taggen <form>metodattributet används och dess värden är get- och post -nyckelord. Om metodattributet inte är angivet skickas data som standard till servern med hjälp av GET -metoden. Tabell 1 visar skillnaderna mellan dessa metoder.</p><p>Vilken metod som används är lätt att avgöra utifrån webbläsarens adressfält. Om ett frågetecken dyker upp i den och adressen ser ut så här, är detta definitivt GET.</p><p>http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8</p><p>Den unika kombinationen av parametrar i adressfältet identifierar sidan unikt, så sidor med adresser? Q = nod / add och? Q = nod anses vara olika. Denna funktion används av innehållshanteringssystem (CMS) för att skapa flera sidor på webbplatsen. I verkligheten används en fil som tar emot en GET -begäran och, enligt den, bildar innehållet i dokumentet.</p><p>Nedan följer en typisk användning av dessa tekniker på webbplatser.</p><h4>SKAFFA SIG</h4> <p>Överföring av små textdata till servern; Sidsök.</p><p>Sökmotorer, webbplatssökningsformulär skickas alltid med GET -metoden, detta låter dig dela sökresultat med vänner, skicka en länk via e -post eller lägga upp det på forumet.</p><h4>POSTA</h4> <p>Överföring av filer (foton, arkiv, program, etc.); skicka kommentarer; lägga till och redigera meddelanden på forumet, bloggen.</p><p>Som standard sker arbetet med formuläret i den aktuella webbläsarfliken, medan det är tillåtet att ändra denna parameter när du skickar formuläret och öppnar formulärhanteraren i en ny flik eller i en ram. Detta beteende specificeras genom "kontextnamnet", vilket är värdet för taggens målattribut <form>... Populära värden _ är tomma för att öppna ett formulär i ett nytt fönster eller en ny flik, och namnet på ramen, som ges av taggets namnattribut <iframe>(exempel 2).</p><p>Exempel 2. Öppna ett formulär i en ram</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Med hjälp av en ram</title> </head> <body> <p><iframe name="area" width="500" height="200"></iframe></p> <form action="handler.php" target="area"> <p><input placeholder="Skriv text" name="text"> <p><input type="submit" value="skicka"></p> </form> </body> </html> </p><p>I det här exemplet, när du klickar på knappen "Skicka", öppnas resultatet av att skicka formuläret i en ram med namnet område.</p><p>Formelement är traditionellt placerade inuti taggen <form>, och därmed definiera data som kommer att överföras till servern. Samtidigt har HTML5 möjlighet att skilja en form från dess element. Detta görs för bekvämlighet och mångsidighet, till exempel kan en komplex layout innehålla flera former som inte bör skär varandra, eller till exempel visas vissa element med hjälp av skript på ett ställe på sidan, och själva formuläret är i annan. Kopplingen mellan formuläret och dess element sker i detta fall genom formuläridentifieraren, och formulärattributet bör läggas till elementen med ett värde som är lika med denna identifierare (exempel 3).</p><p>Exempel 3. Bindning av ett formulär till fält</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form</title> </head> <body> <form id="auth" action="handler.php" method="post"></form> <p><input name="login" form="auth"> <input type="password" name="pass" form="auth"></p> <p><input type="submit" form="auth"></p> </body> </html> </p><p>I det här exemplet, taggen <form>identifieras unikt genom autentiseringsidentifieraren och form = "auth" läggs till i fälten som ska skickas med formuläret. Samtidigt ändras inte beteendet hos elementen; när du klickar på knappen skickas inloggningen och lösenordet till handler.php -hanteraren.</p><p>Även om formulärsinlämningsparametrar traditionellt anges i taggen <form>kan de överföras till formulärknapparna ( <button>och <input type="submit">). För detta används en uppsättning attribut formaction, formmethod, formenctype och formtarget, som är analoga med motsvarande attribut utan formulärprefixet. Exempel 4 visar användningen av dessa attribut.</p><p>Exempel 4. Skicka in ett formulär</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Skickar in formuläret</title> </head> <body> <form> <p><input placeholder="ditt namn" name="user"></p> <p><input type="submit" value="skicka" formaction="handler.php" formmethod="post"></p> </form> </body> </html> </p><p>Alla nya formulärattribut stöds inte av vissa webbläsare, särskilt Internet Explorer och Safari.</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><div class="clear"></div> <script type="text/javascript"> document.getElementById('hc_full_comments').innerHTML = ''; </script><br /><br /><noindex><p align="center"><center> <div id="meta_news_block1111" style="text-align: center;"></div></center> </p> <br /><br /> <p align="center"> </p> </noindex> </div> </div> <div id="sidebar"> <div class="clear"></div><br /> <h2 class="front" style="margin:15px 0 5px 0">Populära artiklar</h2> <div class="tabcont"> <ol> <li><a href="https://gtavrl.ru/sv/srok-sluzhby-lamp-nakalivaniya-60-vt-lampy-nakalivaniya-tehnicheskie-harakteristiki-opredelenie-i-pra/">Glödlampor: specifikationer</a></li> <li><a href="https://gtavrl.ru/sv/mozhno-li-udalit-soobshchenie-vk-poka-ego-ne-prochitali-kak-udalit/">Hur man tar bort ett skickat meddelande i VK</a></li> <li><a href="https://gtavrl.ru/sv/chto-delat-esli-stranicu-vk-zablokirovali-navsegda-kak/">Hur man återställer en VKontakte -sida efter att ha tagit bort och återkommit åtkomst till den</a></li> <li><a href="https://gtavrl.ru/sv/top-100-v-kontakte-statistika-topovyh-grupp-vkontakte-i-drugie/">Statistik över de bästa VKontakte -grupperna</a></li> <li><a href="https://gtavrl.ru/sv/vosstanovlenie-flesh-nakopitelei-vosstanovlenie-povrezhdennyh-failov-s/">Återställer skadade filer från ett USB -minne</a></li> </ol> </div> <h2 class="front" style="margin:15px 0 5px 0">Senaste artiklarna</h2> <div class="tabcont"> <ol> <li><a href="https://gtavrl.ru/sv/esli-pishet-chto-fleshka-povrezhdena-kak-vosstanovit-fleshku-v/">Hur man återställer ett USB -minne hemma</a></li> <li><a href="https://gtavrl.ru/sv/stiralnaya-mashina-s-frontalnoi-ili-vertikalnoi-zagruzkoi/">Vilken tvättmaskin är bättre-toppladdning eller frontmatning?</a></li> <li><a href="https://gtavrl.ru/sv/instagram-aleny-vodonaevoi-instagram-larisy-vodonaevoi-insta-vodonaeva/">Instagram larisa vodonaeva Insta vodonaeva anastasia</a></li> <li><a href="https://gtavrl.ru/sv/kak-vosstanovit-dokument-udalennyi-s-fleshki-instrukciya-po-vosstanovleniyu/">Instruktioner för att återställa raderade filer på ett USB -minne</a></li> <li><a href="https://gtavrl.ru/sv/kak-zakinut-cheloveka-chernyi-spisok-kak-zanesti-kontakt-v-chernyi-spisok-lg/">Hur man svartlistar en kontakt lg</a></li> <li><a href="https://gtavrl.ru/sv/ccleaner-professional-plus-c-klyuchom/">Ccleaner professional plus med nyckel</a></li> <li><a href="https://gtavrl.ru/sv/zakaz-cherez-internet-bez-registracii-kak-pokupat-na-aliexpress-samyi-polnyi-gid/">Hur man köper på AliExpress: den mest kompletta guiden</a></li> </ol> </div> <div class="widget" id="ajdg_grpwidgets-3"> <div class="g g-9"> <div class="g-single a-27"> <script> jQuery(function() { window.onscroll = function() { height_scroll = jQuery(document).scrollTop(); height = jQuery(document).height(); height50 = height / 2; if (height_scroll >= height50) { jQuery("#site-code-block-22").fadeIn(1200); document.getElementById('site-code-block-22').style.display = 'block'; jQuery("#site-code-block-23").fadeOut(1200); document.getElementById('site-code-block-23').style.display = 'none'; } else { jQuery("#site-code-block-22").fadeOut(1200); document.getElementById('site-code-block-22').style.display = 'none'; document.getElementById('site-code-block-23').style.display = 'block'; jQuery("#site-code-block-23").fadeIn(1200); } }; }); </script> <div class="site-code-block prma-count" data-rel="cb_23" id="site-code-block-23" style=""> </div> <div class="site-code-block prma-count" data-rel="cb_22" id="site-code-block-22" style=""> </div> </div> </div> </div> <div class="clear"></div> <br /> <center> <div style="color: #333333; font-size: 11px;"> </div> </center> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> </div>  <br /><br /> <div id="footeri"> <div id="footer"> <div class="footer-sec"> <h6>Avsnitt</h6> <ul> <li><a href="https://gtavrl.ru/sv/category/youtube/">Youtube</a></li> <li><a href="https://gtavrl.ru/sv/category/facebook/">Facebook</a></li> <li><a href="https://gtavrl.ru/sv/category/twitter/">Twitter</a></li> <li><a href="https://gtavrl.ru/sv/category/tips/">Tips</a></li> <li><a href="https://gtavrl.ru/sv/category/useful-tips/">Användbara tips</a></li> <br /> </ul> </div> <div class="footer-sec"> <h6>Sidor</h6> <ul> <li><a href="">om projektet</a></li> <noindex> <li><a href="" >RSS -nyheter</a></li> </noindex> </ul><br /><br /><br /> <h6>Särskilda projekt</h6> <ul> <li><a href="">Kontakta oss</a></li> </ul> </div> <div id="footer-top"> <h6>Kontakter</h6> <ul> <li><a href="">Annonsering på webbplatsen</a></li> <li><a href="">Kontakter</a></li> </div> <div class="clear"></div> </div></div> <div id="bottom"><div class="foot_col1">2021 <a href="https://gtavrl.ru/sv/">gtavrl.ru</a>. </div> <script type="text/javascript">var addthis_config = { "data_track_addressbar":true,"pubid": "ra-58b68bb0f1371607"} ;addthis_config.data_track_addressbar = false;addthis_config.data_track_clickback = false;</script> <script type='text/javascript'> var flag_hide = 0; function hide_direct() { flag_hide = 1; jQuery('#rek_mob_fixed').slideToggle( 'slow' ); var date = new Date(); var expires_hour = 21600000; date.setTime(date.getTime()+expires_hour); showSocial(); Cookies.set('advp_show_me', '1', { expires: date, path: '/'} ); } ; jQuery(function(f){ var element = f('#rek_mob_fixed'); element.delay(8000); f(window).scroll(function(){ if (flag_hide == 0){ var offset_element_for_hide = jQuery('#before_footer').val(); if (offset_element_for_hide != null) { offset_element_for_hide = jQuery('#before_footer'); offset_element_for_hide = jQuery(offset_element_for_hide).offset().top - jQuery(window).height(); } else { offset_element_for_hide = jQuery(document).height(); } //Если рекламный блок более 1000px по ширине, устанавливай фикс. ширину 1000px if (jQuery('#rek_mob_fixed_block').actual('width') >1000) { jQuery('#rek_mob_fixed_block').css({ 'max-width':'1000px'} ); } if(f(this).scrollTop() > 500){ element.fadeIn(0); } if(f(this).scrollTop() < 500 || f(this).scrollTop() > offset_element_for_hide ){ element.fadeOut(0) } if(f(this).scrollTop() + f(this).height() >= f(document).height() && flag_hide == 0 && jQuery('#rek_mob_fixed').is(':visible')) { jQuery('#rek_mob_fixed').slideToggle(100); } } } ); } ); function showSocial(){ if(flag_hide == 1 ) jQuery('#footer-share').slideToggle('slow'); } </script><div id="wondergridgallerylightbox_options" data-skinsfoldername="skins/default/" data-jsfolder="/wp-content/plugins/modesco-wonderplugin-gridgallery/engine/" style="display:none;"></div> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-monica/script.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ; /* ]]> */ </script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-table-of-contents-plus/front.js?ver=1404'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/page-links-to/js/new-tab.min.js?ver=2.9.8'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "ads-sidebar", "margin_top" : 10, "margin_bottom" : 50, "stop_id" : "before_footer", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['ajdg_grpwidgets-3'] } ; </script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type="text/javascript"> var _hcwp = _hcwp || []; var _hcobj = { widget_id : 29264, widget : "Bloggerstream",selector: '.hc_counter_comments',platform:"wordpress", } ; _hcwp.push(_hcobj); (function() { if("HC_LOAD_INIT" in window)return; HC_LOAD_INIT = true; var lang = "ru"; var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true; hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/29264/"+lang+"/widget.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hcc, s.nextSibling); } )(); </script> </body> </div> </body> </html>