HTML Tips - Form Elements for Uploading Files
(Page 5 of 5 )
Use the POST method in your form start tag if you want to upload files. The GET method is not used for uploading files. Use the attribute, enctype, with the value of "multipart/form-data". The value for the enctype attribute is called the Content Type. The element that will hold the file name is the Input element whose type is set to "file". So as a minimum, you should have the following:
<form action="http://server.com/cgi/handle" enctype="multipart/form-data" method="post">
<input type="file" name="files">
</form>
The action attribute gives the destination (form processing agent) of the form. The element <input type="file" name="files"> will produce a text box and the browse button on the web page for locating the file.
Grouping Names in the Select Element
The following image shows some countries in different continents in a Select element:
It is possible to group names inside a Select element as shown in the above diagram. You use the OPTGROUP to do this. The OPTGROUP element takes OPTION elements as its content. The following code was used to create the above Select element:
<LABEL for="Countries">Countries</LABEL>
<SELECT name="Countries" id="Countries">
<OPTION selected value="none">--- Select ---</OPTION>
<OPTGROUP label="Europe">
<OPTION value="Britain">Britain</OPTION>
<OPTION value="France">France</OPTION>
<OPTION value="Germany">Germany</OPTION>
</OPTGROUP>
<OPTGROUP label="South America">
<OPTION value="Argentina">Argentina</OPTION>
<OPTION value="Brazil">Brazil</OPTION>
<OPTION value="Peru">Peru</OPTION>
</OPTGROUP>
<OPTGROUP label="North America">
<OPTION value="U.S.A">U.S.A</OPTION>
<OPTION value="Canada">Canada</OPTION>
</OPTGROUP>
</SELECT>
Note: browsers may interpret the OPTGROUP element slightly different in each case.
These are tips I have gathered based on my experience and the experience of expert programmers. I have not addressed the problem of presentation (fonts, colors, margins, etc.) and making a web page interactive. These should be addressed under Cascading Style Sheets and Scripts (JavaScript) respectively.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 3 
