Label Textbox

Lesson 4: Labels, Textboxes & Input Tips

S M L XL FS | Slo Reg Fast 2x | Bookmark

In this lesson, we will walk through how to add and use a label and a text box in your program. You will learn the purpose of labels for displaying information, how to make their background transparent, and how to resize them. We will also discuss adding a text box, setting its properties, and giving it a meaningful name. Finally, I will show you how to use the value from the text box to display a personalized message in a message box, covering how to concatenate text so your app greets users by name.

Navigation

Prev: Lesson 03
Next: Lesson 05

Keywords

, Visual Basic text box, Visual Basic label, concatenate strings Visual Basic, message box user input, form controls Visual Basic, change label properties, name text box, ampersand concatenate, transparent label background, form design Visual Basic

Subscribe to Label Textbox
Get notifications when this page is updated

Intro

Transcript

In this class, we're going to learn how to make our program a little more functional with some new controls. Specifically, we're going to learn about text boxes and labels.

Here we are back in our Good Old Little program. Let's now add some additional controls to this program. Let's add a label and a text box.

A label is just used for displaying some information on your form. You can put words in there, numbers, whatever kind of text you want to have. A text box is used to actually store data. Let's see how these work.

First, let's move this Click Me button down a little bit. I'm going to click on it, hold my mouse button down, and drag it down. Let's put it right about here. Now I want to grab a label. Here are the labels right there. This little A, click on it. Then come over here under your form and then click and drag out a box. Not too big, maybe about that big. Let it go.

Now we have an object that says Label1. Over here in the properties for Label1, let's come down and change the caption so that it says "Enter your name:" and then a colon. That's basically just a message you want to give to the user - enter your name.

Now notice how the background of the label is gray. That is because it is specified here. Now we could change the back color of this label to match the background color of the form, but then if I change the form again, I've got to change the label too. So an easier thing is to change it from opaque to transparent.

Notice how that happened. The BackStyle, we changed it from opaque to transparent. Now the background of the label is transparent, so if I change the color of my form again, I do not have to keep changing all of my labels.

Now my label is a little big, so I'm going to grab this little box on the bottom and shrink it up just a little bit. There we go. Make it a little bit smaller. And let's also resize it this way just a bit. It's a bit wide. There we go. Now our label is sitting nice here in the corner.

Let's put a box over here, a text box, so that the user can type in their name. Now right over here on our toolbox, this little AB, that's a text box. Click on that. And then come over here and click and drag a box out on our form. About that high. And there we are. There is a text box.

Now text boxes have a property called Text. If you look in the properties list for your text box, by default this one says Text1. I'm going to highlight this Text1 and delete it. I'm going to hit delete on the keyboard. That way my text box will start blank.

Also, let's scroll up to the very top of this list. While we're at it, let's change the name of the box so that instead of saying Text1, let's say it says YourName. Now this is the actual name of the box itself. The box, the object itself, is now called YourName. It is not called text anymore. It is called YourName.

All right, there we go.

Now it's important that you do not put any spaces in here. It is going to be YourName, all one word. I capitalize "Your" and I capitalize the N in "Name." That is just a Rick thing. That is one of my personal preferences. But again, it makes your objects easier to read if you capitalize the beginning of each word in the name of your object. In this case, YourName.

So let's see what we have so far. Let's go ahead up here and click on the Start button. And there we go. Here's our program. Notice how we have a label, "Enter your name," a text box, and I can click in this text box and type in my name. Then I can click on the Click Me button if I want to, and it still says "Hello World."

Now, wouldn't it be nice if that box could say "Hello Richard" instead of "Hello World?" Let's see if we can do that. First, let's see if we can get a Message Box to just say my name. Just say "Richard." Let's try that.

Let's click on OK here. And let's close our program, and that will put us back in our Visual Basic editor. Now the name of this box right here is YourName. That is the name of the box. So instead of having the Message Box print "Hello World" on the screen, I want to have it print whatever is in the YourName box. Let's see how we do that.

Let's double-click on our Click Me button. Now we will open up our code window. Now right here, it says "Hello World." Let's change "Hello World" so it says YourName. So we're going to Message Box YourName now. Let's see if we can get what we want.

Let's come up here and click on the Run button. OK, here we are. I will type in my name. Now let's hit Click Me. Now it says "YourName" in it. Why is that? It's printing the actual word "YourName."

Let's take another look at our code. Let's click on OK. Let's close this. Our code says "YourName" inside of quotes. Oh, wait a minute. That is what's happening. The Message Box command is taking the word "YourName." If it is inside of quotes, it is actually printing "YourName" in the box.

If we get rid of the quotes, let's come over here and get rid of the quotes. Now what will happen is Message Box will now print the value that is in the YourName box. Let's see how that works. Let's come up here again and click on the Start button.

Once again, here's my program. I will type in Richard. I will hit the Click Me button. Oh, there we go. Now the Message Box command is message boxing YourName. What is YourName equal to right now? It's equal to Richard.

That is how we can use the Message Box command in a command button to display information on the screen. Whatever information the user has typed in. Let's close this. Close that. There we go.

See? This is now a value. If it's inside of quotes, it is just going to print the word "YourName" in the box. But instead, it's going to send the value for YourName to the Message Box function.

Now, we're still only halfway there because if you recall, I want to have this button say "Hello, Richard," or "Hello, Joe," or whatever you type in to the YourName box. Here's how you do it.

Right in front of YourName, type in "Hello," close quotes, and then YourName. Let's see if this works. Now again, you can ignore that little yellow box that pops up. Let's go ahead and run our program.

What's going on here? Compile error: expected end of statement. Now I have no idea what's going on here. Compile error means that there is a syntax error in your program somewhere. A syntax error means essentially you didn't write your line of code correctly. Visual Basic has no idea what you want to do. The expected end of statement means that Visual Basic expected the statement to end after the word "Hello." Something's not quite right.

Now let's click on OK to close this error message. Notice how this is in red. Visual Basic finds any errors, any syntax errors in your code, it is going to highlight them in red.

Now what's happening here is I have got some text in a string of characters. A string is simply a fancy word for some text inside of quotes, and then YourName. But I need some way to put them together. Somehow we've got to put these guys together.

Well, here's a special command for you. Use the ampersand, that little guy. I'm just going to click down here to turn off that yellow window. I hate those little yellow bits.

All right, use the ampersand character, and that will put together "Hello" and YourName and then send them both to Message Box. Let's see how it works. Let's come up here now and click on the Run button.

I will type in my name, and I will click on the Click Me. There we go. Now it says "Hello Richard." It took the text "Hello" and concatenated - that's just a fancy word for putting two text strings together - it concatenated the word "Richard," the value from my box.

But notice there is no space between them. How do we get a space in there? Well, let's hit OK here and close our program, and let's just stick a little space right inside there. Remember, whatever you put inside those quotes gets put on the screen. In fact, if I want to put a comma in there, I can put a comma in there too.

Let's run it. Now I will type in Joe this time. Click Me. It says "Hello, Joe." And there is our space.

So in this lesson, we learned a lot. We learned how to put a label and a text box on the screen. We learned how to concatenate two text strings together.

So now our program is starting to get a little more functional.

Quiz

Q1. What is the main purpose of a label in a Visual Basic form?
A. To display information to the user
B. To store user input data
C. To execute code when clicked
D. To change the color of the form

Q2. What is a text box used for in a form?
A. Displaying static text
B. Accepting user input
C. Drawing shapes on the form
D. Running subroutines

Q3. If you want your label to always blend with the form's background, what property should you set?
A. BackStyle to Transparent
B. BackColor to Blue
C. Caption to Blank
D. FontSize to 10

Q4. Why might you want to change the name property of a text box to something like YourName?
A. To make the code easier to read and maintain
B. To make the text box display in bold
C. It is required in all Visual Basic programs
D. To change the background color

Q5. What happens if you set the Message Box content to "YourName" with quotation marks in your code?
A. The message box will display the text YourName
B. The message box will show an error
C. The message box will display the value typed in the text box
D. The message box will not appear at all

Q6. What do you need to do in order to join ("concatenate") the text "Hello" with the contents of the text box in your message box code?
A. Use an ampersand (&) between "Hello" and the text box value
B. Use a plus (+) sign
C. Use parentheses
D. Use a semicolon (;)

Q7. What will happen if you forget to put a space or comma between "Hello" and the name when concatenating the strings?
A. The greeting and the name will be stuck together without any space
B. The program will crash
C. The message box will not appear
D. Visual Basic will add a space automatically

Q8. Which of the following is a good practice when naming your text box controls?
A. Use meaningful names with no spaces (like YourName)
B. Use single letters only
C. Use spaces to separate words
D. Leave the default name as Text1

Q9. When you set the BackStyle property of a label to Transparent, what effect does this have?
A. The label background blends in with the form no matter the form color
B. The label disappears from the form
C. The label text turns transparent
D. The label cannot be moved

Q10. What is the definition of concatenation in programming?
A. Joining two or more strings together
B. Looping through a list of items
C. Converting numbers to text
D. Changing the color of text

Answers: 1-A; 2-B; 3-A; 4-A; 5-A; 6-A; 7-A; 8-A; 9-A; 10-A

DISCLAIMER: Quiz questions are AI generated. If you find any that are wrong, don't make sense, or aren't related to the video topic at hand, then please post a comment and let me know. Thanks.

Summary

Today's video from Access Learning Zone is all about making your programs more interactive by adding text boxes and labels. We're going to take our Good Old Little program and give it some new controls to improve usability.

To start, I'll move the existing button, the one labeled "Click Me," down a bit to make room for the new elements. Next, I add a label control to the form. Labels are meant for displaying information to the user, such as instructions or titles. I set the label's caption to "Enter your name:" with a colon at the end, which gives the user a clear prompt on what to do.

By default, labels have a gray background, which might not always look great, especially if you change the background color of your form later on. Instead of matching colors manually, I find it much easier to set the label's background as transparent. That way, the form's color always shows through behind the label, avoiding extra maintenance if you update design choices later.

After resizing the label so it fits nicely beside where the text box will go, I add in the text box control. Text boxes are used for storing input from the user. In the properties for the text box, I clear out the default text so the box starts empty, ready for the user to type in. I also update the name property of the text box to "YourName" (with no spaces), which makes it easier to identify and refer to in code. I prefer to capitalize the start of each word in control names, which makes my objects easier to read and manage.

At this point, when I run the program, I now see the label prompting for a name, a blank text box, and the Click Me button. When I type in my name and click the button, it still displays "Hello World" in the message box by default.

I want to adjust the program so it greets users by their actual input. First, I update the code behind the Click Me button to display whatever the user typed into the YourName text box. However, if I simply put "YourName" in quotes in the code, the message box ends up displaying the word "YourName" rather than the user's entry. To fix this, I remove the quotes, which tells the program to use the value stored in the YourName box.

Testing it again, I can now type in "Richard," hit the button, and see "Richard" appear in the message box. At this stage, the message simply displays the user's name. To make it say "Hello Richard" (or whichever name is typed), I modify the code to put the word "Hello" in front, but I run into a syntax error. The program complains, and I see the error highlighted in red.

This error happens because I need to link the text "Hello" with the user's entry. In Visual Basic, I use the ampersand character to concatenate, or join, text strings together. By placing an ampersand between "Hello" and the YourName value, I can combine them. Running the program again, I see it display "HelloRichard" without a space, so I add a comma and a space in the string ("Hello, ").

Now, when I test it and enter a name like "Joe," the message box says "Hello, Joe," just as it should.

Through this lesson, we've covered how to add and configure both labels and text boxes. We went over how to set their properties for the best user experience, and we learned how to combine text and values entered by the user to create custom messages.

You can find a complete video tutorial with step-by-step instructions on everything discussed here on my website at the link below. Live long and prosper, my friends.

Topic List

Moving controls on the form
Adding a label to the form
Editing the label caption property
Setting label background to transparent
Resizing the label control
Adding a text box to the form
Clearing default text from the text box
Renaming the text box control
Using proper naming conventions for controls
Running the form to test controls
Displaying text box value in a message box
Understanding string literals vs variable use
Concatenating strings in code with ampersand
Adding space and punctuation to concatenated strings
Displaying custom greeting with user input

Article

In this lesson, you will learn how to make your program more interactive by adding new controls such as labels and text boxes. A label is a control you add to your form to display information to the user. You can use it to show instructions, numbers, or any other text you want your user to see. A text box, on the other hand, allows the user to input data into the form.

Let us start by organizing our form. Begin by selecting your existing button, clicking and dragging it a bit further down the form so you will have room to add a label and a text box above it.

Now, add a label to your form. In your toolbox, look for the control that has an "A" icon. Click on it, then move over to your form and click and drag out a box. Once you have placed your label, you will see it appears with the default caption "Label1." Select the label, and in the properties window, change its Caption property to Enter your name: (do not forget the colon at the end). This will clarify to the user what information you expect.

By default, the label background may appear gray. If you want your label background to match the form and adapt in case you change your form's color later, you should set the BackStyle property of the label to Transparent. This way, the label's background blends in with your form and you do not have to update it each time you change the form's color.

Next, you may want to adjust the size of your label. To do this, click the label once to select it, then drag the handles on the sides or the bottom to resize it so that it fits the text snugly.

Now, let us add a text box for user input. In the toolbox, look for the control that has "ab" or "AB" on it, which is the text box tool. Click on it, then move to your form and drag to create a rectangular box next to your label. Once placed, you may notice that the default text inside the box is "Text1." Select the text box, go to the properties window, and clear out the Text property so that the box starts empty when your program runs.

It is a good idea to give the text box a meaningful name so you can refer to it easily in your code. Locate the Name property at the top of the properties window. Change the name from the default, such as Text1, to YourName (with no spaces). Many developers like to use capitalization to make their object names easier to read, so typing YourName with a capital Y and N is a good practice.

Now you have a label that instructs the user to enter their name, and a text box where they can type it in. If you run your program at this point, you can click in the text box and type your name, but nothing will happen yet when you click the button.

The next step is to make your button respond to the user input. Open the code window for your button by double-clicking on it. You will see code similar to:

Private Sub Command1_Click()
MsgBox "Hello World"
End Sub

The MsgBox command displays a message box when the button is clicked. Right now, it always says "Hello World." To show the contents of the text box instead, you need to reference the text box by its name. If you write:

MsgBox YourName

it will not work because Visual Basic needs to know what property of YourName you want. In this context, you should use YourName.Text to get what the user typed. Also, be sure not to put quotes around YourName, or else it will just show the text "YourName" in your message box instead of the user's input.

So, change your code to:

Private Sub Command1_Click()
MsgBox YourName.Text
End Sub

Save and run your program now. Type your name into the text box and click the button. The message box should display whatever you typed.

But what if you want the program to say "Hello, Richard" or "Hello, Joe" using the name the user typed? You need to join the text "Hello, " with the value from the text box. In programming, joining pieces of text together is called concatenation. In Visual Basic, you do this using the ampersand symbol (&).

Update your code to look like this:

Private Sub Command1_Click()
MsgBox "Hello, " & YourName.Text
End Sub

Make sure there is a space after the comma inside the quotes so that the greeting appears correctly. When you run the program now, if you type "Richard" in the box and click the button, the message box will say "Hello, Richard." If you type a different name, it will use that name.

If you see an error such as "Compile error: expected end of statement," check that you are using the ampersand to join the text and not simply writing the names next to each other. Also, confirm you are not using quotes around the variable name unless you intend to display the literal word instead of its value.

In this exercise, you have learned how to use labels to give instructions to users and text boxes to collect their input. You have also learned to write code that displays a message based on what the user types, including how to join different pieces of text using the ampersand for concatenation. With just these changes, your program becomes interactive and responds to what the user enters, making the application much more useful and dynamic.