Build an HTML Sandwich with Forms, Inputs, and Buttons
Hungry for knowledge? We’ll build an amazing sandwich using the HTML form, fieldset, legend, input, textarea, and button elements. Om nom nom!
- Click here for the full video transcript
>> NARRATOR: 1 PM, saturday. Daisy has spent the morning foraging for bugs in her programs. She is severely famished.
>> DAISY: I’m going to make an amazing sandwich! Lets see.. type of bun.
>> NARRATOR: These are radios.
>> DAISY: Radio buttons are a type of html input. They have three important attributes. Type, name, and value. Radio inputs are useful when you only want to allow one item to be selected from a list of options. To group radio buttons together, they are all given the same name. In this case, the name is bun. The value attribute contains the data that will be sent to the website when I submit the form. I’m going to have a lettuce bun, so I’ll check that option. When a radio button is checked, it gains another attribute called checked. This is what’s known as a boolean attribute. It doesn’t need to have a value associated with it. This “next” button is another type of input, the submit type. In addition to the type attribute, it also has a value attribute. The value attribute for submit buttons is the text that shows on the button. Oh look, the meat and cheese fields are grouped inside of a fieldset, and the fieldset is labeled with a legend. This meat dropdown is a select element. Select elements contain any number of options. Options contain the text to be shown in the dropdown, and a value attribute for what is submitted to the website. Similar to radios, select options have a “selected” attribute to indicate which item I picked. I can choose many cheeses because this select element has the “multiple” attribute.
>> NARRATOR: Here daisy is selecting provalone, mozarella, gruyere, cheddar, and pepper jack by holding the control key as she clicks on the options. I would have chosen swiss.
>> DAISY: This time the submit button is a button element. The button element should have a type attribute of submit, but unlike the submit input, the button’s text goes inside of the tag rather than in the value attribute. And now to finish my masterpiece with toppings. These are checkbox inputs, so I can select any combination of toppings that I want. Just like radio buttons, checkboxes are grouped by giving them all the same name. Notice how I can click on the text next to the checkbox to select an option? That’s because the text and the input are wrapped in a label tag. Sometimes the input is outside of the label tag. In that case, there should be id and for attributes to connect them. Now, what should I put on my sandwich.
>> NARRATOR: Pickles, onions, olives, lettuce, and tomato are ordered. Daisy narrowly avoids a double lettuce disaster.
>> DAISY: This page has yet another kind of submit button known as an image. Image inputs require a type and src attribute. The src is the path to your button image. That’s it! Now I just need to fill out my personal information to get my sandwich delivered. This field for my name is a text input, it lets me type anything I want into the form. And this is a textarea. It lets me type in a big block of text with line breaks and everything. The size of it is controlled with the rows and cols attributes. Unlike text inputs, the value of a textarea is stored in between the textarea tags, rather than in a value attribute. Text inputs and textareas also have a special attribute called “placeholder”. Placeholder will display some sample text in the field until the user fills it in. Like these fields here… Species, height, weight… Wait a minute, why does Phishwich need to know all this stuff?
>> NARRATOR: On January nineteenth, Daisy died of starvation.
>>DAISY: I may not have gotten the sandwich I wanted, but we did learn how to make some pretty complex forms in HTML today.
I captured some amazing video and audio I want to share with you next time. We’ll learn how to use HTML to easily create video and audio players on a web page.