Learn HTML Code 3

We can find tons of forms on our website. This lesson is going to show you how to build a capture email form. Forms are fun to build because there is so much going on. Forms contain several different elements for us to build the form with.

In HTML you have fields and then the labels. You have to include both parts or it wont make any sense. You will see in the examples. Here are some of those elements:

<textarea> - a multi-line text area for input area with unlimited characters
<input> - gives a field for data to be entered.
<select> - this is the selection area where you can give severaloptions
<Button> - Button.... there is always a button on a form!
<fieldset> - You can put the form in its own box
<label> - Label creates a label for each element
<optgroup> - allows you to create a dropdown selection of items
<option> - - also creates a dropdown list of options

<TEXTAREA>

Text areas are an area in a form that allows you to create a text box that allows for more than one line verses <input> which is just one line usually.

Here is what the code for a text area would look like:

<textarea >
WA is the best Website I have ever seen! I don't know what I would do without them!
</textarea>

</body>
</html>

If you run this code you will get:

<INPUT>

Input fields are used for your visitor to enter data into the form. They can be set for any item you might need. In this example,they used First and Last name, however, it could be address, state, zip, phone number.... i think you get the idea.

<Form action="action_/niche-marketing-strategy.php method "get">
First Name: <input type="text" name"Firstname"><br>

Last Name: <input type="text" name="LastName"><br>

<Form>

If you run this code you will get:

In this example, you can see that the Labels are First Name and Last Name. In this particular example though the Labels are just text entered on your page.

<label>

Labels are usually used in tandem with <input>. As in the directions above, you can either just type the labels in or you can use the label tag. If you are using a web builder with drag and drop, it will contain the label fields to drag over. Labels are used to describe the text field.

Here is an example of an input area including the label tag:

<form action="/action_page.php">
<label for="male">Horse</label>
<input type="radio" name="animal" id="Horse" value="Horse"><br>
<label for="female">Puppy</label>
<input type="radio" name="animal" id="Puppy" value="Puppy"><br>
<label for="other">Other</label>
<input type="radio" name="animal" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

Here is how this code will show up:

<Select>

Select allows us to create a list of items to be selected from. We are also including the <optgroup> together. <Optgroup> allows you to put a structure into the select list.

Here is an example of select code including the <optgroup>:

<select>
<optgroup label="Cup Cakes">
<option value="Cupcake">Cherry Cheesecake</option>
<option value="Cupcakes">Chocolate Paradice</option>
</optgroup>
<optgroup label="Cakes">
<option value="Cake">Red Velvet</option>
<option value="Cake">German Chocolate
</select>

As you can see from the code, there is group of Cup Cakes and Cakes. Here is the code if it is run:

List is how it first shows on the page

Th is how it shows if you click on the dropdown.

<Button>

You can add a button to anywhere on your site. Usually though they are used with some type of form. It usually submits information or retrieves something for you.

Here is the code for a button:

<button type="button">Click Me!</button>

What it looks like:

Here are three types: Button, reset and submit. You can see why the three different options.

You can Click Me! with any other saying you want. For example:

With <fieldset> we get to have some fun!! <fieldset> uses two tags to create the form. We will also be using <form> as well as <fieldset>.

<form action="/action_page.php" method="get" id="loginform">
Any text will do <input type="text" name="saving"><br>
<input type="submit">
</form>

<fieldset form="loginform">
Name: <input type="text" name="username"><br>
Email: <input type="text" name="usermail"><br>
</fieldset>

Here is how this code looks when run:

An error appeared on this code, it shows a line of typing that shouldn't have appeared.

Let me correct the error and rerun:

I accidentally copied the text line before the code so it appear also. Just shows, I make mistakes also. You just don't see them because I have a backspace!! LOL

Forms can be complicated and I know I did not cover everything. Not even close. I wanted to just give you an idea of what code you would be looking for if you need to make a correction.

Next, we are going to go <option>

Like This 9

Tasks 0/2 completed

1. Play with different Forms until you understand them.

2. Create a contant form for your website. Create it as a separate page with just the contact form on it.

Previous Lesson