HTML: n oppiminen, osa 31: Textarea-elementtien käyttäminen HTML-lomakkeissa
Tässä keskustelussa tutkitaan tekstialue-elementtien käyttöä HTML-lomakkeissa. Tämä elementti on verkkosivustolla yleisimmin käytetty elementti.
Yritän selittää mahdollisimman yksityiskohtaisestiseuraavien tekstialue-elementtien käytöstä niiden ominaisuuksilla, nimittäin riveillä ja sarakkeilla. Yleensä <textarea> -elementti ... </texraea> käytetään tietojen syöttämiseen tekstikenttään. Katso lisätietoja näistä elementeistä ja määritteistä alla olevasta opetusohjelmasta
<textarea> -tagi
<textarea> -tagia käytetään luomaantekstikenttä, jossa on tekstialue. Sen käyttöä leimaa <textarea> -tagi etuliitteenä ja </textarea> -tagi sulkemisena. Tässä on esimerkki koodista:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Textarea pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>Selaimessa suoritettuaan tulokset ovat seuraavat:
Tämä tunniste tukee useita määritteitä, kuten nimi, rivit, sarakkeet, enimmäispituus, vaadittavat ja niin edelleen.
1. Rivien ominaisuus
Rivit-määrite määritetään määrän määrittämiseksilinja textareaalla. Tämän ominaisuuden arvot ovat lukuja, kuten 40, 10 tai prosenttimäärän, kuten 20%. Missä suurempi arvo, sitä korkeampi on teksta-elementti. Seuraava on esimerkki HTML-osoitteen <textarea> -tagin rivit-määritteen kirjoittamisesta ja käytöstä:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>Kun yllä oleva koodi on suoritettu selaimessa, se tulee näkyviin seuraavasti:
2. Cols Attribuutti
Sarakkeita (attribuutteja) käytetään määrittämään leveys(sarakkeiden lukumäärä) textarea-elementissä. Samoin kuin rivit-määrite, tämän ominaisuuden arvot voivat olla numeroita, kuten 80, 20 tai 20%. Missä suurempi arvo, sitä leveämpi on tekstielementti. Seuraava on esimerkki koodista HTML-koodin <textarea> -tagin kirjoittamiseen ja käyttämiseen cols-määrite:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>Kun yllä oleva koodi on suoritettu selaimessa, se tulee näkyviin seuraavasti:
Molemmat esimerkit käyttävät rivien ja sarakkeiden määritteitäYllä oleva on osoittanut eroja rivien ja sarakkeiden määritteen käytössä textarea-elementissä. Tarkemmin sanottuna rivit-attribuutti on tarkoitettu korkeuden asettamiseen, kun taas cols-määrite on tarkoitettu leveyden asettamiseen <textarea> -elementissä. Seuraava on esimerkki rivien ja sarakkeiden määritteiden kirjoittamisesta ja käyttämisestä yhdessä HTML: n <textarea> -tunnisteessa:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows dan Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>Kun yllä oleva koodi on suoritettu selaimessa, se tulee näkyviin seuraavasti:
3. Suurin ominaisuus
Tämä ominaisuus koskee myös TextArea-tunnisteita, joiden toiminto rajoittaa TextAreaan kirjoitettujen merkkien määrää. Esimerkki koodista:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" maxlength="40">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>Kun suoritat selaimessa, tulos on seuraava:
Yllä olevassa koodissa enimmäispituudeksi on asetettu 40, joten voit antaa korkeintaan 40 merkkiä, ei enempää.
4. Vaadittavat ominaisuudet
Ei vain maksimipituusominaisuus, vaadittava ominaisuuskäytetään myös textareaalla. Tätä ominaisuusfunktiota käytetään asettamaan tarvittava elementti (tässä tapauksessa tekstialue) ennen lähettämistä. Esimerkki tällaisesta HTML-koodista:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" required></textarea>
<br>
<input type="submit">
</form>
</body>
</html>Se näyttää selaimelta näin:
Kun napsautat suoraan lähetä-painiketta, saat ilmoituksen, kuten yllä olevassa kuvassa, mikä tarkoittaa, että sinun on täytettävä tekstialue ensin ennen napsauttamalla lähetä-painiketta.
Se on materiaali, joka koskee tekstareiden käyttöäHTML-lomake, tekstialue voidaan käyttää myös HTML-muodon ulkopuolella, joten se ei ole vain HTML-lomakkeiden kohdalla. Älä unohda käydä tässä blogissa saadaksesi uusimmat HTML-ohjeet.
