Sunday, 30 June 2013

How to create Text Boxes in HTML Forms

For most form elements, the word INPUT is used to set up the element. Next, you type a space followed by the word TYPE. This tells the browser what type of form elements to draw on your page. If you want a text box, the TYPE to use is "Text":


<INPUT TYPE = "Text">


(Notice that there is no end tag for INPUT.)


Next, you add the attributes you want. There are quite a lot of attributes for text boxes. The three most common ones are Size, Value, and Name. Size refers to how long the text box is in pixels rather than the number of characters it can contain. It's a good idea to limit how many text characters can fit into your text box, and for this the Maxlength attribute is used:


<INPUT TYPE = "Text" Size = 20 Value = "" Name = "text1" Maxlength="15">


The Value attribute means the text that will be typed in your text box. You can set some default text, if you like:


<INPUT TYPE = "Text" Size = 20 Value = "Default Text Here" Name = "text1">


Whatever is between the two quote marks of VALUE is what you get back when the form is sent somewhere.


A Name attribute should be added so that you can refer to it in scripts. It distinguishes it from any other text box you may have on your form.


Some other text box attributes are:


Accesskey
Height
TabIndex
Width


Height and Width are self-explanatory. Accesskey refers to a keyboard shortcut you can add, while TabIndex is a number value and refers to where the cursor will end up when you press the Tab key on your keyboard. As an example, take a look at the following three text boxes:


<INPUT TYPE = "Text" TabIndex="2">
<INPUT TYPE = "Text" TabIndex="3">
<INPUT TYPE = "Text" TabIndex="1">


The third of the three text boxes above will be activated first when the tab key is pressed. Press the tab key again and the cursor will appear in the top text box, followed by the middle one. You can really annoy your visitors if you get the tab index wrong

No comments:

Post a Comment