• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Forms / HTML Forms – Hidden, Password and File Upload Fields

HTML Forms – Hidden, Password and File Upload Fields

27 November 2001 / 3 Comments

This tutorial explores three special types of HTML form input fields:

  • hidden fields, for passing information without displaying it to the visitor
  • password fields that allow the visitor to enter sensitive information, and
  • file upload fields that allow visitors to upload files from their hard disk to your Web server.

Find out how to create HTML forms in our HTML forms tutorial.

Hidden fields

Hidden fields are form fields that are not actually displayed to the user. The main purpose of hidden fields is to pass information to the server script that the user does not need to view or change. For example, if you were building a shopping cart, you might use a hidden field to track the cart ID.

The format of a hidden form field is very simple:


<input type="hidden" name="xxxx" value="xxxx">

The field name with value value will be passed to the server like any other field when the form is submitted, but the field will not be visible to the user (unless they view source, of course!).

Example of a hidden input field:


<input type="hidden" name="cart_id" value="1234">

Password fields

If you need your user to enter sensitive information such as a password, you can use the password field type. This will allow the user to enter text just like a regular text field, but the characters will be displayed as asterisks to prevent the text from being viewed on the screen.

The password field takes the format:


<input type="password" name="xxxx" size="xxxx">

The name attribute is the name of the field (for example, "password"). The size attribute specifies the physical size (width) of the form field, in characters. You can miss out this value in which case the browser’s default field size will be used.

(You can also supply a default value using the value attribute, if you wish, although this is rarely needed, for obvious reasons!)

Example of a password input field:


Password: <input type="password" name="password" size="20">

Password:

File upload fields

Nearly all modern browsers allow files from the user’s hard drive to be uploaded via an HTML form to the server. For this to work, the (CGI, ASP, PHP, etc) script on the server needs to be written to handle the file data. Explaining these scripts is outside the scope of this tutorial. We’ll just look at how to create the file upload form field.

The file upload field consists of a filename box, much like a regular text box, and a Browse… button, that the user can use to browse to the file to upload on their hard drive. The file upload field takes the format:


<input type="file" name="xxxx" size="xxxx"
maxlength="xxxx" accept="xxxx">

The name attribute is the name of the upload field (for example, "photo"). The size attribute specifies the physical size (width) of the filename field, in characters. You can miss out this value in which case the browser’s default field size will be used.

The maxlength attribute allows you to specify the maximum length of the filename field, in characters. If you leave this value out, then the filename can be any length.

Finally, the accept attribute allows you to specify exactly what types of files may be uploaded. To specify the file types, use MIME types (e.g. "application/octet-stream", "image/gif") separated by commas. Note that this only works on some browsers (other browsers will just allow the user to upload any type of file regardless of this attribute!).

Example of a file input field:


Photo to upload:
<input type="file" name="photo" accept="image/*">

Photo to upload:

Other types of form fields

Now that you’ve explored hidden fields, password fields and file upload fields, find out about:

  • Text and textarea fields
  • Checkboxes, radio buttons and select menus
  • Form buttons

Filed Under: HTML Forms Tagged With: accept, browse, encoding, form fields, html input, image, input file, input hidden, input password, input type, maxlength, photo, send, uploading

Reader Interactions

Comments

  1. Nicole107 says

    8 January 2017 at 3:42 pm

    Hi all,

    I’m obviously not an expert. Can anyone please help me with html code to make a simple password field? I need it to redirect to one page if the password is correct and also redirect to a different page if the password is incorrect.

    It doesn’t have to be a very secure login. It’s for a simple website form to submit an answer that is either right or wrong.

    The following code is what I’ve been playing with and the redirect for the false password doesn’t work. Also, it’s a button with a popup prompt and I would actually prefer a text field to submit on keying enter.

    If anyone can help me with either problem, I would so appreciate any help.

    <html>
    <HEAD>
    <SCRIPT LANGUAGE=”JavaScript”>
    function LogIn(){
    password=”mypassword”;
    password=prompt(“Enter password:”,””);
    password=password.toLowerCase();
    if (password==”mypassword”) {
    loggedin=true;
    window.location=”http://MyURLredirectRightPWD.html”;
    }
    if (password==false) {
    loggedin=false;
    window.location=”http://MyURLredirectWrongPWD.html”;
    }
    }
    </SCRIPT>
    <BODY>
    <center>
    <form><input type=button value=”Enter Password” onClick=”LogIn()”></form>
    </center>
    </body>
    </html>

    Reply
  2. chrishirst says

    9 January 2017 at 6:34 am

    “The following code is what I’ve been playing with and the redirect for the false password doesn’t work. ”

    It can’t!

    Redirecting on an incorrect password entry HAS to be done by server side code, because once the submit button is pressed the javascript will stop running.

    Reply
  3. ifouraakash says

    23 January 2017 at 4:34 am

    Hi,
    Yes I agree with chrishist post because the condition that you are applying is under javascript. Thus it should be done either server side or in the body section

    You can also use the php code and write the logic inside the php

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits