Forms: text input - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

50
Forms: text input

Here’s a form that’s limited to one single-line text field. It’s useless, because it doesn’t include a Submit button. We’ll add that later.

This is the HTML.

<form action="send-email.php" method="post">
Last name:
<input type="text" name="surname" size="25" maxlength="40
</form>

It begins with some plain text, Last name: It doesn’t have to be placed to the left of the field. It could be above, to the right, or even below the field.

The input tag has four parts:

1. type="text". This tells the browser to display a single-line box in which the user can enter text.

2. name="surname". The name can be almost anything you like, but don’t use spaces in it. The name tells the program that’s processing the data what to call the information that the user enters in that field.

3. size="25". This tells the browser how wide to make the box. When you write size="25" you’re telling the browser to make the box roughly 25 characters wide. If the user types more than 25 characters, the line will scroll horizontally. Specifying the size is optional. If you don’t specify it, the browser will make a text box 20 characters wide by default.

4. maxlength="40". This tells the browser to put a limit on the number of characters that can be typed into this field. If there’s scrolling, the scrolling will stop at this limit. Specifying the maximum length is optional. If you don’t specify it, the box will accept any number of characters and will scroll as far as it needs to in order to accommodate all the characters.

A password field is like a text input field, except that the characters that the user enters are disguised as asterisks or circles in the field. You code a password field the same way you code a text input field, except that you replace the world "text" with the word "password".

<input type="password" name="pass" size="20" maxlength="40">

All of the individual parts of a form—the one-line text box that you just learned to create and all the rest that you’re about to learn—are called controls.

Code a form with a single text input. Don’t bother with the action or method. Specify name, size, and maxlength. Save the file. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-50-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/50.html