Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Often, you'll want to give your users plenty of room to say what they need to say. Maybe it's for a comment section, a contact form, or a review that they're filling out. Regardless, if you need to give your user the ability to type in multiline text of any length, you're going to use the Textarea field. So I have the join.htm file open from the 12_10 explorers directory. I'm going to scroll down to our last radio button. Hit Return to create a new line just below that. Here, instead of typing something in, we're going to go back to using labels to identify the form element with our checkboxes and our radio buttons.
Since those are individuals with their own labels, in order to identify the entire group's purpose, we had to use those singular paragraphs. But now we're back to just letting our label tag do that for us. So I'm going to go up to my Form objects. Textarea is one of those three options in the section just to the right of the form tag. So there is hidden fields, text fields and there is Textarea. So go ahead and click to place a Textarea field on the page. Now the ID for this one is going to be profile. The label for this one is going to be Profile Bio and in parentheses type in 'tell us a little about yourself.' So, labels don't have to be restricted to one or two words. You can really make them say whatever they need to say in order to be descriptive for their particular form element.
Now we're going to attach that label tag using the for attribute. The Tab Index is going to be 240. So we should be good there. I'm going to go ahead and click OK. There is our text input field. Now again, the layout of this form is pretty weak right now. The default layout of it is not really great. Any screen reader or any other type of user agent that won't be able to read our CSS, however, is going to be able to access these form elements just fine. Visually, we're going to be controlling them through CSS in just a little bit. So I'm not too concerned about the way it looks, at least not yet.
Now I'm going to go ahead and select the Textarea field, because here we have a few options that we can go ahead and set manually. First off, I want to make sure that the ID is profile and it is. Now here, we have a character width and a number of lines. Now character width can be set through HTML properties, but it can also be overridden by CSS. Number of lines is going to be the number of multiple lines that somebody can type and be visible at one time. But that can also be overridden through CSS by using the width property. So I'm just going to leave mine at the default, which in this case is 45 and 5.
But if you wanted to set that to an explicit value and not intend to overwrite that with CSS later, that would be fine. Notice that from the Type property, this text field is set to be a Multi-line. So in reality, you could set a normal input text field on the page, set it to Multi-line, and sort of change it into this Textarea. You can also give it an initial value. So if you wanted to type something, maybe a little bit more descriptive into the text field, so there was some default text already in there, you could go ahead and do this. Now typically, that's only really done if you have got a form that somebody is filling out to say update a blog post or something and you kind of needed some text already in there to sort of jump- start them. You're really not going to do that as a way of describing what they should type in to the form element, because that's what the label is for.
Plus, it gives your user the added work of highlighting that default text and then having to delete it. We don't really want to have to do that as well. So let's go ahead and save our file. We're almost done with our form. However, I want to turn your attention just briefly to the label and its relationship to the Textarea filed. Choosing where to place a label on text areas, that's usually a matter of personal style and personal choice. There are a couple of things that you need to take into consideration: readability, can users read it and visually does it have a relationship to the Textarea itself, usability, and how your previous text fields address their labels as well.
So, how you treat your text fields further up within your form matters here as well. Because of their width, most people expect the label to be above the Textarea. To avoid too much spacing, you could use a line break to separate the label and the Textarea or, as we will use in our form a little bit later on, you can use CSS to control the label and form element spacing.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.