• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Forms / HTML Text and Textarea Form Fields

HTML Text and Textarea Form Fields

6 November 2001 / 3 Comments

In this tutorial you explore two HTML form fields that allow visitors to enter text: text fields, suitable for short, single-line text, and textarea fields, which are suited to longer paragraphs of text.

Find out how to create forms in our HTML forms tutorial.

Text fields

Possibly the most widely used form field is the text field. This is a simple box into which the user can enter small amounts of text data, such as their name or email address. It takes the format:


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

The name attribute is the name of the text field (for example, "email_address" or "age"). The value attribute allows you to provide a default value that will appear in the box (the user can change the value if they want). This is optional – to leave the field blank, use value="" or miss out the value attribute altogether.

The size attribute specifies the physical size (width) of the text field, in characters. You can miss out this value in which case the browser’s default field size will be used.

Finally, the maxlength attribute allows you to limit the amount of characters the user can enter. If you leave this value out, then the user can enter as much as they like.

Text field example:


Email Address: <input type="text" name="email_address"
value="" size="30" maxlength="50">

Email Address:

Textarea fields

If you need the user to input a large amount of text (more than a single line), use a textarea field. It takes the format:


<textarea name="xxxx" rows="xxxx" cols="xxxx" wrap="xxxx">
(default text here)
</textarea>

The name attribute is the name of the field (for example, "comments"). The rows attribute specifies the height of the textarea in characters, while the cols attribute specifies the width.

The wrap attribute controls how the text is wrapped when it reaches the right-hand edge of the textarea box. Possible values are:

off
The text will not wrap, and will be submitted exactly as it was entered by the user.
soft
The text as displayed in the textarea box will wrap, but it will be submitted exactly as it was entered by the user (i.e. with no wrapping).
hard
The text in the textarea box will wrap, and it will be submitted with line breaks inserted where the text wraps (i.e. exactly as it appears in the box).

Inside the <textarea></textarea> element, you can place some text that will be displayed in the textarea when the form loads. The user can then change or delete this text as appropriate.

Textarea field example:


Please enter your comments below:<br>
<textarea name="comments" rows="5" cols="50" wrap="soft">
I love this site!
</textarea>

Please enter your comments below:

Other types of form fields

Now that you understand text and textarea fields, find out about:

  • Checkboxes, radio buttons and select fields
  • Hidden fields, password fields and file upload fields
  • Form buttons

Filed Under: HTML Forms Tagged With: cols, form, hard, html, input, maxlength, off, rows, size, soft, text area, text box, text fields, text(), textarea, wrap()

Reader Interactions

Comments

  1. giwababatunde says

    20 April 2010 at 12:38 pm

    am a learner, can anybody there help to write simple registration and login form?

    thanks

    Reply
  2. matt says

    24 April 2010 at 11:00 pm

    Hey giwababatunde,

    Can you be more specific? What form fields do you need in the form? Do you have a server-side script (or scripting language) in mind?

    Reply
  3. ketuaslot says

    2 January 2023 at 3:37 am

    Hey there just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Internet explorer.
    I’m not sure if this is a formatting issue or something to do with browser compatibility but
    I thought I’d post to let you know. The style and design look great
    though! Hope you get the problem solved soon. Many thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits