Text
The code
HTML
<form action="someScript" method="post">
<fieldset>
<legend>Personal Information </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">
<label for="course">Course</label>
<input type="text" class="text" name="course" value="CS-10" disabled="disabled">
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
The type attribute
Identifies that this input tag is to be rendered as a single line of text.
The name attribute
Identifies this field individually from all other fields, should be a sensical name for the field. If asking the user for their firstname then name the field firstname This is used by a script to pull data from this specific field. So if you are asking the user for their first name then you should probably name the field "firstname". This makes much more sense than "F1" for field one. This attribute is available in all form elements.
The value attribute
Allows the web designer to enter default text. You can do this in order to tell the user what to do or give examples of valid types of data to enter.
The disabled attribute
This attribute prevents the user from entering data into this field. You can show the user data entered into it but they cannot edit it.
Example
Creative Styling
The code
HTML
<form action="someScript" method="post">
<fieldset>
<input type="text" class="text" name="search" value="Search for it">
<input type="submit" value="GO">
</fieldset>
</form>
CSS
input.search{
margin:0.5em 0;
border:none;
border-bottom:5px solid #bbb;
width:300px;
padding:5px 5px 5px 20px;
background:#FFF url(/2008/assets/docs/pres/session12/form/magnifier.png) 2px center no-repeat;
}
input.search:focus{
border:none;
border-bottom:5px solid #666;
}
Example
More Form Elements
- Text
- Boolean
- Multiple Choice
- Submitting
- Accessibility
- Client-side Validation