Hoe maak je een knop in HTML om een bestand te downloaden

Video: Download image on button click in HTML || Download button html

Inhoud

routebeschrijving
tips
Wat je nodig hebt
Referenties
middelen

Webontwerpers gebruiken vaak knoppen die zijn ingebed in HTML-documenten vanwege functionaliteit en esthetische redenen. De knoppen bieden gebruikers niet alleen een visueel aantrekkelijke manier om informatie te verzenden of beslissingen te nemen, maar bieden ook verschillende functies op basis van gebruikersinteractie. In dit artikel kan een gebruiker met een HTML-knop een bestand downloaden wanneer erop wordt geklikt.

routebeschrijving

Knoppen zijn handige en flexibele HTML-componenten (Hemera Technologies / PhotoObjects.net / Getty Images)

Maak het HTML-bestand in een teksteditor, zoals Kladblok. Het basisbestand moet ten minste de tags "html" en "body" bevatten:

>

De tag "knop" bevat de informatie die de knop beschrijft. In dit geval is de knop van het algemene type "knop" en de naam is "Download". De woorden tussen de "" -tags verschijnen op de knop wanneer de pagina in een browser wordt weergegeven.
Laat de knop naar een bestand verwijzen wanneer erop wordt geklikt door een gebruiker. Voeg hiervoor een "onClick" -gebeurtenis toe:

De "onClick" -gebeurtenis wordt uitgevoerd wanneer de gebruiker op de knop klikt. In dit geval wordt een nieuw venster geopend dat verwijst naar het bestandsadres.
Sla het bestand op en open het in uw webbrowser. Sla op met de extensie "html" (bijvoorbeeld "test.html"). Open het in de browser. De knop verschijnt in de linkerbovenhoek van het venster en een klik hierop zal de gebruiker doorsturen naar het bestand en het downloadproces beginnen.

tips

Deze code kan in elk HTML-document worden gekopieerd en geplakt. Lees de website 'W3C-scholen' (w3schools.com) voor meer informatie over wat HTML-knoppen kunnen doen.