HTML Textbox Code

This page contains HTML textbox code. Feel free to copy and paste the HTML textbox code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Basic HTML Textbox Code

To create an HTML textbox, you use the textarea tag and specify how many columns wide and how many rows high the textbox should be.

Here's an example:

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20"> This is a basic HTML textbox. It contains some really cool text. </textarea>	This is a basic HTML textbox. It contains some really cool text.

Textbox That Actually DOES Something

OK, the above code is all well and good. But, the texbox doesn't actually do anything (other than display text).

To make the textbox actually do something (well, something worthwhile), it needs to be submitted to an action page. This action page provides the programming logic to process the form data. In the example below, we nest the textarea within a form tag that specifies an action page using the action attribute.

Source Code	Result
<!-- Codes by PuStudy.Com --> <form action="https://www.PuStudy.Com/textboxes/thankyou.html"> <textarea rows="5" cols="20" name="textbox_message"> This is a basic textbox. You can enter text into the textbox, then click the "Submit" button. </textarea> <br /> <input type="submit" /> </form>	This is a basic textbox. You can enter text into the textbox, then click the "Submit" button.

Programming an action page can be quite complex and is outside the scope of this article. But if you want to create a textbox that allows the user to send a message to your email, check out this form to email script.

Readonly Textbox Code

Not all textboxes need to submit to an action page for processing. If you prefer, you can create a "read only" textbox.

With a read-only texbox, you can use your textbox to display text, but users won't be able to change the value. They can still submit the contents using a submit button, but they just can't change the value.

To make your HTML textbox read-only, add the readonly attribute (eg readonly="readonly").

Source Code	Result
<!-- Codes by PuStudy.Com --> <form action="https://www.PuStudy.Com/textboxes/thankyou.html"> <textarea rows="5" cols="20" name="textbox_message" readonly="readonly"> This is a readonly textbox. Try changing the value... </textarea> <br /> <input type="submit" /> </form>	This is a readonly textbox. Try changing the value...

Disabled Textbox Code

You can also create a disabled textbox. A disabled textbox will prevent the user from selecting any value in the textbox, and its value won't be submitted when the form is submitted.

To disable your HTML textbox, add the disabled attribute (eg disabled="disabled").

Source Code	Result
<!-- Codes by PuStudy.Com --> <form action="https://www.PuStudy.Com/textboxes/thankyou.html"> <textarea rows="5" cols="20" name="textbox_message" disabled="disabled"> This is a disabled textbox. Try selecting the value. Also, try submitting the form... </textarea> <br /> <input type="submit" /> </form>	This is a disabled textbox. Try selecting the value. Also, try submitting the form...

HTML Textbox Titles

You can add titles to your textboxes. Titles are like little tool tips that appear when the user hovers over the textbox.

To add a title to your textbox, add the title attribute (eg title="Type your message here...").

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" name="textbox_message" disabled="disabled" title="This textbox is disabled - it's here, purely to display text. In this case, we don't really need a submit button, do we...?"> This is a disabled textbox. Try selecting the value. Also, try submitting the form... </textarea>	This is a disabled textbox. Try selecting the value. Also, try submitting the form...

More Textbox Codes

You can do much more with textboxes. Below are links to pages that provide HTML code for different effects you can do with textboxes: