Introduction to Web Development

HTML Forms Advanced: Lists,

Select, Links, and Form Attributes
This lesson will build on your knowledge of HTML forms and introduce new elements
and concepts to create more complex and interactive web pages.

Lists in HTML
HTML provides two types of lists: ordered (numbered) and unordered (bulleted).

Unordered Lists
An unordered list is created with the <ul> tag, and each list item is wrapped in <li>
tags:

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Ordered Lists
An ordered list uses the <ol> tag instead of <ul> :

<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>

Select and Option Elements

The <select> element creates a dropdown menu, and <option> elements define
the available choices.

<label for="country">Choose your country:</label>

<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>

You can also group options using the <optgroup> tag:

<select id="pet" name="pet">

<optgroup label="Dogs">
<option value="labrador">Labrador</option>
<option value="poodle">Poodle</option>
</optgroup>
<optgroup label="Cats">
<option value="siamese">Siamese</option>
<option value="persian">Persian</option>
</optgroup>
</select>

Konstant EduTech
 Introduction to Web Development

Links in HTML
Links are created using the <a> (anchor) tag. Here are various ways to use links:

Basic Link

<a href="https://www.example.com">Visit Example.com</a>

Relative Links
For linking to pages within your own website, use relative paths:

<a href="/about.html">About Us</a>

<a href="../products/index.html">Our Products</a>

Opening Links in a New Tab

Add the target="_blank" attribute to open the link in a new tab:

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Email Links
To create a link that opens the user's email client:

<a href="mailto:[email protected]">Send us an email</a>

Phone Call Links

For mobile devices, you can create links that initiate phone calls:

<a href="tel:+1234567890">Call us</a>

SMS Links
Similarly, you can create links to send SMS messages:

<a href="sms:+1234567890">Send us a text</a>

Form Attributes: Action and Method

The action and method attributes of the <form> tag determine how and where the
form data is sent.

Action Attribute
The action attribute specifies the URL where the form data should be sent when
submitted:

<form action="/submit-form" method="post">

Method Attribute
The method attribute specifies how the data should be sent. The two most common
values are:

get : Data is appended to the URL (not secure, use for non-sensitive data)

Konstant EduTech
 Introduction to Web Development

post : Data is sent in the body of the HTTP request (more secure, use for
sensitive data)

<form action="/search" method="get">

<form action="/submit-payment" method="post">

Button Types in Forms

The type attribute for <button> or <input> elements in a form can be:

submit : Submits the form (default if not specified)

reset : Resets all form fields to their default values

button : A clickable button that doesn't submit the form (useful with JavaScript)

<button type="submit">Submit Form</button>

<button type="reset">Reset Form</button>
<button type="button" onclick="showAlert()">Click Me</button>

How a Form is Submitted

1. User fills out the form and clicks the submit button.

2. The browser collects all form data.

3. The data is sent to the URL specified in the action attribute using the method
specified in the method attribute.

4. The server processes the data and typically responds with a new page or
redirects the user.

Using FormSubmit.co for Form Submission

To demonstrate how form submission works in practice, we'll use FormSubmit.co (htt
ps://formsubmit.co/). This service allows you to receive form submissions directly to
your email without needing to set up a server.

Step 1: Set Up Your Form

Modify your form's HTML to use FormSubmit.co. Here's an example:

<form action="https://formsubmit.co/[email protected]" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>

<button type="submit">Submit Form</button>

</form>

Remember to replace YOUR_ACCESS_KEY_HERE with the actual access key you received
from FormSubmit.co.

Konstant EduTech
 Introduction to Web Development

Step 2: Add the FormSubmit URL with your email to

the form element
Let's say our email is [email protected]

<form action="https://formsubmit.co/[email protected]" method="POST">

</form>

Step 3: Test Your Form

1. Save your HTML file and open it in a web browser.

2. Fill out the form and submit it.

3. Check the email address you used to sign up for FormSubmit.co. You should
receive the form submission details.

How It Works
1. When the form is submitted, the data is sent to FormSubmit.co' server.

2. FormSubmit.co processes the submission and forwards the data to your email.

3. You receive an email with all the form details.

This method allows you to quickly set up and test form submissions without needing
to write any server-side code.

Activity: Create a Contact Form with

FormSubmit.co
Now, let's modify our previous book order form to use FormSubmit.co:

1. Sign up for FormSubmit.co and get your access key.

2. Create a new HTML file or modify the existing one from our previous activity.

3. Set up a form that includes:

Name input

Email input

Book category dropdown

Message textarea

Submit button

4. Use the FormSubmit.co action URL and include your access key.

Here's a template to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Contact Us - Book Order</title>
</head>
<body>
<h1>Contact Us About Your Book Order</h1>
<form action="https://formsubmit.co/[email protected]" method="POST">

Konstant EduTech
 Introduction to Web Development

<!-- Add your form elements here -->

<button type="submit">Send Message</button>

</form>
</body>
</html>

Fill in the form with the required elements and your FormSubmit.co access key. Once
you've created the form, test it by submitting some data and checking your email for
the submission.

Wrap-up
Excellent work! You've now learned about advanced HTML form elements, different
types of links, important form attributes, and even how to handle form submissions
using a third-party service like FormSubmit.co. This knowledge will allow you to create
interactive and functional web pages that can collect and process user input.

Assignment
Create a restaurant food ordering page that submits the form and sends submissions
to your email. Your page must have these tags:

html, head, title, body, form, input (text, phone, email, radio, checkbox), select, label,
fieldset, optgroup, option, legend, button (submit, reset), textarea, h1, h3

Add as much detail as you wish into the webpage. You can submit the code in the
DMs of any of the admins.

Konstant EduTech