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.
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">
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/*">
Other types of form fields
Now that you’ve explored hidden fields, password fields and file upload fields, find out about:
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>
“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.
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