Guidance portal

World of Guidance and Education

Insert Upload Form

In this chapter we will learn to insert the Upload Form on the webpages. Upload Forms are placed on the websites for allowing the users to upload their files like music, videos, pictures, documnets (.xls, .doc, .pdf) etcetera.

Upload Form:

The syntax of Upload Form is shown below; each part of code is further explained in detail.

     <input name="file field" type="file" id="file field" size="40" maxlength="4">

The syntax is familiar as it has been used to insert forms in previous chapters, however differnces are explained below.

Input Name

"File Field" : When input name is set to "filed field" the browser will understand that it is upload form. The browesr will show the "browse" button automatically for browsing the file path. However this button will not work untill you will insert the JAVASCRIPT for action of browsing.

Type

Type should be equal "file" so that browser can understand that the upload form will be used to upload "files".

id = "file"

As previously discussed "id" is used by programmers. This is required to give reference in JAVASCRIPT, CSS, ASP when defining the action to be taken by the browser for a selected input name. ID should be unique, otherwise there will be error while writting javascript, css or asp. For complete details, please refer the chapter "Insert Forms".

Size and maxlength

"Size" defines the character width i.e. what should the length be of the upload field. Maxlength defines the maximum characters. These two attributes are optional and can be ignored while inserting the upload form. The length of the field will go to default and maxlength restriction has been removed.

For clear understanding lets insert the Upload Form on the webpage and accordingly see the browser view.

    Code:

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>

    <form name="form2" enctype="multipart/form-data" method="post" action=" your required action">
    <label for="file field"></label>
    <br>
    <input name="file field" type="file" id="file field" size="40" maxlength="4">
    <br>
    <br>
    <input type="submit" name="Upload" id="Upload" value="Upload">
    </form>
    </body>
    </html>



Note

Must insert the maxlength="your size" when it is required to introduce restrictions of some kind upon the user e.g. file size to be uploaded.

    Browser view

 

comments powered by Disqus