Cum se creează formulare html. Crearea formularelor în HTML. Intrare de căutare animată

Formulare HTML— elemente complexe de interfață. Acestea includ diferite elemente funcționale: câmpuri de intrare și , liste <select>, indicii etc. Toate codurile formularului sunt incluse într-un element <form> .</p> <p>Majoritatea informațiilor din formularele web sunt transmise folosind elementul. <input>. Elementul este folosit pentru a introduce o singură linie de text. <input type="text">, pentru mai multe linii - element <textarea>. Element <select>creează o listă derulantă.</p> <p>Element <label>creează legende pentru câmpurile de formular. Există două moduri de a grupa etichetele și câmpurile. Dacă câmpul se află în interiorul unui element <label>, atunci nu trebuie specificat atributul for.</p><p> <label for="lastname">nume</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">nume</label> <label>nume <input type="text" name="lastname"></label> </p><p>Câmpurile formularului pot fi împărțite în blocuri logice folosind elementul <fieldset>. Fiecare secțiune poate primi un titlu folosind elementul <legend> .</p><p> <fieldset> <legend>Informații de contact</legend> <label>Nume <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Orez. 1. Gruparea câmpurilor formularului</p><p>Pentru ca formularul să fie mai ușor de înțeles pentru utilizatori, se adaugă text în câmpurile formularului care conțin un exemplu de date de intrare. Un astfel de text se numește text substituent și este creat folosind atributul substituent.</p> <p>Câmpurile obligatorii trebuie de asemenea evidențiate. Înainte de apariția HTML5, caracterul asterisc * era folosit lângă numele câmpului. Noua specificație a introdus un atribut obligatoriu special, care vă permite să marcați un câmp obligatoriu la nivel de marcare. Acest atribut indică browserului (presupunând că acceptă HTML5) să nu trimită date după ce utilizatorul dă clic pe butonul de trimitere până când câmpurile specificate sunt completate.</p><p> <input type="text" required placeholder="Numele dumneavoastră"> </p><p>Pentru a schimba aspectul unui câmp de text atunci când acesta primește focalizare, utilizați pseudoclasa de focalizare. De exemplu, puteți întuneca fundalul câmpului curent sau puteți adăuga un chenar colorat pentru a-l evidenția de restul:</p><p>Intrare: focus ( fundal: #eaeaea; )</p><p>Un alt atribut HTML5 util este atributul autofocus. Vă permite să setați automat focalizarea pe câmpul inițial dorit pentru elemente <input>și <textarea>(doar un element din fiecare formular).</p> <h2>Exemplu de creare a unui formular de înregistrare</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>Înregistrare</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nume</label> <input type="text" name="name" required> </div> <div class="radio">Podea <label> <input type="radio" name="sex" value="masculin">masculin <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="Femeie">Femeie <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Tara</label> <select name="country"> <option>Alegeți țara de reședință</option> <option value="Rusia">Rusia</option> <option value="Ucraina">Ucraina</option> <option value="Bielorusia">Bielorusia</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Trimite</button> </form> </div> <p><b>Notă</b><br>action="form.php" - link către fișierul de gestionare a formularelor. Creați un fișier codificat UTF-8, încărcați-l pe server și înlocuiți action="form.php" cu calea către fișierul de pe serverul dvs.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Orez. 2. <a href="https://newtravelers.ru/ro/useful/samsung-gelaksi-a-5-otzyvy-smartfon-samsung-galaxy-a5-2017-black-sm-a520f--.html">Aspect</a> forme implicite <p>După cum puteți vedea din figură, fiecare element de formular are stiluri implicite de browser. Să curățăm stilurile și să decorăm elementele de formă.</p><p> Form-wrap ( lățime: 550 px; fundal: #ffd500; chenar-radius: 20 px; ) .form-wrap *(tranziție: .1s liniar) .profil ( lățime: 240 px; float: stânga; text-align: center; padding : 30px; ) form ( fundal: alb; float: stânga; lățime: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; culoare: #7b7b7b; ) .form-wrap:after, form div:after (conținut: ""; afișare: tabel; clar: ambele; ) form div ( margin-bottom: 15px; poziție: relativ; ) h1 ( font-size: 24px; font-weight: 400; poziție: relativ ; margin-sus: 50px; ) h1:după (conținut: „\f138”; dimensiunea fontului: 40px; familia de fonturi: FontAwesome; poziție: absolut; sus: 50px; stânga: 50%; transformare: translateX(-50) %); ) /**************************** elemente de formular de stil ***************** *** **/ label, span ( display: block; font-size: 14px; margin-bottom: 8px; ) input, input (border-width: 0; outline: none; margin: 0; width: 100%; umplutură: 10px 15px; fundal: #e6e6e6; ) input:focus, input:focus (box-sha dow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio etichetă ( poziție: relativă; padding-left: 50px; cursor: pointer; lățime: 50%; float: stânga; line-height: 40px; ) .radio input (poziție: absolut; opacitate: 0; ) .radio -control (poziție: absolut; sus: 0; stânga: 0; înălțime: 40px; lățime: 40px; fundal: #e6e6e6; raza-chenar: 50%; text-align: center; ) .male:before ( conținut: " \f222"; font-family: FontAwesome; font-weight: bold; ) .female:before (conținut: "\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:verificat ~ .radio-control (culoare: roșu; ) selectați ( lățime: 100%; cursor: indicator; umplutură: 10px 15px; contur: 0; chenar: 0; fundal: #e6e6e6; culoare: #7b7b7b; -webkit-appearance: none; /* debifați webkit -browsere */ -moz-appearance: none; /*debifați în Mozilla Firefox*/ ) select::-ms-expand (afișare: niciunul; /*debifați în IE*/ ) .săgeată-selectare ( poziție: absolută; sus: 38px; dreapta: 15px; latime: 0; inaltime: 0; evenimente pointer: niciunul; /*activează afișarea listei când se face clic pe săgeată*/ border-style: solid; lățime chenar: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; buton ) ( umplutură: 10px 0; lățime chenar: 0; afișare: bloc; lățime: 120px; marjă: 25px automat 0; fundal: #60e6c5; culoare: alb; dimensiune font: 14px; contur: niciunul; text-transform : majuscule; ) /**************************** adăugare formă adaptativă ***************** **** **/ @media (lățime maximă: 600 px) ( .form-wrap (marja: 20 px automat; lățime maximă: 550 px; lățime: 100 %;) .profil, form (float: niciunul; lățime: 100%;) h1 (margin-sus: automat; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;) )</p><p><b>fișier form.php</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: email-ul dvs.". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo „Vă mulțumesc! V-ați înregistrat cu succes.”; ) ?></p><p><b>Notă</b><br>În variabila $subject, specificați textul care va fi afișat ca subiect al e-mailului; <br>Numele_tau - aici puteti specifica numele care va fi afisat in campul "de la cine litera"; <br>înlocuiți your_site_url cu adresa site-ului cu formularul de înregistrare; <br>înlocuiți your_email cu adresa dvs. de e-mail; <br>$headers .= „Bcc: e-mail-ul tău”. „\r\n”; trimite o copie oarbă la adresa ta de e-mail.</p> <p>Formularele sunt cele mai importante interactive <a href="https://newtravelers.ru/ro/android/html-formy-html-formy-kakoi-element-pozvolyaet-osushchestvit-otpravku-formy.html">elemente HTML</a>, care le permit dezvoltatorilor de pagini să interacționeze interactiv cu vizitatorii. Cu ajutorul lor, utilizatorul poate returna comentarii despre vizitarea unui anumit site, poate trimite cereri sau se poate înregistra. Dezvoltatorul pune întrebări creând un formular, iar utilizatorul le răspunde completând. Conținutul formularului este fie transmis scriptului CGI, fie <a href="https://newtravelers.ru/ro/setting/zhivoi-zhurnal-servis-onlain-dnevnikov-zhivoi-zhurnal-adres-elektronnoi.html">e-mail</a> trimis destinatarului. Procesul de creare a unei forme în sine constă din două etape. Primul este de a crea formularul în sine, iar al doilea este de a crea un script CGI pe server. Un formular este creat folosind diverse etichete și atribute asociate <FORM></FORM>:</p> <p>Element <FORM>este o condiție necesară pentru toate formele. Poate avea următoarele atribute:</p> <p>method Acest atribut specifică modul în care datele sunt trimise către scriptul CGI. Aici, protocolul GET este selectat implicit, dar în majoritatea cazurilor, dezvoltatorii folosesc protocolul POST, care vă permite să transferați cantități mari de date.</p> <p>acțiune Acest atribut specifică calea către scriptul CGI sau adresa de e-mail.</p> <p>enctype Acest atribut specifică modul în care este codificat conținutul formularului. Cu alte cuvinte, îi spune browserului cum să codifice informațiile înainte de a le trimite la server. Valoarea implicită este x-www-form-encoded.</p> <p>Sintaxa formularului de script este:</p> <p><FORM method="get" или "post" action="URL сценария" ></FORM></p> <p>Sintaxa formularului de e-mail: <FORM method="get" или "post" action="mailto:адрес" ></FORM></p> <p>Element <INPUT>este baza pentru toate elementele de formă. Este folosit pentru a injecta butoane în formular, <a href="https://newtravelers.ru/ro/the-lg-tvs/ispolzuyutsya-dlya-sravneniya-neskolkih-velichin-diagramma-eto-sredstvo.html">imagini grafice</a>, casete de selectare, butoane radio, parole și câmpuri de text. În ciuda diferențelor externe dintre formulare, toate trimit date către scriptul CGI sub forma perechilor nume:valoare. Un element poate avea opt atribute, notate ca tip:</p> <p>TEXT Un câmp de text cu o singură linie utilizat pentru a introduce informații care nu pot fi introduse în niciunul dintre celelalte elemente de formular. Aici sunt introduse nume, adrese, poziții, numere de telefon, hobby-uri și date de aproape orice tip. Un element poate avea atribute:</p> <p>Sintaxă: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Cumpărături"></p> <p>PAROLA Un câmp cu o singură linie care afișează asteriscuri în loc de caracterele pe care le introduceți. Un element poate avea atribute:</p> <p>lungime maxima. Setează lungimea maximă permisă a valorii introduse în caractere.</p> <p>mărimea. Setează lungimea maximă permisă a câmpului în caractere.</p> <p>valoare. Specifică o valoare implicită care poate fi modificată.</p> <p>Sintaxă: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20"></p> <p>HIDDEN Un alt tip de intrare ascunsă. Vă permite să trimiteți informații despre scripturi care nu pot fi modificate de utilizator. Unele programe CGI folosesc câmpuri ascunse pentru a transmite informații de la o pagină la alta, cum ar fi un nume sau un număr. Această abordare simplifică foarte mult munca utilizatorului, eliminând nevoia de a reintroduce datele. De exemplu, pentru a trimite un fișier cu <a href="https://newtravelers.ru/ro/setting/podpiska-na-novosti-ishodnyi-kod-raskryt-nevozmozhno-esli-dlya-etogo.html">cod sursa</a> HTML folosește următorul construct: <INPUT type="HIDDEN" name="file" value="anyfile.html"></p> <p>CHECKBOX Casetele de selectare sunt folosite pentru a permite utilizatorului să răspundă într-un singur cuvânt: da/nu adevărat/fals mai mult/mai puțin etc. De obicei arată ca o cruce sau o pasăre. Un element poate avea atribute:</p> <p>verificat. Setează starea inițială implicită a casetei de selectare.</p> <p>valoare. Specifică o valoare implicită care poate fi modificată.</p> <p>Sintaxă: <INPUT type="checkbox" name="send_mail" value="da" checked></p> <p>RADIO Butoanele radio sunt similare cu casetele de selectare în multe privințe, cu excepția faptului că sunt mai largi. <a href="https://newtravelers.ru/ro/tips/programma-dlya-naznacheniya-goryachih-klavish-menedzhery-goryachih-klavish-funkcionalnye-vozmozhnosti-komb.html">funcţionalitate</a> alegere. Un singur buton radio poate fi selectat într-un grup de butoane radio. Pentru fiecare comutator este specificat un element INPUT separat.</p> <p>TRIMITE Făcând clic pe acest buton, conținutul formularului este trimis în scriptul care a fost dat <a href="https://newtravelers.ru/ro/tp-link/get-i-post-primery-atribut-action-i-method-metody-get-i-post-vybor-mezhdu.html">atribut de acțiune</a>în element <FORM>. Folosind butoanele, puteți calcula cantitatea, încărcați pagini, trimiteți date, resetați valorile. Sintaxă:</p> <p><FORM method="get" или "post" action="mailto: Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script "> <INPUT type="submit" value="trimite"></FORM></p> <p>RESET Butonul este folosit pentru a restabili valorile implicite. Dacă nu există o valoare implicită, aceasta va fi pur și simplu setată la zero. Lățimea butonului poate varia în funcție de alte elemente. Are și un atribut de valoare.</p> <p>Sintaxă: <INPUT type="reset" value="curatenie"></p> <p>IMAGINE La fel ca butonul TRIMITE, dar folosește o imagine ca buton. Unul dintre avantaje este capacitatea de a trece coordonatele clicului utilizatorului, ceea ce vă permite să organizați o hartă imagine. Un element poate avea atribute:</p> <p>src. Specifică adresa URL a fișierului imagine.</p> <p>alinia. Specifică alinierea imaginii în raport cu textul utilizând valorile SUS, MEDIU și JOS.</p> <p>Nume. Setează numele hărții, care este, de asemenea, trimis la script împreună cu coordonatele.</p> <p>Sintaxă: <INPUT type="image" src="knopka.gif"></p> <p>BUTTON Creează un alt buton, browserele utilizatorilor pot folosi valoarea atributului value ca nume de fișier original.</p> <p>Sintaxă: <INPUT type="button"value="buton"></p> <p>FILE Creează un control de selecție a fișierelor. Sintaxă: <INPUT type="file"></p> <p>ACCESSKEY Specifică butonul care, atunci când este apăsat, procesează câmpul. Sintaxă: <INPUT accesskey="a"></p> <p>SIZE Specifică lățimea elementului în pixeli. Sintaxă: <INPUT size="число"></p> <p>DISABLED Dezactivează capacitatea de a schimba conținutul unui câmp sau poziția unui buton. Sintaxă: <INPUT disabled"></p> <p>Element <TEXTAREA>Acest element creează o zonă pentru introducerea și vizualizarea textului. De asemenea, poate fi folosit nu ca parte a unui formular, ci ca detalii independente de pagină. Zona de introducere ajută la economisirea spațiului cu barele de defilare. Poate avea atribute:</p> <p>Nume. Specifică un cuvânt cheie prin care scriptul își poate accesa conținutul.</p> <p>rânduri. Setează înălțimea zonei în linii.</p> <p>cols. Specifică lățimea regiunii în caractere.</p> <p>Sintaxă:</p> <p><FORM><H3>Introduceți text <TEXTAREA name="ключевое слово" rows=5 cols=30>Zona de introducere a textului

Element Sintaxă:

Are următoarele atribute:

selectat. Specifică cuvântul selectat inițial.

valoare. Setează valoarea cuvântului selectat pentru script.

Element utilizat pentru gruparea logică a elementelor

Element Acesta este cel mai simplu element care vă permite să creați o aparență de formular și să introduceți o linie care conține text și să generați o solicitare.

Exemplu: Să presupunem că adresa URL de bază este setată pe pagina curentă folosind elementul apoi, dacă utilizatorul introduce cuvânt1, cuvânt2, cuvânt3 în câmpul cuvinte cheie de căutare, browserul va genera și trimite o solicitare pentru motorul de căutare server sub forma: http://www.nume.domeniu/?word1+word2+word3 Dacă programul de căutare pe server acceptă sintaxa standard de interogare folosind caractere? și +, căutarea va fi efectuată.

Element

name specifică un nume pentru element.

value setează valoarea elementului.

tastați atunci când este folosit ca buton ia valorile: buton, trimite și resetare.

disabled face ca elementul dat să fie indisponibil

tabindex determină poziția în ordinea Tab, câmpurile de formular dezactivate nu participă la comandă.

accesskey specifică cheia de acces.

Element folosit pentru a seta alternativ informații pentru câmpurile de control al formularului. Acceptă atributul for care leagă elementul cu alt element de formular, iar valoarea atributului for trebuie să se potrivească cu valoarea atributului id al controlului asociat.

Element

vă permite să grupați logic elemente de formular. Sintaxă:

Nume

Element vă permite să dați nume unor grupuri logice de elemente de formular. Sintaxă: Nume

Toate interactive - câmpuri de introducere, casete de selectare, butoane radio, liste derulante, butoane - acestea sunt formulare web și elementele acestora. În formular lăsați un comentariu, utilizați formularul pentru a vă înregistra, utilizați formularul pentru a autoriza, utilizați formularul de căutare, votați în sondaje, încărcați fișiere, vă abonați - toate acestea le faceți folosind formulare web.

Organizare internă

De fapt, formularul este format din două părți: design vizual și un script care prelucrează datele introduse. Pentru a scrie un script, trebuie să cunoașteți unul dintre limbajele de programare. Nu le studiem aici, așa că vom analiza componenta HTML - învățați cum să creați o interfață de formular, presupunând că undeva avem deja un script care o procesează.

Un formular HTML este creat folosind o etichetă pereche

, în interiorul căruia se află etichetele elementelor sale.

Etichete

Înainte de a arăta exemple, să trecem prin etichete.

. Creează un formular. Dacă comparăm forma cu tabelul, atunci eticheta îndeplinește același rol ca eticheta

. Vine cu următoarele atribute.

acțiune. Adresa scriptului sau documentului care prelucrează datele formularului. URL-ul este specificat ca valoare.
metodă. Metoda de transmitere a datelor către handler. Puteți specifica GET (implicit) sau POST. GET înseamnă transmiterea datelor ca parte a unui URL. Este posibil să fi văzut ceva de genul ?id=225 în adrese. Aceasta este ceea ce este. Metoda POST funcționează diferit și, prin urmare, datele transmise sunt ascunse utilizatorului. Este mai sigur, vă permite să transferați mai multe informații, inclusiv fișiere. Dar toate acestea țin mai mult de programare decât de marcare HTML.
accept-charset. Setează codificarea.
completare automată. Activează (activează) sau dezactivează (dezactivează) formularele de completare automată, în care browserul însuși vă solicită ce să introduceți în funcție de ceea ce ați introdus ultima dată. Dezactivarea funcției are sens pentru formularele confidențiale, astfel încât browserul să nu afișeze din neatenție date importante.
Nume. Numele formularului.

Există și alte atribute, dar sunt rareori folosite.

. O etichetă interesantă cu care puteți crea orice element de intrare, care este setat de atributul type. Strict vorbind, această etichetă poate fi folosită și în afara formularului, dar atunci nu veți putea specifica adresa handler-ului, iar elementul de pagină va fi nefuncțional.

tip. Atributul principal al etichetei , care definește, așa cum sa menționat deja, tipul elementului de intrare. Are atât de multe valori și sunt atât de importante, încât a fost suficient pentru un întreg tabel (vezi mai jos).

Sens	Descriere

	Casete de selectare. Cu ajutorul lor, puteți alege mai multe opțiuni simultan.
	Butonul de selectare a fișierului
	Câmp ascuns, nu este vizibil în browser
	Buton cu poza
	Câmpul pentru parolă. Câmp de text simplu, dar caracterele introduse sunt ascunse în spatele asteriscurilor (*)
	Comutatoare. Aproape ca casetele de selectare, dar cu ajutorul lor puteți selecta doar una dintre opțiunile propuse
	Buton pentru a reseta datele formularului la valorile originale
	Buton pentru a trimite date către server. De obicei le apăsați pentru a confirma intrarea - Salvați, Aplicați, OK
	Câmp text

Au apărut multe valori noi în HTML5, dar, din păcate, sunt acceptate doar parțial până acum (iunie 2016).

autofocus. Focalizarea de intrare va fi implicit la elementul pentru care este specificat acest atribut.
verificat. Setați caseta de selectare implicită sau butonul radio.
model. Cu acest atribut, puteți forța utilizatorul să introducă date într-un anumit format. De exemplu, introduceți un singur număr de la 0 la 9 sau numai litere din alfabetul latin (ar trebui să fie familiar). Până la completarea corectă a câmpului, datele formularului nu vor fi transmise spre prelucrare.
substituent. Setează textul indiciu.
.
valoare. Valoarea articolului din listă care urmează să fie procesată de script.
selectat. Un element cu acest atribut va fi evidențiat implicit, ca și cum utilizatorul l-ar fi selectat.
. Container vă permite să grupați elementele din listă .
dezactivat. Face grupul de listă neselectabil (în timp ce îl afișează într-o culoare diferită).
eticheta. Text antet de grup.

Exemplu de formă

Acum că toate etichetele sunt cunoscute, să creăm un mic formular de autorizare, ale cărui date sunt procesate de fișier script.php, aflat în folderul cu pagina HTML.

Codul va fi așa.

Forma Autentificare:

Parola:

Cine esti?

Tine minte

Să aruncăm o privire la câteva dintre părțile sale.

- creați un formular procesat de fișierul script.php. Datele sunt transmise prin metoda GET.

< br> - etichetă pentru trecerea la linia următoare.

< intrare Nume=" Autentificare" tip=" text" mărimea="25" lungime maxima="30" valoare="Michael">- creați un câmp de text numit login cu o lățime de 25 de caractere. Specificăm Mikhail ca valoare implicită, astfel încât utilizatorul să înțeleagă ce și cum să introducă.

< intrare Nume=" trece" tip=" parola" mărimea="25" lungime maxima="30" valoare=""> - creați un câmp de introducere a parolei (caracterele sunt înlocuite cu asteriscuri). Lățimea câmpului este de 25, lungimea maximă a parolei este de 30 de caractere.

< Selectați>< opțiune valoare=" c1">Oaspeteopțiune>< opțiune valoare=" c2">Administratoropțiune>Selectați> - creați o listă derulantă simplă cu două articole.

< intrare Nume=" salva" tip=" Caseta de bifat" valoare=" da„> Amintiți-vă- adăugați un steag și scrieți un text explicativ.

< br>< intrare tip=" Trimite" Nume=" introduce" valoare="Login">- creați un buton, apăsând care pornește procesul de prelucrare a datelor.

- închideți formularul.

Într-un browser, formularul web va arăta ca imaginea de mai jos.

Poate fi completat, dar pentru a începe să funcționeze, trebuie să scrieți cod și să-l salvați într-un fișier script.php lângă pagina HTML.

26.02.2016

Buna!
Continuăm să învățăm elementele de bază ale HTML. În această lecție, vom explora ceHTML formași cum este creat.
Dacă ați observat, niciun site web de astăzi nu este complet fără formulare. Aceste formulare pot fi diferite, de exemplu, un formular de feedback, un formular pentru trimiterea unei comenzi, un formular pentru înregistrare și intrare pe site, un formular pentru trimiterea de comentarii, recenzii, un formular de căutare și multe altele.

Cred că acum trebuie să arătați exemple despre cum arată vizual formularele HTML.

○ Formular de cautare:

○ Formular de autentificare site:

○ Formular de feedback:

○ Formular de comanda:

Cred că ai ideea de a crea formulare HTML. Deci, în lecția de astăzi vă voi spune, cum să creezi un simpluHTMLformăși ce etichete pot fi folosite pentru a crea diferite câmpuri de formular.

De acum, vă cer atenție deosebită, deoarece tema este complexă și importantă.

HTMLforma este un câmp în care utilizatorul introduce unele informații. Dar, această informație trebuie cumva să fie și trimisă. Un fel de formular HTML este ca o motocicletă fără benzină, totul pare să fie acolo, dar din anumite motive nu merge. Deci, pentru ca formularul să funcționeze și să trimită informațiile introduse de utilizator, trebuie să creați un handler de formular în fișierul . Dar nu vă deranjați cu managerul, deoarece acum urmați doar cursul pentru începători. Vom explora mai departe subiectul handler-ului de formulare în secțiunea PHP. Deci, ceva ce mă abate de la subiectul principal.

Învățați să creați formulare HTML

Orice formular HTML va consta dintr-o etichetă principală

. În interiorul etichetei

sunt inserate restul elementelor de formular care vor fi afișate pe pagina web.

Formularul trebuie plasat între etichete

.
Pentru Tag
este necesară eticheta de închidere .

*atribute pentru etichetă rm >

NUME este numele unic al formularului. Este folosit atunci când există mai multe formulare pe un site.
ACȚIUNE - Acest atribut specifică calea către gestionarea formularului. Este necesară.
METODA - metoda de trimitere.

POST - datele sunt transmise într-o formă ascunsă

GET (implicit) - datele sunt transmise în text clar prin linia browserului.

Un exemplu de cum arată o etichetă cu urmatoarele atribute:
aici vor fi diferitele elemente de formular care vor fi afișate pe pagina web.

Elemente de formă

○ Etichetăintrare

Etichetăintrare- această parte a elementului câmp de formular este destinată introducerii de text mic, numere.
Pentru Tag eticheta de închidere nu este necesară .

*atribute pentru etichetă< intrare >

nume - nume element

dimensiune - dimensiunea câmpului

obligatoriu – câmp obligatoriu

focalizare automată - indicatorul mouse-ului va fi imediat în câmp la încărcarea unei pagini web

maxlength – cu acest atribut puteți specifica numărul maxim de caractere de introdus în câmp. În mod implicit, fără atributul maxlength, se poate introduce un număr nelimitat de caractere în câmp

substituent - un indiciu pentru utilizator care va fi afișat chiar în interiorul formularului de câmp (utilizat pentru a utiliza atributul valoare).

tip - tip element

Exemplu de umplere:

tip de element

Câmp text

○ Câmp text „text”:

Rezultat:

○ Câmpul pentru parolă „parolă”:

Rezultat:

○ Câmp pentru e-mail „e-mail”:

Rezultat:

○ Buton pentru selectarea unui fișier din „fișierul” computerului:

Rezultat:

○ Câmpul pentru introducerea telefonului „tel”:

Rezultat:

○ Câmp de căutare:

Rezultat:

○ Câmp de selecție a culorii „culoare”:

Rezultat:

○ Câmp pentru introducerea și selectarea numerelor „număr”:

min - valoare minimă

max - valoare maximă

pas - pas.

Rezultat:

○ Câmp pentru dată „data”:

Rezultat:

○ Câmp pentru selectarea datei și orei locale în format (05.05.2015 00:00):

Rezultat:

○ Afișează calendarul drop-down.
Câmp pentru selectarea anului și lunii în format (iulie 2015):

Rezultat:

○ Câmpul de timp „timp”:

Rezultat:

○ Glisor de interval:

Rezultat:

○ Caseta de bifat:

bifat - Acest atribut specifică care casetă de selectare ar trebui să fie activată în mod implicit

Rezultat:

○ Comutator radio "radio":

bifat - acest atribut specifică ce comutator radio trebuie activat implicit

Rezultat:

Butoane

○ buton:

valoare - etichetă pe buton

Rezultat:

○ Buton pentru trimiterea datelor „trimite”:

valoare - etichetă pe buton

Rezultat:

○ Butonul de resetare:

valoare - etichetă pe buton

Rezultat:

○ butonul imagine:
Rezultat:

○ Câmp ascuns „ascuns”

○ selectați eticheta

EtichetăSelectați- aceasta face parte din elementul de formular, conceput pentru a introduce o listă derulantă.
Pentru Tag este necesară eticheta de închidere .
Etichetă și

Nume este numele întregii liste. Setați numai pentru etichetă .

Valoare - setată pentru fiecare element din listă pentru etichetă

disabled - dezactivează selecția unui element din lista verticală. Setați numai pentru etichetă

Rezultat:

Curier rapid nu este urgent

Sau cam asa:

Rezultat:

Curier rapid nu este urgent

Acum să blocăm din lista „Urgent”Atribut”dezactivat”:

Rezultat:

Curier rapid nu este urgent

○ listă derulantă după grup:

Eticheta este folosită pentru a crea o listă de grup

Rezultat:
Zona text opțiune
Etichetă Fieldset Legendă

○ pentru alegeri multiple:

În etichetă
*atribute pentru etichetă< zona textului >

nume - nume câmp

cols - lățimea câmpului

rânduri - înălțimea câmpului

substituent - un indiciu pentru utilizator care va fi afișat chiar în interiorul câmpului formularului.

Rezultat:

Sau cam asa:
Introduceți text
Rezultat:

Introduceți text

Sau cam asa:

Rezultat:

Design „cadru” (set de câmp)

○ eticheta fieldset

eticheta fieldset- folosind această etichetă, puteți desena un cadru în jurul obiectului.
Eticheta de închidere este necesară.

Etichete suplimentare
Eticheta legendei indică titlul.
Eticheta de închidere este necesară.

antet Text în interiorul unui cadru.

Rezultat:

Atât am vrut să vorbesc despre subiectul „Formulare HTML”. Acum să rezumăm și, în practică, vom încerca să creăm un formular simplu, folosind deja cunoștințele pe care le-ați învățat din acest articol.

Iată formularul meu:

Formular de CV pentru un angajat al uzinei pilot a PJSC „KMZ”

Cine vrei să fii?

Ce salariu vrei sa primesti (pe luna)?
10$ 11$

Rezultat:

Postarea anterioară
Postarea următoare