Push Buttons

Okay so, presumably, you know how to populate your web form with various user input components like text fields, checkboxes, radio buttons and dropdown menus. All that remains now is to provide a means to submit the form. You may also want to offer the option to upload a file or reset the form back to its original state in case the user makes a mistake and wishes to start over. These actions are all accomplished by clicking on a button and you create buttons by using either the input element or the button element.

input element buttons

The input element with the type attribute is used to create various button types. The value attribute may be used with the Submit, Reset and Button type buttons to create the text written on the button. In the absence of the value attribute, the default text for the button type is used. Remember that the input element only requires the <input> start tag (end tag is omitted).

All the input element button types are outlined below:

• Submit ~ Clicking on the Submit button type will call up the form script to process the contents of the form. It is created by using the input element with the type="submit" attribute-value pair.
  
  Example:
  
  
  
  
  SOURCE CODE
  
  <input type="submit" value="Submit Information">
  
  
  
  
  
• Reset ~ Clicking on the Reset button type will reset all user input components in the form (i.e. text fields, checkboxes, radio buttons and dropdown menus) back to their default values. The reset button is created by using the input element with the type="reset" attribute-value pair.
  
  Example:
  
  
  
  
  SOURCE CODE
  
  <input type="reset" value="Reset form">
  
  
  
  
  
• File ~ Clicking on the File button type will permit the user to select a file on his computer to upload when the form is submitted. The File button type is created by using the input element with the type="file" attribute-value pair.
  
  Example:
  
  
  
  
  SOURCE CODE
  
  <input type="file">
  
  
  
  Note that the value attribute for the File button type applies to the initial file name instead of the button text. The button text in this instance is defined by the browser displaying the web page. Internet Explorer and Mozilla will display "Browse...". Opera will display "Choose".
  
  
  
• Image ~ This button type creates a graphical submit button. Clicking on it will call up the form script to process the contents of the form. It is created by using the input element with the type="image" attribute-value pair. The src="graphic file name" attribute-value pair specifies the graphic to be used where graphic file name equals the file name of the image you wish to use to create the button. (See Graphics 1 - The Essentials for more information about using graphics on web pages.) The value attribute is inapplicable.
  
  Example:
  
  
  
  
  SOURCE CODE
  
  <input type="image" src="button.jpg">
  
  
  
  
  
• Button ~ This button type creates a generic button which doesn't do anything by default. This is the kind of button to use when you don't want to actually create a web form but you want to create a button that users can click on to trigger some sort of action. It is typically used with the onclick event handler to activate a javascript.
  
  Example:
  
  
  
  
  SOURCE CODE
  
  <input type="button" value="Open new window" onclick="window.open('test.htm','test');">
  
  
  
  

button element buttons

You can use the button element instead of the input element to exercise much more control over how your button looks. The key differences between using the input element and the button element to create buttons are:

• The button element may be used to create the submit, reset and button type buttons only.
• The button element requires both start and end tags, e.g. <button>...</button>
• The button element may actually contain other HTML elements offering you many more options on how to format your button. This includes bold, italicised, colored and resized text, images, tables and more.

Here are some examples:

Submit Info




Reset All Form
Components

Open a new window

*   *   *

Now let's imagine that you want alot of input from your user (e.g. tell me your life story). So you slapped together a form and then took a look at it and realized that what you have is a virtual morass of text fields, radio buttons, checkboxes, etcetera, that is most likely to send your user running out of the room screaming. What to do?

Well, as mentioned earlier, you can always wrap your user input components in other HTML elements to keep the appearance of your web form down to a dull roar. Tables are especially useful in this situation. However there are some special presentational elements that can be used in web forms that might be better suited to the occasion. To learn about these and to see an example of an advanced web form, continue on to Layout and Presentation...