Text fields

Understanding the Web

How to create a website

Parts of an HTML page

Structure of an HTML Document

Creating and viewing a WEB PAGE

Text formatting in HTML

Organising information using lists

Structure content with tables

Data collection with forms

Navigation with links

Displaying images

Text fields are single-line fields into which users type information.

Here’s how to create a single-line text field:

1. Define the input type as a text field by using the <input /> element with the type attribute set to text.

<input type="text">

2. Then use the name attribute to give the input field a name.

<input type="text" name="firstname">

The user supplies the value when she types in the field.

The following markup creates two text input fields, one for a first name and one for a last name:

<html>
  <head> </head>
  <body>
    <form action="bin/guestbook.php" method="post">
      First Name: <input type="text" name="firstname" /><br /><br />
      Last Name: <input type="text" name="lastname" />
    </form>
  </body>
</html>

First Name:

Last Name:

You can control the size of a text field with these attributes:

size: The length (in characters) of the text field
maxlength: The maximum number of characters the user can type into the field

The following markup creates a form that sets both fields to a size of 30 (characters long) and a maxlength of 25 (characters long). Even though each field will be about 30 characters long, a user can type only 25 characters into each field, as shown in Figure 7-5. (Setting the size attribute greater than maxlength ensures that the text field will always have some white

space between the user input and the end of the field box on display; you don’t have to do this yourself, but we find it visually pleasing.)

<html lang="en">
  <head> </head>
  <body>
    <form method="post">
      <ul>
        <li>
          First Name:
          <input type="text" name="firstname" size="30" maxlength="25" />
        </li>
        <li>
          Last Name:
          <input type="”text”" name="”lastname”" size="”30”" maxlength="25" />
        </li>
      </ul>
    </form>
  </body>
</html>

First Name:
Last Name: