Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

Creating Form Controls with the <input> Tag 325

12


Creating Text Controls


Text controls enable you to gather information from a user in small quantities. This con-
trol type creates a single-line text input field in which users can type information, such
as their name or a search term. This is the default input type and is the fallback type if a
browser does not recognize the type you chose.


To create a text input field, create an input element and choose text as the value for the
type attribute. Make sure to give your control an id so that the server script will be able
to process the value:


Input ▼




Figure 12.6 shows this text control, which tells the user what to type in.


Output ▼


You can modify the appearance of text controls using the size attribute. Entering a num-
ber sets the width of the text control in characters:



The size attribute will be overridden by any CSS widths set on the element. It is an
approximate length and does not affect the number of characters the user can enter. To
limit the number of characters a user can enter, add the maxlength attribute to the text
control. This doesn’t affect the appearance of the field; it just prevents the user from
entering more characters than specified by this attribute. If users attempt to enter more
text, their web browsers will stop accepting input for that particular control:



FIGURE 12.6
A text entry field.

Free download pdf