Copyright

Adding Text Fields for User Input to HTML Forms

Instructor: Ioannis Kornarakis

Ioannis has taught college Web Design and Programming and has a Master's Degree in Informatics and Multimedia

In nearly every website out there, there is a designated space for users to type text into, whether it is their name, their e-mail address or the name of that dog breed they are looking for cute pictures of. In this lesson we will learn how to add text fields to an HTML form for user input.

User Input

You have started working on your first web page. You are already on the path to fame and success, congratulations! You've got the big idea, you've got the will ... but you are in a bit of a pickle! You've got all these questions you want to ask your users: ''What is your name? What is your e-mail? What is your mother's maiden name? What is the meaning of life, the universe and everything?''

You have your HTML file, you have your form ready, but how do you add these neat white boxes that you can click on and type information into?


Html Text Field

These boxes are called text fields, and not to worry, they are very easy to add to your form.

In an HTML form, whenever you want the user's input on something, you use an <input/> tag. To turn this into a text field, all you have to do is set that input's type to ''text'' like this: <input type=''text''/>.

The code for the above example looks like this:

<form>
 Type your text here!</br>
 <input type=''text'' name=''testfield'' />
</form>

A couple of things to note: the text field does not come with any sort of label that indicates to the user what he should type in it, but you can add it yourself using simple text, an image or even other HTML tags. In the above example, simple text was used and a line-break tag </br> was added at the end of the line to make the text field appear under the text and not next to it.

The second thing to note, while not vital to our current lesson, is a good practice to get into as you continue learning to code HTML. Usually when you have the user input something on your web page, you will then want to do something with that input. We will not get into specifics right now, but you can imagine we would need some way to reference this specific text field, in case we have more of them. That's where the name=''testfield'' comes in handy. You can name your tag however you want but in most cases you would want a unique and recognizable name.

<input type=''text'' name=''testfield'' />

More About Input

Now, let's get into some interesting scenarios!

maxlength

Let's say you have a text field that is meant for a user's name. With your average user having an average length name, you have no issues. But would you really like to let Pablo Picasso write his full name in there?! Google it! You wouldn't! How would you then go about limiting the length of the text a user can type in a text field? Just as the type and name are attributes of an input tag we can give values to, there is also an attribute called maxlength. You can simply, inside an input tag, pass a number to maxlength, the number corresponding to the maximum number of characters you want to allow in that input text field.

That would give you something like this:

<input type=''text'' name=''testfield'' maxlength=12 />

password

Now let's say, that along with the user's name, you also want a text field for the user's password. But you don't remember seeing any password fields that showed what you were typing! They all show dots, or asterisks or something. Surely your users would not like it if anyone peeping over their shoulder could see their password as they were typing it. Thankfully, there is a special text field for passwords. Because it's so special, it has its own type, so instead of having <input type=''text''> in your code, this time you would have <input type=''password''>. And voila! You now have a text field that shows dots instead of letters.


HTML Password Field

Now no Peeping Tom will see that you are Bruce Wayne and that your password is actually ''I'm Batman!''

All together, the above form is created by the code below:

<form>
 Username:</br>
 <input type=''text'' name=''testfield'' maxlength=12 /></br>
 Password:</br>
 <input type=''password'' name=''pass'' /></br>
</form>

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support