Submit
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">
<input type="submit" class="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
Example
Creative Styling
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">
<input type="submit" class="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
CSS
input.submit{
border:1px solid #333;
background:#666;
color:#FFF;
padding:10px;
font-size:30px;
}
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