Location: Home > HTML Tutorials > Forms in HTML > Page 4

Forms in HTML (page 4)

Table of contents

Pages:<1 2 34

Input elements

File input

File inputs can be used to upload files to the server. The control shows a text box where the user must specify the location of the file (that will be attached locally by the browser) that will be sent to the server. This way authors can request visitors to send files through the page. The control usually shows a button to pick up the file visually.

Note that for forms with file uploads you must specify the value "multipart/form-data" in the "enctype" attribute of the HTML form tag, otherwise the file won't be uploaded.

Code

<form method="post" action="handler.php" enctype="multipart/form-data">
Input file: <input name="image" type="file" />
</form>

View

Input file:

Labeling elements

Element's labels can make your page look better and add a small functionality for visual user agents (when a visitor clicks the label the focus is passed to its associated control), but they will certainly make a lot more sense for people with disabilities or non-visual browsers. A label establishes a relationship between a control and a piece of text (that's supposed to set a "title" for the control).

Labels can be inserted using the HTML label element and are associated to controls through the "for" attribute, that should match the value of the "id" attribute in the control.

Code

<form method="post" action="handler.php"><div>
<label for="idfname">First name:</label> <input type="text" id="idfname" name="fname" /><br />
<label for="idlname">Last name:</label> <input type="text" id="idlname" name="lname" /><br /><br />
Gender:<br /><input type="radio" id="idmale" name="gender" /><label for="idmale">Male</label><br />
<input type="radio" id="idfemale" name="gender" /><label for="idfemale">Female</label>
</div></form>

View

First name:
Last name:

Gender:
Male
Female

You can test, in the previous example, how the control takes focus when you click its label.

Grouping elements

All elements in a form can also be grouped thematically with the HTML fieldset element. This element contains a group of controls that are related to each other for some reason (e.g. personal information, work information, financial information, interests, etc.).

The caption for each fieldset can be set with the HTML legend element that must be defined right after the fieldset start tag, and give a descriptive title for the group of controls.

Code

<form method="post" action="handler.php">
<fieldset>
<legend>Personal information</legend>
<label for="lfname">First name</label>: <input id="lfname" type="text" name="fname" /><br />
<label for="llname">Last name</label>: <input id="llname" type="text" name="lname" /><br />
<label for="lpaddress">Address</label>: <input id="lpaddress" type="text" name="paddress" /><br />
<label for="lpphone">Phone</label>: <input id="lpphone" type="text" name="pphone" />
</fieldset>
<fieldset>
<legend>Work information</legend>
<label for="lwaddress">Address</label>: <input id="lwaddress" type="text" name="waddress" /><br />
<label for="lwphone">Phone</label>: <input id="lwphone" type="text" name="wphone" />
</fieldset>
</form>

View

Personal informationFirst name:
Last name:
Address:
Phone:

Work informationAddress:
Phone:

The use of controls grouping is wide and depends on each specific form, but can be very helpful for visitors when filling large forms (specially in non-visual user agents).

Pages:<1 2 34

Next tutorial: XHTML code