HTML ile Arama Formları Oluşturma

eminbasbayan

3 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

HTML kullanarak, Google, YouTube veya Yandex gibi sitelere arama formu eklemek mümkündür. Bu, sitelerin belirli arama desenlerini ve parametrelerini kullanarak gerçekleştirilir. Bu yazıda, action ve name özelliklerinin nasıl kullanılacağını öğrenerek, her biri için birer arama formu oluşturacağız.

1. Arama Formlarının Mantığı

Formlar, kullanıcının girdiği verileri sunucuya göndermek için kullanılır. Bu işlemi yaparken:

action: Formun verilerini göndereceği URL'yi belirler.
name: Her bir input elemanının sunucuda tanımlanmasını sağlar.

Örnek: Eğer bir formda name="q" ve kullanıcı "köpek" yazmışsa, gönderilen veri şu şekilde olur:

?q=köpek

2. Google Arama Formu

Google Arama Deseni

Google'ın arama URL'si oldukça karmaşıktır, ancak ihtiyacımız olan kısım q parametresidir. Google arama verilerini /search URL'sine gönderir.

Form Kodu:

<form action="https://www.google.com/search">
  <input type="text" name="q" placeholder="Google'da Ara">
  <button type="submit">Google'da Ara</button>
</form>

Sonuç:

Kullanıcı "JavaScript" yazarsa, şu URL'ye yönlendirilir:

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

3. YouTube Arama Formu

YouTube Arama Deseni

YouTube arama URL'si /results olurken, arama parametresi search_query olarak adlandırılır.

Form Kodu:

<form action="https://www.youtube.com/results">
  <input type="text" name="search_query" placeholder="YouTube'da Ara">
  <button type="submit">YouTube'da Ara</button>
</form>

Sonuç:

Kullanıcı "origami" yazarsa, şu URL'ye yönlendirilir:

https://www.youtube.com/results?search_query=origami

4. Yandex Arama Formu

Yandex Arama Deseni

Yandex, arama verilerini /search/ URL'sine gönderir ve arama parametresi text olarak adlandırılır.

Form Kodu:

<form action="https://yandex.com/search/">
  <input type="text" name="text" placeholder="Yandex'te Ara">
  <button type="submit">Yandex'te Ara</button>
</form>

Sonuç:

Kullanıcı formda "haberler" yazarsa, Yandex şu URL'ye yönlendirilir:

https://yandex.com/search/?text=haberler

5. Birden Fazla Form Birlikte

Aşağıda, Google, YouTube ve Yandex için oluşturduğumuz tüm formlar bir sayfada toplandı:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arama Formları</title>
</head>
<body>
  <h1>Çoklu Arama Formları</h1>

  <h2>Google'da Ara</h2>
  <form action="https://www.google.com/search">
    <input type="text" name="q" placeholder="Google'da Ara">
    <button type="submit">Google'da Ara</button>
  </form>

  <h2>YouTube'da Ara</h2>
  <form action="https://www.youtube.com/results">
    <input type="text" name="search_query" placeholder="YouTube'da Ara">
    <button type="submit">YouTube'da Ara</button>
  </form>

  <h2>Yandex'te Ara</h2>
  <form action="https://yandex.com/search/">
    <input type="text" name="text" placeholder="Yandex'te Ara">
    <button type="submit">Yandex'te Ara</button>
  </form>
</body>
</html>

6. Önemli Notlar

name Özelliği:
- Sunucuya hangi verinin gönderildiğini tanımlar.
- Örneğin, YouTube için name="search_query" kullanılırken, Yandex için name="text" kullanılır.
Veri URL'de Görünüyor:
- Bu formlar varsayılan olarak GET yöntemini kullanır. Bu nedenle, arama verisi URL'de görünür.
- Daha hassas veriler için POST yöntemi tercih edilmelidir.
Button Zorunlu Değil:
- Kullanıcılar formu doldurduktan sonra Enter tuşuna basarak da formu gönderebilir.

Sonuç

HTML formları, verileri sunucuya göndermenin basit ama güçlü bir yoludur. action ve name gibi temel özellikleri öğrenerek, istediğiniz herhangi bir site için kendi arama formlarınızı oluşturabilirsiniz. Bu formlar başlangıç için eğlenceli bir pratik alanı sunar ve ilerleyen süreçte form verilerini nasıl işleyeceğinizi öğrenmenize temel oluşturur.