Buttons:

Buttons are common interactive features in web design, and can provide graphic interest as well as functionality to your links and fields.

The File Upload Element

The file upload element (type="file"), is used to allow a user to;

  1. Open a navigation window
  2. Select a file
  3. Upload it to the URL specified in the “action=""” attribute.

Most of the visual appearance for this type of box, as well as the subsequent ‘file browser’ will be dictated by the users browser & OS

NOTE: With this element, due to the nature of the data, you need to set the “method” attribute to “post” (method="post").

The Submit Button

The submit button is used to send a form to a server. This is the one form type that does not require a name attribute.

The value="" attribute is used to specify the text that appears on the button. It is good practice to always specify this, as opposed to allowing the browser to use its default “submit query” text.

The appearance of submit buttons is dictated by individual browsers. However, these can be styled using CSS.

The Image Button

You can use an image for a submit button. Use the type="image".

NOTE: This element will then need to follow good image use practice. This means it should include the alt, width, and height attributes following the src attribute.

The Button Element

The button element (<button>...</button>) was introduced to allow users more control over how their buttons appear.

This element also allows other elements to appear inside the button (between the tags). This means you can combine text and images between the button tags.

The Hidden Input Form Element

There is a hidden input element (type="hidden") for form control. These form controls are not shown on the page (although you can see them if you use the browsers “View Source” option).

This input type allows web page authors/developers to add values to forms that users cannot see, but which will be sent along with the form to the server.

For example, a web page author might use a hidden field to indicate which page the user was on when they submitted a form.

HTML
<form action="http://www.example.com/add.php">
    <input type="hidden" name="bookmark" value="lyrics" />
</form>

{ TODO: }

Read pages 159-162 of Chapter 07 in Duckett.


Previous section:
Next section: