Lernen von HTML Teil 33: Verwenden von Eingabetypdateien, Akzeptieren von Attributen und Eingabetypbild in HTML-Formularen

Für einige Zwecke sind Sie sicherlichSie benötigen ein Formular, mit dem Sie Datei- oder Bildanhänge auf Ihre Website hochladen können, z. B. Lebenslaufanhänge, Portfolios, Fotos und andere. Verwenden Sie jetzt das <input> -Tag, um die Upload-Funktion zu aktivieren. Das <input> -Tag wird verwendet, um Elemente zu erstellen, um Informationen vom Benutzer anzufordern.

In den vorherigen Tutorials haben wirLernen Sie die Verwendung von <input> -Tags mit den Eingabetypen Text, Kennwort, Senden, Kontrollkästchen und Radio. In diesem Tutorial wird die Verwendung des <input> -Tags mit dem Eingabedateityp und des folgenden Bilds mit dem Attribut accept erläutert. Weitere Informationen zu den beiden Werten und Attributen des Eingabetyps finden Sie im folgenden Lernprogramm:

Eingabedateityp

Eingabe-Tags mit dem Attribut type = "file" werden verwendetDateien hochladen. Im Allgemeinen hängt die Verwendung des Attributs type = "file" mit der Verwendung von PHP zusammen. Im Folgenden finden Sie ein Beispiel für das Schreiben und Verwenden des <input> -Tags mit dem Typ "file" im HTML-Formular:

<!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>

Die Anzeige im Browser sieht folgendermaßen aus:

Der Browser zeigt eine Schaltfläche mit dem Beschriftungstext an, wobei sich der Name der Schaltfläche und der Beschriftungstext je nach verwendetem Webbrowser unterscheiden.

Attribut Akzeptieren

Das Attribut accept wird verwendet, um oder anzugebenBegrenzen Sie die Dateitypen, die hochgeladen werden können, unabhängig davon, ob es sich um Musikdateien, Dokumentdateien, Bilddateien oder andere handelt. Dieses Attribut wird verwendet, wenn Sie das <input> -Tag mit dem Attribut type = "file" verwenden. Die Werte dieses Attributs sind:

Dateierweiterung: Dateierweiterung, die mit einem Punkt wie .doc, .pdf, .jpg beginnt.
Audio / *
Bild / *
Video / *

Auch mit dem Attribut accept, userkann den Typ der hochgeladenen Datei leicht ändern. Daher ist es besser, wenn die Dateitypbeschränkung auch auf der Webserverseite mit PHP festgelegt wird. Im Folgenden finden Sie ein Beispiel für das Schreiben und Verwenden des Attributs accept in HTML-Formularen:

<!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>

Nachdem der obige Code im Browser ausgeführt wurde, wird er wie folgt angezeigt:

Geben Sie den Bildtyp ein

Eingabe-Tags mit dem Attribut type = "image" werden verwendetum ein Bild in das Formular einzufügen. Wobei das Bild als Formularobjekt dient, auf das der Benutzer klicken kann. Wenn der Benutzer dann auf das Bild klickt, zeigt der Webbrowser die Koordinaten des Punkts an, an dem auf das Bild geklickt wurde.

Obwohl selten verwendet, können Sie verwendenGeben Sie ein Bild ein, um andere Bilder anzuzeigen, wenn der Benutzer auf bestimmte Koordinaten klickt. Im Folgenden finden Sie ein Beispiel für den Code zum Schreiben und Verwenden von Bildern vom Typ Eingabe in HTML-Formularen:

<!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>

Nachdem der obige Code im Browser ausgeführt wurde, wird er wie folgt angezeigt:

Wenn Sie auf den Zeichenbereich klicken, werden die Koordinaten (x und y) im Bildbereich, auf den Sie geklickt haben, auch auf dem Server angezeigt.

Dies ist eine Erklärung für die Verwendung von Eingabedateitypen, Bildern und Akzeptanzattributen. Stellen Sie sicher, dass Sie diesen Blog weiterhin besuchen, um die neuesten Updates für HTML-Lernprogramme für Anfänger zu erhalten.

</ p>

Lesen Sie mehr: