Text Input Functionality
Input tags (specific to text inputs) have a few properties of interest. First, they have an internal padding so that the text won't be up against the sides of the form input border. They also have a width of 90%, so that they will be almost as wide as the page (try resizing your window to see the effect). They have a light grey background so that Firefox users can see the bottom and right edges of the input area.
Text inputs are used in two ways. One, as regular text inputs on the right of a label, or two, within a search, where the text input is on the left and the search button is on the right. See the two examples below:
Relevant HTML
<div class="formRow"> <div class="formLabel"> <label>Input</label> </div> <div class="formElement"> <input name="input" value="" /> </div> </div> <div class="formRow"> <div class="formLabel"> <input name="search" type="text" /> </div> <div class="formElement"> <button type="submit">Search</button> </div> </div>
Relevant CSS
/* Note: This CSS was edited to only show relevant parts. */
.formElement input, .formLabel input
{
padding:0.2em;
width:90%;
background:#f9f9f9;
}