More form layouts - HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 9: More form layouts

We are going to continue on with a few more common forms in this chapter and just like chapter 8 this chapter can also be skipped until later if you like. It is recommended that you at least read through the two chapters even if you don't write the code just to get an idea of what's going on.

Radio Button Form

Okay so the first form that we're gonna make in this chapter is a form that has radio buttons for the user to select. Were going to ask the user a question and give them a choice between two answers. Note that with radio buttons the user can only select one item. For a form that allows the user to select multiple items we use check boxes. And that will be the form we're gonna create after this exercise. So on to the code. Enter this some where on your page. Putting it after the number input form is probably the best area so that you can keep all of your form examples in one location.

<form action="" method="">

Do you like bacon?<br/>

Yes:

<input type="radio" name="yesorno" value=""><br/>

No:

<input type="radio" name="yesorno" value="">

</form>

¨<form action="" method=""> Just like before we open our form element.

¨Do you like bacon?<br/> Then we add the text for our question to the user. And we want to put a line break here so that when the first radio button is displayed it will appear on the next line.

¨Yes: This is the label for the first radio button.

¨<input type="radio" name="yesorno" value=""><br/> Then we have our input element. This time we set the type to radio. So now you are starting to see how the type attribute works. We have already used the types text, submit, number, and now radio. The name attribute we set to yesorno. This is basically a name that we give to tie in or link to the other option as you will see. If would be perfectly fine if you set the value here to nooryes. And the value attribute is set to "". This empty value would be set to what the user chose. So if they chose Yes it would be set to Yes. And then this value would be sent to the server to be processed. We aren't going to be sending and processing input data in these exercises though. Finally we add another line break.

¨No: This is the label for the second radio button.

¨<input type="radio" name="yesorno" value=""> Then we another input element. This element matches the other input element exactly. Also it's very important for the name attribute for both of the input elements to match. So they both have to say yesorno otherwise the user would be able to select both yes and no and we don't want that. We want them to only be able to pick one or the other.

¨</form> And finally we close our form element.

And that's it. We're done with the radio button form. If you run your code you can see that you can either choose Yes or No but not both. If you were actually making this form for your website you would probably want to add a Submit button or something like that to send the user input to the server. And we already know how to add a submit button so we won't go over that again for this example.

Check Box Form

Now we'll make a form with check boxes. This is the type of form that you would use for things like surveys, shopping cart lists, etc. because it gives the user the ability to choose multiple items. So there are many uses for this type of form. Let's enter this code into your page:

<form action="" method="">

Which of the following computer languages do you want to learn?<br/>

<input type="checkbox" name=""> Html <br/>

<input type="checkbox" name=""> Css <br/>

<input type="checkbox" name=""> JavaScript <br/>

<input type="checkbox" name=""> C# <br/>

<input type="checkbox" name=""> Java

</form>

¨<form action="" method=""> Open the form element. Notice that I didn't put a line break before the form this time. You can decide if you want one or not.

¨Next we enter the text for our question and add a line break at the end.

¨<input type="checkbox" name=""> Html <br/> Then we put in our first input element. This time we use the type "checkbox". And it's the same deal with the name attribute as it was with the radio button form. It would be set to the user's choices and sent to the server. We add the text that will appear next to the check box and end with a line break so that the next check box and item will appear on the next line. If you wanted the check boxes to display on one line you just don't add the line break tags. And it's the same for the next four input elements. All you do is change the text for the choices.

¨</form> Finally close your form element.

When you run this code now you will be able to select and deselect as many check boxes as you want. If for some reason you wanted to always have a certain box checked whenever the user visits your page you can simply add an attribute to one or more of your input elements. For example:

<input type="checkbox" name="" checked="checked"> Html <br/>

¨The attribute name is checked and the value(name we gave it)is checked. So now whenever the user visits your page or refreshes it the check box that you added this attribute to will already be selected. The user can deselect it if they want.

Drop Down Menu

We're gonna learn how to create a drop down menu in this exercise. Let's say you wanted to ask the person visiting your site what their favorite day of the week is. Add this code to your page:

<form action="" method="">

What is your favorite day of the week?

<select name="">

<option value="">Sunday</option>

<option value="">Monday</option>

<option value="">Tuesday</option>

<option value="">Wednesday</option>

<option value="">Thursday</option>

<option value="">Friday</option>

<option value="">Saturday</option>

</select>

</form>

This form looks a little different from the other forms that we've created. Just know that the attributes name="" and value="" are there for programming purposes to make this list function in a certain way. But if you run this code in your browser now you'll have a drop down list that has the days of the week in it for the visitor to choose from. By default the width of this menu will be the size of the largest option inside of it and the first option that you put in your form will be displayed in the menu's box. So before the user does anything with this form the option Sunday will be displayed.

Quiz Chapter 9

1.What is the main difference between a radio button form and a check box form?

2.Name three input element types that we have used so far?

3.What is the attribute value="" used for in this chapter?