Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.
Text Input Fields
The Text Input field allows visitors to type text directly into your Form. You can add a Text Input field to your form using a <input> tag. These are used in any situation you want to ask visitors to add text to the form, be it a name, a street address, an email address or whatever. The <input> tag requires a few attributes to work properly:
Let's write an input tag, step by step, to show how an input field is correctly coded.
The type="text" value tells the input tag to treat the information added into the field as text. It is written like this:
The name should always be something unique that identifies what the field is for. If you were gathering street addresses in this field, for example, you could give this field a name like "address" or "street_address". Add the name like this:
The value field allows you to pre-fill the displayed input field with some text. This is commonly used in fields asking for web url's. Webmasters will often pre-fill the 'http://' portion of the url since all url's have that. If you do not wish to pre-fill the field leave the value field blank:
The size attribute tells the form how many spaces wide the input field should be displayed as. Customize this size value to whatever width you want the field to be.
The maxlength attribute tells the field to limit the number of characters the visitor can add to the field. If you set the limit to 20 characters, as shown above, then only 20 characters can be typed in.
Now let's look at how the complete tag will appear on a webpage. Here is our complete code:
And here is how it will look on a webpage:
Note: The text in the text box is not affected by font tags or other HTML formatting codes, it is always displayed in the default browser font as shown above. (You can use CSS coding to alter the look and color of text in this field)Return to 'Form Samples' Proceed to 'Password Inputs'