Crearea și lucrul cu formulare în html. Crearea formularelor HTML Să ne uităm la un mic exemplu

Având în vedere etichetele HTML de bază, nu putem să nu atingem un element atât de important precum formularele. Feedback-ul este adesea necesar pe paginile web. De exemplu, completarea unui formular pe site, înregistrare, autorizare, comentarii etc. În toate aceste cazuri, utilizatorul completează zone speciale (câmpuri de formular) pe pagină, după care datele sunt trimise către server. Formularele sunt folosite pentru a crea feedback. Un formular este un fragment dintr-un document HTML destinat introducerii utilizatorului.

Figura prezintă un formular de înregistrare a studenților pe site-ul web al unei instituții de învățământ.

Un container este folosit pentru a crea un formular

cu atributul action, care specifica pagina de pe server care va procesa datele trimise prin formular.

Structura în cea mai simplă formă:

elemente de forma...

Fiecare formular trebuie să aibă, de asemenea, un buton de trimitere pentru a trimite date după completarea formularului.

Structura butoanelor:

Deci, pentru a înregistra aproape toate elementele de formular, se folosește eticheta cu atributul type. Pentru a crea un buton care resetează toate datele din formulare, se utilizează următoarea structură:

Pentru a crea un câmp de text, există un parametru de text. Se folosesc următorii parametri: nume – nume câmp; dimensiune – pentru câmpul în simboluri; maxlength – numărul maxim posibil de caractere din câmp; valoare – informații afișate implicit în formular

Exemplu de intrare de formular cu două câmpuri de text:

Rezultatul formularului este prezentat în figură.

Dacă trebuie să introduceți o cantitate mare de informații într-un câmp de text, de exemplu, un comentariu, utilizați formularul pentru zona de text, care este creat folosind o etichetă cu următoarele atribute: denumire – denumirea zonei; cols – numărul de coloane de zonă; rânduri – numărul de rânduri; wrap – metodă de înfășurare a liniilor (on – wrap lines, off – nu înfășurați linii).</p><p>La codul de mai sus, să adăugăm un câmp de zonă de text:</p><p>Un comentariu: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Rezultatul lucrului codului cu zona de text este prezentat în figură.

Următorul element al formularelor sunt liste care vă permit să alegeți din setul de valori prezentat. Etichetele vă permit să creați un formular de listă

Pentru ca elementul să fie evidențiat la încărcarea paginii, este necesar în etichetă

O metodă similară de selecție este caseta de selectare și elementele de formular cu butonul radio. Diferența dintre aceste elemente este că o casetă de selectare vă permite să faceți selecții multiple, în timp ce un buton radio permite doar o singură selecție.

Structura unei casete de selectare și a unei intrări cu butonul radio:

text

Buton de radio:

text

În elementele specificate în structură, atributul bifat este utilizat în mod implicit pentru a evidenția caseta de selectare și butonul radio. Un exemplu de utilizare a unei casete de selectare, a unui buton radio și a unui cod HTML este prezentat în figură.

Un alt element de formular este un buton, specificat folosind atributul type tag cu butonul valoare:

În codul specificat pentru crearea unui buton, există un parametru onclick, care specifică de obicei codul într-un limbaj de programare pentru a efectua o anumită acțiune atunci când se face clic pe acest buton:

Pentru a afișa un mesaj într-o fereastră specială, utilizați comanda JavaScript – aler. Rezultatul exemplului este prezentat în figură.

Pentru a insera o imagine într-un buton, utilizați codul prezentat în exemplul următor:

La înregistrarea și conectarea la site-uri web, se folosește un câmp cu un test ascuns, afișat ca stele. Acesta este elementul formularului de parolă:

Înregistrarea pe site este adesea împărțită în mai multe pagini și fiecare ulterioară trebuie să conțină informații de la cea anterioară. Pentru a ascunde informațiile transmise se folosește elementul de formular ascuns:

Elementul de formular ascuns va fi invizibil în fereastra browserului.

Pentru a încărca fișiere pe server, formularele au un element de fișier. Un exemplu de cod pentru încărcarea fișierelor pe server este prezentat mai jos:

Așadar, în acest subiect am analizat elementele de formular pentru crearea diferitelor pagini HTML, care, împreună cu handlere de script pe un computer sau server, vă permit să dezvoltați aplicații web cu drepturi depline.

Etichete HTML care definesc formularele HTML pe site

Creăm site-uri web și pagini individuale pe Internet pentru a comunica cu vizitatorii.

Formulare HTML sunt folosite pentru a înregistra vizitatori pe site, pentru sondaje interactive și vot, vă permit să trimiteți mesaje, să faceți cumpărături și așa mai departe. HTML Formularul este creat cu un singur scop: colectarea și transmiterea ulterioară a informațiilor pentru prelucrare printr-un script software sau prin e-mail.

Exemplu de formular HTML | Intră pe site

Etichete, atribute și valori

- determinați forma.
name="" - definește numele formularului.
method="" - definește metoda de trimitere a datelor din formular. Valori: „get” (implicit) și „post” . Metoda „post” este adesea folosită, deoarece permite transferul unor cantități mari de date.
action="" - definește adresa URL la care datele sunt trimise pentru prelucrare. În cazul nostru - enter_data.php ..
- definiți elemente de formular precum butoane, comutatoare, câmpuri de text pentru introducerea datelor.
type="text" - definește un câmp de text pentru introducerea datelor.
type="parola" - definește un câmp pentru introducerea unei parole, cu textul afișat sub formă de asteriscuri sau cercuri.
type="checkbox" - definește un buton radio.
type="hidden" - definește un element de formular ascuns - folosit pentru a transfera informații suplimentare către server.
size="25" - lungimea câmpului de text în caractere.
maxlength="30" - numărul maxim permis de caractere introduse.
value="" - definește valoarea care va fi trimisă pentru procesare dacă se referă la butoanele radio sau comutatoarele. Valoarea acestui atribut ca parte a unui câmp de text sau a unui buton va fi afișată ca, de exemplu, Vasya sau Login în exemplul de mai sus.

Exemplu de formular HTML | Comentarii pe site

Exemplu de formular HTML

Etichete, atribute și valori

action="http://site/comments.php" - definește adresa URL la care vor fi trimise datele din formular.
id="" - definește numele și identificatorul elementului de formular.
name="" - definește numele elementului de formular.
- definiți un câmp de text ca parte a formularului.
cols="" - determină numărul de coloane din câmpul text al formularului.
rows="" - definește numărul de rânduri din câmpul de text al formularului.

Dacă între plasați textul, acesta va fi afișat în interiorul câmpului ca exemplu care poate fi îndepărtat cu ușurință.

Exemplu de formular HTML | Lista verticală

Formulare HTML

Etichete, atribute și valori

- definiți o listă cu pozițiile de selectat.
size="" - determină numărul de poziții vizibile din listă. Dacă valoarea este 1, avem de-a face cu o listă derulantă.
- determinați pozițiile (articolele) din listă.
value="" - conține valoarea care va fi trimisă prin formular către adresa URL specificată pentru procesare.
selected="selected" - evidențiază un element din listă ca exemplu.

Exemplu de formular HTML | Lista cu bara de defilare

Prin creșterea valorii atributului size="", obținem o listă cu o bară de defilare:

Formulare HTML

Pentru această opțiune, utilizați indicatorul multiple="multiple", care face posibilă selectarea mai multor poziții. Absența acestuia vă permite să selectați un singur articol.

type="submit" - definește un buton.

type="reset" - definește un buton de resetare.

value="" - definește eticheta butonului.

Vezi suplimentar:

O zi bună, fanilor dezvoltării web și celor care doresc să-și creeze propriul site. Înainte de asta, toate publicațiile mele erau dedicate elementelor de bază ale limbajului, modalităților de a crea diverse obiecte de conținut, formatării, structurii acestora etc. După ce stăpâniți subiectele anterioare, puteți crea deja un site web destul de bun. Cu toate acestea, va fi incomplet fără subiectul de astăzi: „Crearea de formulare în html”.

Această secțiune a limbii este foarte importantă. Prin urmare, acordați o atenție deosebită studierii acestuia, altfel resursa web pe care ați creat-o nu va fi lansată în producție. Astfel, după ce ai citit articolul, vei afla de ce trebuie să folosești formulare, ce etichete sunt folosite pentru a crea și vei putea, de asemenea, să încerci exemple concrete în practică. Să începem!

Ce este o formă și cum funcționează?

Formă– acesta este unul dintre cele mai importante obiecte, care este destinat schimbului de date de informații între server și utilizator.

Mai simplu spus, dacă doriți să creați un magazin online cu posibilitatea de a comanda produse pe site, să solicitați înregistrarea pe o resursă web și să lucrați cu conturile sau să oferiți clienților feedback de la managerii companiei, atunci nu vă puteți lipsi de formulare.

Formularul este specificat folosind un element special al limbajului html
.

Rețineți că documentul de cod poate conține mai multe declarații de etichetă , cu toate acestea, o singură cerere poate fi trimisă către server pentru a procesa datele. De aceea, informațiile introduse de utilizator în câmpurile prevăzute pentru aceasta și care se referă la diferite formulare nu ar trebui să fie dependente. De asemenea, nu este permisă cuibărirea formelor una în cealaltă.

Pentru cei care sunt nerăbdători și dornici să arunce o privire rapidă asupra reprezentării codului, am atașat un exemplu simplu de utilizare a unui panou cu un câmp de text pentru o parolă cu un buton:

1 2 3 4 5 6 7 8 9 10 11 12

Exemplu

Poate că nu este foarte clar acum ce și cum interacționează în acest mic program, dar vă garantez că după ce citiți întregul articol veți putea crea aplicații mult mai complexe.

Trimiterea datelor pe partea serverului

Pentru a trimite informațiile tastate (sau selectate) într-o casetă de dialog, trebuie să utilizați mecanismul standard - Buton de trimitere.

Codul pentru o astfel de metodă arată astfel:

Când rulați linia prezentată, va apărea un buton cu inscripția: „Trimite”.

O altă modalitate de a trimite date către server este să apăsați tasta Enter din caseta de dialog.

După confirmarea trimiterii informațiilor specificate, aceasta nu ajunge imediat pe server. În primul rând, este procesat de browser, rezultând forma „nume=valoare”.

Parametrul atribut este responsabil pentru nume tip etichetă , iar pentru valoare - datele introduse de utilizator. Apoi, șirul convertit este transmis handler-ului, care este cel mai adesea specificat în atribut acțiune element

Parametrul de acțiune în sine nu este necesar și, în unele cazuri, nu este deloc necesar. De exemplu, dacă o pagină de site este scrisă folosind php sau js, atunci procesarea are loc pe pagina curentă și nu sunt necesare link-uri.

Pentru o mai bună înțelegere a întregii imagini a funcționării site-ului, aș dori să adaug că pe server, datele sunt prelucrate folosind alte limbi. Astfel, limbile server-side sunt considerate a fi: Python, php, limbaje asemănătoare C (C#, C etc.), Java și altele.

Acum aș vrea să mă opresc și să vorbesc mai mult despre element . Pentru a explica în termeni simpli, atunci necesare pentru a crea câmpuri de text, butoane radio, diverse butoane, câmpuri ascunse, casete de selectare și alte obiecte.

Eticheta nu trebuie să fie asociată , cu toate acestea, dacă trebuie să procesați înregistrările utilizatorilor sau să le introduceți, de exemplu, într-o bază de date, atunci nu vă puteți lipsi de un container.

Principalele atribute ale acestui element de limbaj de marcare hipertext sunt:

Text– creează un câmp de text;
Trimite– creează un buton pentru trimiterea datelor către server;
Imagine– este responsabil pentru butonul cu poza;
Resetați– setează un buton pentru a șterge formularul;
Parola– setează un câmp de text special pentru parole;
Caseta de bifat– responsabil pentru câmpurile cu casete de selectare;
Radio– responsabil de câmpuri cu selectarea unui element;
Buton– creează un buton;
Ascuns– folosit pentru câmpuri ascunse;
Fişier– setează câmpul responsabil pentru trimiterea fișierelor.

Metode de transmitere a informațiilor

Există 2 moduri de a transfera datele utilizatorului pe partea serverului: obțineȘi Post. Aceste metode efectuează aceeași acțiune, dar diferă semnificativ unele de altele. Prin urmare, înainte de a menționa vreuna dintre ele, să ne familiarizăm cu caracteristicile lor.

	Post	obține
Dimensiunea documentelor transmise	Limitat la partea serverului.	Maxim – 4 KB.
Cum sunt afișate informațiile trimise	Disponibil numai atunci când este vizualizat prin extensii de browser sau alte produse software speciale.	Imediat disponibil pentru toată lumea.
Utilizarea marcajelor	Nu există nicio modalitate de a adăuga la marcaje, deoarece solicitările nu sunt repetate (toate paginile leagă la o singură adresă).	Orice pagină cu o solicitare poate fi salvată ca marcaje și returnată la ea mai târziu.
Memorarea în cache	Pe baza paragrafului anterior, toate cererile sunt pe o singură pagină.	Fiecare pagină poate fi memorată în cache separat.
Scop	Folosit pentru a trimite fișiere mari (cărți, imagini, videoclipuri etc.), mesaje, comentarii.	Excelent pentru a căuta valorile solicitate pe o resursă web sau pentru a trimite mesaje text scurte.

Pentru a indica care dintre cele două metode de transfer de date ar trebui să folosească browserul, în element utilizați parametrul furnizat metodă(De exemplu, method="post").

Să ne uităm la al doilea exemplu. Să creăm un formular în care trebuie să introduceți datele personale (numele și prenumele, data nașterii) și să creați o parolă. Apoi trimitem toate acestea către server folosind metoda Post.

metoda POST

Introduceți informațiile dvs. personale!

De exemplu, pentru a introduce o dată, există comutatoare pentru numărul fiecărui parametru (zi, lună și an), precum și un panou derulant cu calendarul în sine, pentru confort.

Crearea unui panou de înregistrare

Au fost acoperite etichetele și atributele de bază. De aceea, este timpul să creați un formular de înregistrare cu drepturi depline utilizând marcajul în stil CSS și validând datele introduse. Desigur, nu vom putea vedea cum serverul funcționează cu ei, dar vom oferi designul și detaliile importante.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Înregistrare

Vă sfătuiesc să salvați acest cod de program într-un document cu extensia .html și codificare utf-8 și să îl deschideți pe acesta din urmă într-o fereastră de browser. Veți vedea un panou de înregistrare în toată splendoarea lui cu câmpuri pentru introducerea numelui, prenumelui, e-mailului și a parolei repetate. Observați că atunci când lansați pagina, cursorul este imediat poziționat în primul câmp de text. Această tehnică se realizează prin atribut autofocus.

Formularele HTML sunt elemente complexe de interfață. Acestea includ diferite elemente funcționale: câmpuri de intrare Și , liste <select>, sfaturi etc. Tot codul formularului este conținut în element <form> .</p> <p>Majoritatea informațiilor din formularele web sunt transmise folosind elementul <input>. Pentru a introduce un rând de text, utilizați elementul <input type="text">, pentru mai multe linii - element <textarea>. Element <select>creează o listă derulantă.</p> <p>Element <label>creează etichete 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 fi denumită 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://i0.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 a face formularul mai ușor de înțeles pentru utilizatori, textul este adăugat în câmpurile formularului pentru a oferi un exemplu de date de intrare. Acest tip de text se numește text wildcard și este creat folosind atributul substituent.</p> <p>Câmpurile obligatorii trebuie de asemenea evidențiate. Înainte de HTML5, simbolul asterisc * era folosit lângă numele câmpului. Noua specificație introduce 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 Trimite 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 primiți focalizarea, 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 scoate în evidență 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">O tara</label> <select name="country"> <option>Selectaț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 în codificare 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://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Orez. 2. Aspectul implicit al formularului <p>După cum puteți vedea din figură, fiecare element de formular are stiluri implicite de browser. Să ștergem stilurile și să stilăm elementele de formular.</p><p> Form-wrap ( lățime: 550px; fundal: #ffd500; chenar-rază: 20px; ) .form-wrap *(tranziție: .1s liniar) .profile ( lățime: 240px; float: stânga; text-align: center; umplutură) : 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) %); ) /************************ stilul elementelor de formular ******************** * **/ etichetă, span ( afișare: bloc; dimensiunea fontului: 14px; marginea inferioară: 8px; ) introducere, introducere ( lățime chenar: 0; contur: niciunul; marjă: 0; lățime: 100%; umplutură: 10px 15px; fundal: #e6e6e6; ) input:focus, input:focus (box-shadow: 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; chenar-rază: 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 ~ . control radio, .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 ( display: none; /*unbifați în IE*/ ) .select-arrow (poziția: absolute); sus: 38px; dreapta: 15px; latime: 0; inaltime: 0; pointer-evenimente: niciunul; /*activează afișarea listei când dai 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; ) /************************ adaugă adaptabilitate la forma ******************** ** **/ @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-top: automat; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;) )</p><p><b>Fișierul 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 $subiect, specificați textul care va fi afișat ca titlu al scrisorii; <br>Your_name - aici puteți specifica numele care va fi afișat în câmpul „de la cine este scrisoarea”; <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 BCC la adresa ta de e-mail.</p> <p>Aspectul unui formular HTML poate fi mult îmbunătățit folosind CSS:</p> <h2>Stilul câmpului de intrare</h2><p>Utilizați proprietatea width pentru a determina lățimea câmpului de intrare:</p> <input type="text" id="fname2" name="firstname" style="width:100%;"><p>Exemplul de mai sus se aplică tuturor <input>elemente. Dacă doriți să stilați un anumit tip de intrare, puteți utiliza selectori de atribute:</p><ul><li>intrare - va selecta doar câmpuri de text</li><li>introducere - va selecta doar câmpurile de parolă</li><li>intrare - va selecta doar numărul câmpului</li><li>etc..</li> </ul><h2>Intrări pavate</h2><p>Utilizați proprietatea padding pentru a adăuga spațiu în interiorul unui câmp de text.</p><p><b>Sfat:</b> Dacă aveți o mulțime de intrări una după alta, puteți adăuga și o marjă pentru a adăuga mai mult spațiu în afara acestora:</p> <input type="text" id="fname3" name="firstname" class="input1"><input type="text" id="lname3" name="lastname" class="input1"><h2>Intrări de frontieră</h2><p>Utilizați proprietatea border pentru a modifica dimensiunea și culoarea chenarului și utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite:</p> <input type="text" id="fname4" name="firstname" class="inputborder"><p>Dacă doriți doar un chenar de jos, utilizați proprietatea border-bottom:</p> <input type="text" id="fname7" name="firstname" class="inputborder2"><h2>Intrări colorate</h2><p>Utilizați proprietatea background-color pentru a adăuga o culoare de fundal la intrare și proprietatea color pentru a schimba culoarea textului:</p><input type="text" value="Ioan" name="firstname" class="inputcolor"><h2>Intrări focalizate</h2><p>În mod implicit, unele browsere vor adăuga un contur albastru în jurul unei intrări atunci când aceasta primește focalizare (făcând clic pe). Puteți elimina acest comportament adăugând outline: none; la intrare.</p><p>Utilizați selectorul:focus pentru a face ceva cu câmpul de intrare când primește focalizare:</p> <h2>Introduceți folosind pictograma/imaginea</h2><p>Dacă doriți o pictogramă în interiorul intrării, utilizați proprietatea background-image și plasați-o cu proprietatea background-position. De asemenea, rețineți că vom adăuga o umplutură mare din stânga pentru a rezerva spațiu pentru pictograme:</p><input type="text" name="search" placeholder="Căutare.." class="icon"><h3>exemplu</h3><p>intrare( <br>culoare de fundal: alb; <br>imagine de fundal: url("searchicon.png"); <br>fundal-poziție: 10px 10px; <br>background-repeat: fără repetare; <br>padding-stânga: 40px; <br> }</p> Incearca-l tu insuti " <h2>Intrare de căutare animată</h2><p>În acest exemplu, folosim proprietatea de tranziție CSS3 pentru a anima lățimea casetei de căutare atunci când este focalizată. Veți afla mai multe despre proprietatea de tranziție mai târziu în documentul nostru</p> <script type="text/javascript">  </script><br> <br> <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> </article> <div class="post-share"> <div class="post-share__title">Ți-a plăcut articolul? Împărtășește-l</div> <script src="//yastatic.net/share/share.js"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"></div> </div> <div style="text-align: center; margin-top: 10px; margin-bottom: 50px; " id="sovet-1558718318" data-cfpa="13825"><div style="clear: both; font:16px/44px 'Ubuntu', sans-serif; display:inline-block;"> </div></div><script type="text/javascript">;new advadsCfpAd( 13825 );</script> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Vă recomandăm articole pe această temă</div> <div class="items"> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/setting/chto-delat-esli-sensornyi-telefon-upal-v-vodu-kak-vysushit-ego-na-bataree-v.html"><img src="/uploads/2c10a5576bb90ba0b62e86c466ee5f8c.jpg" width="200" height="200" alt="Este posibil și cum pot repara singur un telefon mobil cu ecran tactil dacă cade în apă și nu funcționează?" class="item__image" / loading=lazy loading=lazy>Este posibil și cum pot repara singur un telefon mobil cu ecran tactil dacă cade în apă și nu funcționează?</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/tips/mts-kak-dobavit-kontakt-v-chernyi-spisok-chernyi-spisok-mts-blokiruem.html"><img src="/uploads/ff0643387fa54bdafd7989f94df74300.jpg" width="200" height="200" alt="Lista neagră MTS - Blocarea numerelor inutile" class="item__image" / loading=lazy loading=lazy>Lista neagră MTS - Blocarea numerelor inutile</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/tp-link/chto-delat-esli-telefon-upal-v-vodu-kak-vysushit-sensornyi-telefon-esli-on-upal.html"><img src="/uploads/d1323ec87f326cd5986d9ac6cf653fb2.jpg" width="200" height="200" alt="Cum să uscați un telefon cu ecran tactil dacă cade în apă" class="item__image" / loading=lazy loading=lazy>Cum să uscați un telefon cu ecran tactil dacă cade în apă</a> <div class="item__comments"></div> </div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 30px; margin-bottom: 30px; " id="sovet-1702503440" data-cfpa="18987"><style type="text/css"> .gadsense_slot_2{ display: inline-block; width: 746px; height: 300px;} @media (min-width:300px) { .gadsense_slot_2 { width: 300px; height: 300px; } } @media (min-width:800px) { .gadsense_slot_2 { width: 600px; height: 300px; } } @media (min-width:1024px) { .gadsense_slot_2 { width: 746px; height: 300px; } } </style> </div><script type="text/javascript">;new advadsCfpAd( 18987 );</script> </main> <aside class="sidebar"> <div class="subs"> <div class="subs-soc"> <div class="subs-soc-title">Alăturați-vă pe rețelele sociale retelelor</div> <ul> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="fb">Facebook</a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fnewtravelers.ru%2Fro%2Fiphoneipad%2Fsozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="twi">Stare de nervozitate</a></li> <li><a href="https://vk.com/share.php?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="vk">In contact cu</a></li> <li><a href="https://connect.ok.ru/offer?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="ok">Colegi de clasa</a></li> <li><a href="https://youtube.com/" target="_blank" class="yt">YouTube</a></li> </ul> </div> </div> <div class="section section--companies"> <div class="headline center">Materiale populare</div> <ul> <li><a href="https://newtravelers.ru/ro/bluetooth/kak-obnovlyat-windows-xp-posle-okonchaniya-podderzhki-ms.html" ><img src="/uploads/a71e254543180feb3d90aed246d24926.jpg" width="74" height="74" alt="Cum se actualizează Windows XP după încheierea suportului MS" / loading=lazy loading=lazy><span>Cum se actualizează Windows XP după încheierea suportului MS</span></a></li> <li><a href="https://newtravelers.ru/ro/android/kak-naiti-sohranennyi-dokument-vord-kak-naiti-nedavnie-dokumenty-v.html" ><img src="/uploads/d2157ebfb3fcb65534970c57a786544c.jpg" width="74" height="74" alt="Cum să găsiți documente recente pe computer: sfaturi și trucuri" / loading=lazy loading=lazy><span>Cum să găsiți documente recente pe computer: sfaturi și trucuri</span></a></li> <li><a href="https://newtravelers.ru/ro/tenda/besplatnaya-versiya-ammy-admin-skachat-besplatnye-programmy-skachat-i-ustanovit.html" ><img src="/uploads/1cec05a38f79cb1b868c3bef0d06e888.jpg" width="74" height="74" alt="Descărcați programe gratuite Descărcați și instalați admin" / loading=lazy loading=lazy><span>Descărcați programe gratuite Descărcați și instalați admin</span></a></li> <li><a href="https://newtravelers.ru/ro/useful/kak-ustanavlivaetsya-zhestkii-disk-kak-vstavit-disk-v-noutbuk.html" ><img src="/uploads/d674c920bb27635218bd2574aa707589.jpg" width="74" height="74" alt="Cum se introduce un disc într-un laptop?" / loading=lazy loading=lazy><span>Cum se introduce un disc într-un laptop?</span></a></li> <li><a href="https://newtravelers.ru/ro/the-lg-tvs/kakie-igry-stoit-poigrat-po-seti-luchshie-besplatnye-igry-na-vseh.html" ><img src="/uploads/9693f8354665e89c9b7884c46e28e5ff.jpg" width="74" height="74" alt="Cele mai bune jocuri gratuite pe toate platformele" / loading=lazy loading=lazy><span>Cele mai bune jocuri gratuite pe toate platformele</span></a></li> </ul> </div> <nav class="section section--calc"> <div class="headline center">Nou pe site</div> <ul> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/setting/uslovie-esli-v-eksele-kak-v-excel-pri-pomoshchi-vlozhennyh-funkcii.html">Cum se calculează bonusul de vânzări folosind funcții imbricate if() în Excel</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/problems/luchshie-kooperativnye-igry-dlya-sovmestnogo-prohozhdeniya.html">Conectarea corectă a computerelor printr-o rețea locală Jocuri printr-o rețea locală pentru doi pe un computer</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/setting/sozdanie-iso-iz-svoei-ustanovlennoi-sistemy-sozdanie-iso-obrazov-sozdanie.html">Crearea unui iso din sistemul dvs. instalat</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/tp-link/skachat-dlya-android-6-versii-igru-nardy-dlinnye-nardy-nastolnaya.html">Table - jocul de societate din toate timpurile este acum pe telefonul tău</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/problems/besplatnye-fotoramki-onlain---krasivye-effekty-foto-luchshie.html">Cele mai bune aplicații pentru rame foto Rame foto fără înregistrare</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/d-link/obzor-i-testirovanie-smartfona-nokia-xl-dual-sim-nokia-xl-naibolee-chastye.html">Nokia XL - cele mai frecvente probleme și câteva modalități de a le rezolva Comunicarea între dispozitive pe rețelele mobile se realizează folosind tehnologii care oferă rate diferite de transfer de date</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/ro/setting/kakie-klaviatury-dlya-android-luchshe-vybiraem-luchshuyu-klaviaturu-dlya-telefona.html">Alegerea celei mai bune tastaturi pentru un telefon Android în aplicația de tastatură rusă rusă pentru Android</a></li> </ul> <div class="section--calc__all"> </div> </nav> </aside> </div> <div class="popular popular-in-cat"> <div class="headline center" id="stop_ads">În prezent, vizitatorii discută</div> <div class="items"> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/the-lg-tvs/chem-otkryt-fail-ai-faily-s-rasshireniem-ai-kak-i-chem-ih-otkryt-skachat-fail.html"><img src="/uploads/d17e6e159086d655e63353669ff3300a.jpg" width="200" height="200" alt="Cum se deschide un fișier .AI? Fișierele cu extensia AI: cum și cum să le deschideți Descărcați fișierul ai" class="item__image" / loading=lazy loading=lazy>Cum se deschide un fișier .AI? Fișierele cu extensia AI: cum și cum să le deschideți Descărcați fișierul ai</a> <a class="item__cat" href="https://newtravelers.ru/ro/category/the-lg-tvs/">Televizoare LG</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/android/kak-konvertirovat-cr2-v-jpg-fail-onlain-sposoby-konvertacii-cr2-v-jpg-cr2-otkryt.html"><img src="/uploads/7ae9effc527a7026c7b59e240eafa291.jpg" width="200" height="200" alt="Modalități de a converti CR2 în JPG Cr2 sunt deschise online" class="item__image" / loading=lazy loading=lazy>Modalități de a converti CR2 în JPG Cr2 sunt deschise online</a> <a class="item__cat" href="https://newtravelers.ru/ro/category/android/">Android</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/tenda/kak-zablokirovat-stranicu-na-kompyutere-kak-zablokirovat.html"><img src="/uploads/64f8aa0ac8d9c4c856542becac1e850d.jpg" width="200" height="200" alt="Cum să blocați VKontakte pe un computer" class="item__image" / loading=lazy loading=lazy>Cum să blocați VKontakte pe un computer</a> <a class="item__cat" href="https://newtravelers.ru/ro/category/tenda/">Tenda</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/ro/iphoneipad/chem-otkryt-fail-pub-rasshirenie-pub---chem-otkryt-rasshirenie-pub-chem-otkryt.html"><img src="/uploads/a43901daecf33c6ece6c8c8a412f5452.jpg" width="200" height="200" alt="Cum se deschide un fișier .PUB? Extensia PUB - cum se deschide? Extensie pub decât să deschidă" class="item__image" / loading=lazy loading=lazy>Cum se deschide un fișier .PUB? Extensia PUB - cum se deschide? Extensie pub decât să deschidă</a> <a class="item__cat" href="https://newtravelers.ru/ro/category/iphoneipad/">iPhone/iPad</a> <div class="item__comments"></div> </div> </div> </div> </div> <footer class="footer"> <div class="footer__copyright"> <div class="footer__logo">newtravelers.ru</div> <p>© 2023 – newtravelers.ru</p> <p>Sfaturi pentru configurarea Android, routere, Smart TV. Bluetooth</p> </div> <nav class="footer__nav-1"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/ro/category/problems/">Probleme</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/ro/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/ro/category/setting/">Setări</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/ro/category/error/">Erori</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/ro/category/setting/">Setări</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/ro/category/bluetooth/">Bluetooth</a></li> </ul></nav> <div class="footer__nav-2"> <nav><ul> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/ro/feedback.html">Contacte</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/ro/adverts.html">Publicitate pe proiect</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/ro/sitemap.xml">Harta site-ului</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/ro/feedback.html">Drepturi de autor și reguli</a></li> </ul></nav> <ul class="footer__soc"> <li><a href="https://vk.com/share.php?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="vk">In contact cu</a></li> <li><a href="https://connect.ok.ru/offer?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="ok">Colegi de clasa</a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="fb">Facebook</a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fnewtravelers.ru%2Fro%2Fiphoneipad%2Fsozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="twi">Stare de nervozitate</a></li> </ul> </div> <div class="footer-right"> <div class="footer__counters" id="text-6"> <div class="textwidget"><p></p> </div> </div> <div class="footer__orphus"> <div>Eroarea noastră pe site? Selectați-l și apăsați Ctrl + Enter</div> </div> </div> </footer> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script><script type='text/javascript' src='https://newtravelers.ru/wp-content/themes/sovet-ingenera_adapt/js/baron.min.js'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "fixed-sidebar", "margin_top" : 0, "margin_bottom" : 0, "stop_id" : "stop_ads", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-7'] } ; </script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/wp-featherlight/js/wpFeatherlight.pkgd.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script async="async" type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/akismet/_inc/form.js'></script> <script type="text/javascript">  </script><br> <br> </body> </html>

Crearea și lucrul cu formulare în html. Crearea formularelor HTML Să ne uităm la un mic exemplu

Exemplu de formular HTML | Intră pe site

Exemplu de formular HTML | Comentarii pe site

Exemplu de formular HTML | Lista verticală

Exemplu de formular HTML | Lista cu bara de defilare

Ce este o formă și cum funcționează?

Trimiterea datelor pe partea serverului

Metode de transmitere a informațiilor

Crearea unui panou de înregistrare

Pentru o lucrare corectă ulterioară în serviciul nostru, vă rugăm să introduceți datele corecte!