HTML: n oppiminen, osa 33: Syöttötyyppitiedostojen käyttö, Hyväksy määritteet ja Syöttötyyppikuva HTML-lomakkeissa

Joihinkin tarkoituksiin olet varmastitarvitset lomakkeen, jolla voi ladata tiedosto- tai kuvaliitteitä verkkosivustollesi, esimerkiksi ansioluettelon liitteitä, portfolioita, valokuvia ja muita. Nyt, saadaksesi lähetystoiminnon käyttämään <input> -tagia. <input> -tagia käytetään elementtien luomiseen kysyäkseen tietoja käyttäjältä.

Edellisissä opetusohjelmissa meillä onoppia <input> -tunnisteiden käyttöä syöttötyypeillä, nimittäin teksti, salasana, lähetys, valintaruutu ja radio. No, tässä opetusohjelmassa keskustellaan <input> -tunnisteen käytöstä syöttötiedostotyypillä ja seuraavan kuvan hyväksyntämääritteellä. Tarkastelemme alla olevaa opastusta saadaksesi lisätietoja kahdesta syöttötyypin arvosta ja määritteestä:

Syö tiedostotyyppi

Syöttötunnisteita, joissa on tyyppi = "tiedosto" -attribuutti, käytetäänladata tiedostoja. Yleensä type = "file" -attribuutin käyttö liittyy PHP: n käyttöön. Seuraava on esimerkki <input> -tagin kirjoittamisesta ja käyttämisestä tyyppiä "tiedosto" HTML-muodossa:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Input Tipe File pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
NIM : <input type="text" name="nim" size="11" maxlength="9"> <br><br>
Upload CV : <input type="file" name="cv"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

Näyttö selaimessa näin:

Selain näyttää painikkeen, jonka vieressä on kuvateksti, jossa painikkeen nimi ja kuvateksti eroavat käytetystä selaimesta riippuen.

Attribuutti Hyväksy

Hyväksy-määrite määritetään tairajoita ladattavien tiedostojen tyyppejä, olivatpa ne sitten musiikkitiedostoja, asiakirja-, kuvatiedostoja tai muita. Tätä ominaisuutta käytetään, kun käytät <input> -tunnistetta type = "file" -attribuutin kanssa. Tämän ominaisuuden arvot ovat:

Tiedostotunniste: tiedostopääte, joka alkaa pisteellä, kuten .doc, .pdf, .jpg.
ääni / *
kuva / *
video / *

Jopa käyttämällä hyväksyä, käyttäjän määritteenvoi helposti muuttaa ladatun tiedostotyypin. Joten on parempi, jos tiedostotyyppirajoitus määritetään myös Web-palvelimen puolella PHP: llä. Seuraava on esimerkki hyväksymismääritteen kirjoittamisesta ja käyttämisestä HTML-lomakkeissa:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Accept pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Judul Lagu : <input type="text" name="lagu" size="11"> <br><br>
Mp3 : <input type="file" name="file_musik" accept="audio/*"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

Kun yllä oleva koodi on suoritettu selaimessa, se tulee näkyviin seuraavasti:

Syötetyn kuvan tyyppi

Syöttötunnisteita, joissa on attribuutti type = "image", käytetäänkuvan lisäämiseksi muotoon. Missä kuva toimii lomakeobjektina, jota käyttäjä voi napsauttaa. Sitten, kun käyttäjä napsauttaa kuvaa, selain näyttää sen pisteen koordinaatit, jossa kuvaa napsautettiin.

Vaikka sitä käytetään harvoin, voit käyttääsyöttötyyppikuva muiden kuvien näyttämiseksi, kun käyttäjä napsauttaa tiettyjä koordinaatteja. Tässä on esimerkki koodista, jolla HTML-lomakkeissa voidaan kirjoittaa ja käyttää sisääntyyppikuvia:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Input Type Image pada Form HTML</title>
</head>
<body>
<h4>Contoh Penggunaan Input Type Image pada Form HTML</h4>
<form action="proses_gambar.php" method="get">
<input type="image" src="pantai.jpg" alt="pantai" width="400">
</form>
</body>
</html>

Kun yllä oleva koodi on suoritettu selaimessa, se tulee näkyviin seuraavasti:

Kun napsautat piirustusaluetta, koordinaatit (x ja y) napsautetulla kuva-alueella näkyvät myös palvelimella.

Tämä on selitys syötetiedostotyyppien, kuvien ja hyväksyttyjen määritteiden käytölle. Varmista, että jatkat vierailua tähän blogiin, niin saat viimeisimmät HTML-oppimisohjeiden päivitykset aloittelijoille.

</ P>

Lue lisää: