Homework 6 – Search Page

Task Definition

Using the <form> element, implement a simple search page that accepts a question from the user and redirects it to the Google search page.

Requirements:

1. Create a search input field.
2. Submit the request using an HTML <form>.
3. Redirect the user to Google search results.
4. Style the page using CSS.

---

📝 Description

This project implements a minimal search interface that works as a front-end wrapper for Google search.

The page includes:

• A centered search form
• Text input field for the user query
• Submit button to send the request
• Automatic redirection to Google search results

When the user submits the form, the browser sends a GET request to Google with the query parameter.

Example:

[https://www.google.com/search?q=star+wars](https://www.google.com/search?q=star+wars)

---

📁 Project Structure

/project
├─ index.html
└─ CSS/
	└─ style.css

---

🎯 Purpose

This homework focuses on practicing:

1. HTML forms
2. GET requests
3. Using external services (Google search endpoint)
4. Basic CSS positioning and centering

---

🔍 How It Works

1. HTML Form

The form sends a request directly to Google's search endpoint:

<form
	name="search"
	action="https://www.google.com/search"
	method="get"
></form>

Important details:

• action → defines the URL where the form data is sent
• method="get" → sends the query in the URL

---

2. Query Parameter

The input field uses the name q, which is the parameter Google expects for search queries.

<input
	type="text"
	name="q"
	placeholder="Find..."
	autofocus
/>

Example generated URL:

https://www.google.com/search?q=coffee

---

3. Centering the Form

The form is centered on the page using absolute positioning and transform.

form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

This technique moves the form to the center of the viewport.

---

4. Button and Input Styling

Simple padding is applied to improve usability.

input {
	padding: 0.3rem;
}

button {
	padding: 0.3rem 0.6rem;
	cursor: pointer;
}

---

📜 Example Layout

-----------------------------
|                       	|
|       Ask anything:  		|
|   [ Find... ] [Search]	|
|                       	|
-----------------------------

The search form appears centered on the page.

---

📦 Usage

1. Open index.html in a browser.
2. Type any search query.
3. Click Search.
4. The browser will redirect to Google search results.

---

✅ Project Status

Status: ✅ Completed

Features implemented:

• HTML form with GET request
• Google search integration
• Centered layout with CSS
• Simple and clean UI

---

📄 License

MIT License

---

Made with ❤️ using HTML + CSS by Sam Malikin