AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
Print This Page

You are here : Home - Web Development - HTML - Forms - Text Input

Text Input



Allowing the visitor to enter information is achieved with text boxes.

TEXT
<input type="text" name="" size="" maxlength="" value="">

This allows 1 line of text to be entered by the user. Ideal for names and email addresses etc.

  • name : name="" used to give the field an appropriate name - for example if the field is to hold the visitors email address then you could use name="email address" - when the form is processed you get something like this in your email
    email address=whatever_was_entered
    so give your fields a useful name.

  • size : this specifies how many visible characters the box will hold - if more characters are entered than the physical space provided the text will scroll. Just enter the value for example size="15"

  • maxlength : this allows you to limit the amount of characters that can be entered into the box. for example maxlength="2" would be useful for someone's age. Try this (allows only 2 characters)
    Age :

    here's the code for it
    Age : <input type="text" name="Age" size="3" maxlength="2">

  • value : Optional, if you don't provide a value attribute the default is empty. If you want to have some text in as default then use value="some text"

TEXTAREA

So, what if you want the visitor to provide information that requires more than 1 line of text. This is done using a textarea like this.


<textarea cols="" rows="" name=""></textarea>
  • cols : this specifies how many characters wide the box will be. Just enter the value for example cols="15"

  • rows : this specifies how many visible rows the box display - if more rows are entered than the physical space provided the text will scroll to a new line. Just enter the value for example rows="5"

  • name : name="" used to give the field an appropriate name - for example if the field is to hold the visitors comments then you could use name="User Comments" - when the form is processed you get something like this in your email
    User Comments=whatever_was_entered
    so give your fields a useful name.

Next we'll look at the user options available


how forms work | the form tag | text input
user options | hidden and submit | forms in tables

Why not discuss this article in our forum?
Other related guides : accessible web forms | webpage basics | lists







Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]