Buttons are useful in forms to submit it, reset it or to execute custom functions. They can be inserted using the HTML input tag (submit, reset and image) or the HTML button tag (content buttons).
This type of buttons automatically submits the form when pressed. Are inserted using the HTML input tag with the "submit" value for the "type" attribute.
This type of buttons resets the controls of a form to their initial value when pressed. Are inserted using the HTML input tag with the "reset" value for the "type" attribute.
Image buttons work exactly as submit buttons with the only difference that image buttons are visually rendered with the image pointed in the "src" attribute. These buttons also send the coordinates where the click occurred (e.g., for an image button named "button1" the coordinates will be sent with the form as "button1.x" and "button1.y"). Are inserted using the HTML input tag with the "image" value for the "type" attribute.
Content buttons may be used as a submit or reset buttons or may have no preestablished action (depending on the value of the "type" attribute), but they allow authors to insert content inside of them. This means that a piece of HTML code can be displayed inside of the button (links, paragraphs, bold text, images, etc.).
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p><button type="button"> The <b>HTML button tag</b><br /> allows content.<br /> </button></p> </form> |
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 processed 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.
| Code | View |
|---|---|
|
<form method="post" action="handler.php" enctype="multipart/form-data"> <p>Input file: <input name="image" type="file" /></p> </form> |
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 action is passed to its associated control), but they will certainly make a lot of 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 tag and are associated to controls through the "for" attribute. To do so, the value of the "for" attribute from the HTML label tag must match the value of the "id" attribute from the control.
| Code | View |
|---|---|
|
<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> |
All elements in a form can also be grouped thematically with the HTML fieldset tag. This tag 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 tag that must be defined right after the fieldset start tag, and give a descriptive title for the group of controls.
| Code | View |
|---|---|
|
<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> |
The use of this grouping is wide and depends on each specific form, but can be very helpful for visitors when filling large forms (specially for non-visual user agents).