HTML višeredni unos. Višelinijsko tekstualno polje

Polje za unos teksta u više redaka omogućuje vam slanje ne jednog retka, već nekoliko odjednom. Prema zadanim postavkama, oznaka stvara prazno polje koje je široko 20 znakova i sastoji se od dva retka.

Tekst

Višelinijsko polje za unos teksta počinje uparenim oznakama . Oznaka naziva navodi naziv višerednog polja. Također možete odrediti širinu polja ( kol) i broj redaka ( redovima). Ako je potrebno, možete odrediti atribut samo za čitanje, koji zabranjuje uređivanje, brisanje i promjenu teksta, tj. tekst će biti samo za čitanje. Ako želite da se tekst u početku prikaže u polju za unos s više redaka, onda se mora postaviti između oznaka .

Tekst koji <br>u početku će se prikazati u višerednom polju za unos i koje <br>ne može se promijeniti, jer naveden atribut samo za čitanje

Skriveno tekstualno polje

Omogućuje vam prosljeđivanje nekih servisnih informacija skripti bez njihovog prikazivanja na stranici.

Skriveno polje počinje oznakom , čiji su atributi Ime, tip I vrijednost. atribut imena postavlja naziv polja, tip definira tip polja i atribut vrijednost postavlja vrijednost polja.

Gumb Pošalji

Koristi se za slanje obrasca u skriptu.

Prilikom izrade gumba za slanje obrasca morate navesti 2 atributa: type="pošalji" I vrijednost=”Tekst gumba”. Atribut name je obavezan ako gumb nije jedan, već nekoliko, a svi su kreirani za različite operacije, na primjer, gumbe "Spremi", "Izbriši", "Uredi" itd. Nakon klika na gumb, niz se prosljeđuje skripti naziv=tekst gumba.

Gumb za prijenos datoteke (pregledavanje)

Koristi se za prijenos datoteka na poslužitelj. Objekt za pregledavanje počinje s uparenim oznakama

Okvir (skup polja)

Objekt skup polja omogućuje crtanje okvira oko objekata. Ima završnu oznaku . Naslov je u oznakama

. Glavna svrha objekta je postaviti različite stilove dizajna.

Obrada obrasca

Svi podaci koje želite primiti iz HTML obrasca u PHP skripta obrađene pomoću superglobalnih nizova $_POST ili $_GET, ovisno o onom navedenom u atributu metoda način prijenosa podataka.

Zadatak: Podatke trebate dobiti iz tekstualnog polja i višerednog polja za unos i proslijediti ih skripti.
Riješenje: Treba stvoriti HTML obrazac i PHP - skripta za rukovanje obrascem.

Rasprava:

Kreirajmo dvije datoteke: obrazac.html I akcija.php. U spisu obrazac.html sadržavat će html obrazac s tekstualnim poljem moj tekst i tekstualno područje poruka:

U ovom html obrascu zanimaju nas 3 atributa: akcijski koji specificira put do obrasca za rukovanje, naziv tekstualnog polja ( moj tekst) i naziv polja s više redaka voda ( poruka). Također u obrascu postoji gumb, kada se klikne, podaci se prenose.

Nakon što je html obrazac spreman, moramo kreirati obrasca za obradu akcija.php:

$text = $_POST["moj tekst"];
$msg = $_POST["moj tekst"];
odjek $text;
jeka "";
echo $msg;
?>

Nakon što unesemo bilo koju vrijednost u tekstualna polja i kliknemo na " Pošaljite podatke" html obrazac šalje vrijednosti u skriptu akcija.php.
Nakon toga u varijablama $text I $msg sadržavat će vrijednosti tekstualnog polja i višerednog polja za unos, čije su vrijednosti preuzete iz superglobalnih varijabli $_POST.

Ako želite da se html formatiranje poštuje u tekstualnom polju s više redaka, upotrijebite funkciju nl2br():

$text = nl2br($_POST["moj tekst"]);
?>

Zadatak: Recimo da želimo stvoriti padajući popis s godinama od 2000. do 2050. godine.
Riješenje: Potrebno je izraditi HTML obrazac s elementom SELECT i PHP skriptom za obradu obrasca.

Rasprava:

Počnimo stvaranjem dvije datoteke: obrazac.html I akcija.php. U spisu obrazac.html sadržavat će html obrazac s padajućim popisom. Štoviše, vrijednosti na popisu mogu se odrediti na dva načina:

I. Ručni unos podataka:

2000
2001
2002
……………………………………………
2050

II. Unos podataka kroz petlju:

$godina = 2000;
za ($i = 0; $i<= 50; $i++) // Цикл от 0 до 50
{
$nove_godine = $godina + $i; // Formirajte novu vrijednost
jeka " ".$new_years.""; // Formirajte novi redak
}
?>

Kao što vidite, drugi primjer s petljom je kompaktniji. Mislim da se ne isplati davati skriptu za obradu obrasca, jer se obrađuje baš kao i tekstualno polje, t.j. vrijednosti liste mogu se dohvatiti iz superglobalnog niza $_POST.

Opis:

Napravimo HTML obrazac za slanje datoteke na poslužitelj.

Ovaj html obrazac ima element pretraživati, koji otvara dijaloški okvir za odabir datoteke za prijenos na poslužitelj. Pritiskom na tipku "Prenesi datoteku", datoteka se prosljeđuje skripti rukovatelja.

Zatim morate napisati obrađivač skripte akcija.php. Prije pisanja rukovatelja, morate odlučiti u koji direktorij ćemo kopirati datoteku:

if(isset($_FILES["myfile"])) // Ako datoteka postoji
{
$katalog = "../slika/"; // Naš imenik
if (is_dir($catalog)) // Ako postoji takav direktorij
{
$myfile = $_FILES["myfile"]["tmp_name"]; // Temp datoteka
$myfile_name = $_FILES["myfile"]["name"]; // Naziv datoteke
if(!copy($myfile, $catalog)) echo "Pogreška pri kopiranju datoteke ".$myfile_name" // Ako kopiranje datoteke nije uspjelo
}
inače mkdir("../image/"); // Ako takav direktorij ne postoji, mi ćemo ga kreirati
}
?>

Komentar

Ako vjerujete da će korisnici prenijeti bilo koje datoteke na vaš poslužitelj, morate biti izuzetno oprezni. Napadači mogu ubaciti "loš" kod u sliku ili datoteku i poslati je poslužitelju. U takvim slučajevima morate strogo kontrolirati preuzimanje datoteka.

Ovaj primjer pokazuje stvaranje direktorija i kopiranje datoteke u taj direktorij na poslužitelju.

Također bih želio pokazati primjer s elementom potvrdni okvir. Ovaj element se malo razlikuje od ostalih elemenata po tome što ako ne i jedan od elemenata potvrdni okvir'a nije odabrana, tada je superglobalna varijabla $_POSTće se vratiti prazna vrijednost:

if (!empty($_POST["mycolor"])) echo $_POST["mycolor"]; // Ako je odabrana barem 1 stavka
else echo "Odaberi vrijednost";
?>

Ovaj element obrasca dizajniran je za stvaranje područja u koje možete unijeti više redaka teksta. U takvom tekstualnom polju dopušteno je napraviti prijelome redaka, oni se spremaju prilikom slanja podataka na poslužitelj.

Višelinijsko tekstualno polje je neophodno za dodavanje komentara na članke, pisanje postova na forumu, umetanje i uređivanje postova na blogu i u mnogim drugim slučajevima kada jedan redak teksta očito nije dovoljan.

Sintaksa za kreiranje polja je sljedeća.

Između oznaka I možete staviti bilo koji tekst koji će se prikazati unutar polja. Ako nema teksta, polje će u početku biti prazno.

Važeći atributi navedeni su u tablici. jedan.

Rezultat primjera prikazan je na sl. jedan.

Riža. 1. Zadani prikaz tekstualnog polja

Za vrijede ista ograničenja kao za <input>, naime:</p><ul><li><textarea>ne možete ugraditi veze <a> ;</li><li><textarea>ne može biti ugniježđen unutar gumba <button> ;</li> </ul><p>U <textarea>dopušteno umetanje <a href="https://bumotors.ru/hr/sochetanie-klavish-chtoby-vydelit-vse-polnyi-spisok-goryachih-klavish-windows.html">proizvoljan tekst</a> i pojavit će se unutar okvira za uređivanje teksta. Ovo uzima u obzir sve razmake, za razliku od običnog HTML-a (primjer 2).</p><p>Primjer 2. Tekstualno polje s tekstom</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Polje za tekst</title> </head> <body> <form action="handler.php"> <p><strong>Uredite svoju recenziju:</strong></p> <p><textarea name="edit" rows="3" cols="30">KG/AM piti yadu.

Proizlaziti ovaj primjer prikazano na sl. 2. Imajte na umu da su svi razmaci i prijelomi redaka unutra .</p><p><img src='https://i2.wp.com/webref.ru/assets/images/html5-forms/textarea.png' width="100%" loading=lazy loading=lazy></p><p>Riža. 2. Tekstno polje</p><p>Obično dimenzije <textarea>se postavljaju pomoću stilova, ali ako su i rows i cols atributi s širinom i visinom postavljeni putem CSS-a, stilovi imaju prednost i vrijednost atributa se zanemaruje.</p> <p>Za <a href="https://bumotors.ru/hr/tekstovyi-redaktor-dlya-pisatelei-vam-pisateli-dve-programmy.html">obimni tekstovi</a>, na primjer za <a href="https://bumotors.ru/hr/nastroika-elektronnoi-pochty-bez-pisem-v-spame-poterya-pochtovyh-soobshchenii.html">mail poruke</a>, prikladno je koristiti ovaj element. Generiraju ga oznake <b><textarea>… i ima sljedeće opcije:

– Ime- naziv polja,

– kol- širina polja u znakovima,

– redovima- broj redaka teksta vidljivih na ekranu,

– zamotati- prelamanje riječi:

– isključeno- nema prijenosa

– virtualan- prikazan je prijenos, ali poslužitelj prima nedjeljiv niz,

– fizički- prijenos i na ekranu i pri ulasku na poslužitelj.

– onemogućeno- neaktivno polje,

– samo za čitanje- Dopušteno samo čitanje.

Proizlaziti:

Padajući popisi

Popisi dolaze u opcijama jednostrukog i višestrukog odabira. Obje su postavljene pomoću oznaka …, unutar kojih se nalaze elementi vrijednosti, dano oznakom . Razmotrite parametre ovih oznaka:

:

– Ime- lista imena. Svaki odabrani element popisa, kada se proslijedi poslužitelju, izgledat će ovako: ime.vrijednost, gdje je vrijednost (vrijednost) preuzeta iz oznake opcije;

– veličina- određuje broj vidljivih elemenata na popisu: 1 - jednostavan padajući popis, više od 1 - popis s trakom za pomicanje;

– višestruko- Omogućuje odabir više stavki popisa.

:

– odabran- označavaju najvjerojatniji element liste za odabir, ako je popis s višestrukim izborom, tada se može označiti nekoliko stavki;

– vrijednost- vrijednost koja će biti poslana poslužitelju ako je stavka odabrana.

Koji jezik želite učiti:

html

php

Java

Koliko ste vremena spremni potrošiti na ovo?

1 mjesec

2 mjeseca

3 mjeseca

Koje dane u tjednu želite vježbati?

(odaberite pritisnutim tipka ctrl)

ponedjeljak

utorak

srijeda

četvrtak

petak

subota

nedjelja

Proizlaziti:

Ima više oznaka<optgroup>… , što vam omogućuje grupiranje elemenata popisa prema nekim kriterijima. Na primjer, za izradu kataloga web-mjesta u obliku popisa, prikladnije ga je podijeliti u interesne skupine. Molimo zabilježite u ovaj slučaj završne oznake su obavezne. primjer koda:

Imenik web stranice:

internet

Mobiteli

hardver

slobodna radna mjesta

zapošljavanje

Sažetak

zdravlje

ljepota

djeca

Proizlaziti:

natpisi

Svi elementi obrasca mogu se povezati sa svojim oznakama pomoću elementa i njegov parametar za, čija je vrijednost naziv elementa s kojim povezujemo natpis. Na primjer:

Odaberite datoteku:

Proizlaziti:

Stanje posla

U skladu s opcijom izrade obrasca za unos podataka. Stranica bi trebala sadržavati sljedeće vizualne elemente:

1. naslov;

2. tekst koji objašnjava svrhu obrasca;

3. obrazac za unos podataka, prema opciji. Sami odaberite vrste elemenata za unos podataka (najmanje 3 različita);

4. gumbi - " POSLATI», « ČISTO»;

5. informacije o kreatoru stranice - Puno ime, Skupina, e-mail.

Slika 1 - Okvirni prikaz stranice

Dodajte gumb svakom polju obrasca Obrazloženje“, kada se klikne, otvara se prozor s objašnjenjima i/ili slikom, gumb “ ZATVORITI».

Pritiskom na tipku " POSLATI“, provjerava se ispravnost popunjavanja podataka obrasca - sva polja su popunjena, numerička polja sadržavati dopuštene vrijednosti, vodeći i zadnji razmaci su uklonjeni. Ako se podaci jednog ili više polja ne podudaraju, potrebno je prikazati prozor u kojem bi trebao biti prikazan naziv i kratki tekst koji objašnjava zahtjeve za podatke unesene u polje. Ako su podaci ispravno uneseni, podaci se šalju nakon potvrde u dijaloškom okviru. Postavite dva skrivena polja na obrazac sa trenutni datum i vrijeme, koji se također prenose na poslužitelj. Primjer obrasca:

Slika 2 - Okvirni prikaz obrasca za unos podataka

Tablica 1 - Varijante obrazaca za unos podataka

test pitanja