Actual Buttons
The code
HTML
<form action="someScript" method="post">
<fieldset>
<legend>Full Name</legend>
<label for="firstname">Firstname</label>
<input type="text" class="text" name="firstname" value="Jeffrey">
<label for="lastname">Lastname</label>
<input type="text" class="text" name="lastname" value="Brown">
<button name="action" value="send" type="submit">Send</button>
</fieldset>
</form>
The button
The button tag has the same purpose, function, and default look to it as using <input type="submit"> However, the button tag brings some additional styling elements to it. Like using pictures instead of words; that cannot be done as easily with <input type="submit">
Example
Creative Styling
The code
HTML
<form action="someScript" method="post">
<fieldset>
<legend>Comments</legend>
<label for="comments">Comments</label>
<textarea id="comments" name="comments"></textarea>
<button name="action" type="submit">
<img src="email-icon.jpg" height="50">
</button>
</fieldset>
</form>
CSS
none - there is no CSS used
Example
Safe Styling
Familiarity is a good thing. Keep that in mind when designing wildly elaborate submit buttons.
More Form Elements
- Text
- Boolean
- Multiple Choice
- Submitting
- Accessibility
- Client-side Validation