Creating input forms - HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 8: Creating input forms

In this chapter we will be learning how to create a few different types of input forms. There are a few steps involved in order to make them function the way you want. For example if you wanted to save the information that the user entered into a database. You would need to use a programming language like JavaScript. And that is something to look into after you learn HTML and CSS. But for this lesson we are just gonna be focusing on actually creating the forms and adding them to our web page. You can skip this chapter and come back to it later if you like because the coding that you will learn here is gonna be a lot more useful when you get into the more advanced stuff. But this is a good point for you to learn the creation of the actual visible form part of the process. And making the form function the way you want will come later.

One Line Text-Box And Submit Button

So we'll start with the text-box, (the input field that the user would enter some type of information into like an e-mail address, a password, and so on). Let's start creating our text-box. Right after the opening body tag <body> add this:

<form action="" method="">

<input type="text" name="">

</form>

·As you can see we have opening and closing form tags and an input element embedded in between them. Don't worry too much about these form tags and attributes that are in the opening tag. These form tags just tell the browser that this is a form and the attributes inside of the opening tag are something you'll learn when you get into JavaScript. It's what will specify the function that you want to perform and there are many different functions and things that you could do with JavaScript. So I strongly recommend taking a look at that after completing this book.

·<input type="text" name=""> This is our input element. It is the code that actually puts the text-box on our page. Without this there would be nothing displayed because the form element is basically just a container to hold our input elements. Again don't worry about the attributes for now. In this exercise we are just learning how to create the input field. There are many different attributes that can added to this element as well. But for this example since we want to create a text box we specified the input type as text. And this does not need a closing tag.

If you save and run this code you will get a text box right at the top of your page. This is the most common type of input field that you will see on web pages. Say if we wanted two one line text boxes for the user to put a username and password in. All we would have to do is add another input element under the first one like so:

<form action="" method="">

<input type="text" name="">

<input type="text" name="">

</form>

This would give us two boxes side by side on the same line. So to make it look a little better we'll add two line breaks in between. Add these line breaks to your form:

<form action="" method="">

<input type="text" name="">

<br/>

<br/>

<input type="text" name="">

</form>

Now when you run your page you'll see that it's starting to resemble a form that you probably have seen a million times. If you click inside one of the text boxes you will be able to add some text. Right now we don't have the code to do anything with the content and it wouldn't make sense to teach you that at this point. But you need to know how to actually make a form before you get into the programming part of it anyway. You can see that if you add a lot of text the box will scroll to the right only showing the amount of content that will fit in the default size text box. If you wanted to change length of your text box, It is really simple. You just add this attribute to your input element. Only add it to your first text box so you can see the difference between the two.

<input type="text" name="" size="40">

So now the first text box is 40 pixels in length and the second box is the default size. Let's add some labels to our form. One for the user to enter their username and one for them to enter their password. Put in this code and then we'll go over it: Note, I took out the size attribute that we added to the first text box.

<form action="" method="">

<label for="name">Username:</label>

<input type="text" id="name" name="">

<br/>

<br/>

<label for="password">Password:</label>

<input type="text" id="password" name="">

</form>

·We added quite a bit of code here. But at this point you should be pretty comfortable with what we did. We'll break down the code that we entered to create our label for the Username text-box. The Password label is set up in the exact same way.

·<label></label> These are the label element tags. This element has to be closed and we did that all on one line. We have a label element above our first text-box and one above our second text-box.

·for= This is our for attribute. It goes in our opening tag. This for= attribute is used in kind of the same way the name= attribute was used when we created our hyperlinks to jump to different parts of our page. Our for attribute will link up with another attribute.

·"name" This is our attribute value. And this is the value that will link to it's twin value. I know that value is kind of a weird name for this but that is the correct term used. It's basically just the name that you gave to your for attribute.

·>Username This is the text that will display for our label. It will appear to the left of the text-box that it is assigned to.

·</label> Then we close the label element.

·id="name" This is the attribute name and value we added to the text-box element that we wanted to assign the label to. And the value "name" is what ties this value to the label value. It has to match it's counterpart exactly to link to it. When I say link to each other I mean that the browser knows that this value is tied to another twin value and that lets the browser know where you want to put the label that you just created.

We now have a form that has a Username and a Password text-box for your user to enter their information into. And as I said this lesson was just to teach you how to create the layout of a form. When you get to the point of making your website user interactive, the information that would be entered into these two text-boxes would be sent to a server where the data would be processed and then we could do something with it. But the user would need to have a button to click or someway of submitting the data. So to finish our form layout were gonna add a submit button. Enter this new code inside of our form element right after the <input type="text" id="password" name=""> line:

<form action="" method="">

<label for="name">Username:</label>

<input type="text" id="name" name="">

<br/>

<br/>

<label for="password">Password:</label>

<input type="text" id="password" name="">

<br/>

<br/>

<input type="submit" value="Submit">

</form>

·<br/><br/> We've added two line breaks to position our button a little better.

·<input type="submit" Then we add another input element. This time we have the input type set to submit instead of text. This just tells the browser that we want a submit button.

·value="Submit"> And this is the text that we put on the button. You could have entered something different like Post for the buttons text if you wanted to.

And if you run your code you'll see our completed form with our new Submit button. You can click on it but it won't actually do anything because we haven't added any function to the button with any programming. That comes way later after we first learn how to create and design an entire web page or website.

Creating A Multi-Line Text-Box

The next thing we're gonna learn is how to make a multi-line text-box. And the reason we didn't learn this in the above example is that the code for creating a multi-line text-box is very different from a single line text-box. So clear out everything in between your form tags. Or if you want to keep that example on your page for now you can just create another set of form tags underneath the first form that we created. We will be making a few different types of forms so you might want to keep the code for each of them there so that you can review them all and compare the differences. The code that we need to enter for the multi-line text-box is:

<br/>

Feedback:

<form action="" method="">

<textarea rows="10" cols="20"></textarea>

<br/>

<br/>

<input type="submit" value="Send Feedback">

</form>

<br/>

·We'll go through this step by step. We added a line break to create some space in between our two forms in case you kept the first one on your page.

·Feedback: Here we added a heading/label with just simple text. There are many ways you can add headings, labels, etc. to your page. This was an example of how text would appear on your page without any tags. But be aware that because we entered a label in this way that it's not tied into the form. As you can see it's not even inside of the form element. So if we want to reposition our form our anything like that this Feedback: label would have to be adjusted separately. This way is okay to add text if the text that your creating is permanent. I.E. your never going to move it or do anything to it. So it's always better to put your content in between some tags whether its a <p> element, a <h1> element, or anything else that would fit your needs.

·<form action="" method=""> We add our opening form tag to tell the browser that this is a form.

·<textarea rows="10" cols="20"></textarea> This is the code that actually creates the multi-line text-box. As you can see it is much different from the code to create a one-line text-box. But this is the way it was set up for the browser to understand. It's a textarea element and it has to have a closing tag. For the rows and columns(cols) you can add any numbers you want in here. So if you wanted 25 rows and 50 columns that would be fine.

·<br/><br/> Again we add a couple of line breaks to create some space. Play around with the line breaks. See where the browser would display the Send Feedback button without any line breaks, and then where the button would be if you only added one line break here. It's important to try different things with your code. Experiment with it and you'll find that you will accidentally get results that you like from time to time. Remember your the boss and you tell the browser what to do.

·<input type="submit" value="Send Feedback"> We add our submit button but this time we set the text on the button to Send Feedback.

·</form> We close out our form.

·<br/> And we added a line break at the end to create space between this form and the next element that will be displayed under it.

Save and run your code. And now you have your multi-line text-box created with a Send Feedback button. Note, If add a bunch of lines of text in your text-box that wouldn't fit in the text-box size that you specified you will notice that a scroll bar appears on the right side. The browser does this for us automatically.

Number Input Box

There is one more input form that we are going to make before ending this chapter. And that is a number input box. Add this code after your multi-line text-box form.

<form action="" method="">

How old are you?<br/>

<input type="number" min="0" max="99">

</form>

·<form action="" method=""> First open your form element.

·How old are you?<br/> We add our question here and a line break.

·<input type="number" min="0" max="99"> Then we enter our input element with the type number. We also specified a minimum and a maximum number for the user to input with the min and max attributes. Note that if you choose to not put in the min and max attributes your input box will display longer in length. Since we specified a two digit number as the max value the length of the box for this example will be shorter. Also be aware that the size may vary depending on what browser the user is using.

·</form> And we close our form element.

If you go ahead and run your code with the attributes and then without you will see the difference in the length of the box. Also if you run this code in the newest version of internet explorer you'll see that this browser will let you enter text but if you run it in Google chrome it will not. It will only allow numbers. Another thing you might have noticed is that when you run it in I.E. there are no up and down arrows for the user to click to adjust the number and if you enter a number like 101 that is greater than our max value, when you hover over the little x button that appears you will get a dialogue that pops up and says "You must enter a value between 0 and 99". This is a good example of why it's important to run your code in more than one browser when testing. You can see here how two browsers will display your page differently. Usually the differences are minimal and you won't have to worry about it. But there are times that one browser might not display a portion of your page at all. And in that case you would have to make some adjustments.

Quiz Chapter 8

1.What element is used to create a single line or a multi-line text-box?

2.How do you add an embedded label to your form?

3.When creating a button, Where would you enter the text that would display on the button?

4.What do you need in order to make your form function?

5.What were the attributes min and max used for in this chapter?