HTML Arama Butonu Kodu
Giriş
HTML, web sayfalarının yapısını oluşturan bir işaretleme dilidir. Bu dil, web sayfalarını tasarlarken çeşitli öğeleri kullanmamıza olanak sağlar. Arama butonları, bir web sitesinde kullanıcıların istedikleri içeriği aramalarını ve bulmalarını sağlayan önemli öğeler arasındadır. Bu makalede, HTML arama butonu kodunun nasıl oluşturulacağına dair detaylı bir açıklama yapacağız.
HTML Arama Butonu Oluşturma
HTML’de arama butonu oluşturmak için “input” etiketi kullanılır. Bu etiketin “type” özelliği “search” olarak belirlendiğinde, bir arama butonu oluşturulur. İşte basit bir arama butonu örneği:
“`html
“`
Yukarıdaki örnekte, “input” etiketi “search” türünde tanımlanmıştır. “id” özelliği “search-input” olarak belirlenmiştir. Bu, CSS veya JavaScript gibi diğer dillerde bu arama butonuna erişmek için kullanılabilir. “name” özelliği “search” olarak belirlenmiştir ve bu, sunucuya gönderilen arama sorgusunun adını temsil eder.
Ayrıca, “placeholder” özelliği kullanılarak arama alanına öntanımlı bir metin eklenir. Bu metin, kullanıcıya arama yapması için bir ipucu sağlar.
Son olarak, “button” etiketi kullanılarak bir arama butonu oluşturulur. Bu butonun “type” özelliği “submit” olarak belirlendiğinde, bir formun gönderme düğmesi işlevi görür.
Bu şekilde basit bir HTML arama butonu oluşturabilirsiniz. Dilerseniz CSS kullanarak bu butonu tasarımınıza uygun hale getirebilirsiniz.
Bu yazının ikinci bölümünde, arama butonuna CSS uygulaması ve daha gelişmiş bir arama özelliği eklemek için JavaScript kullanımı hakkında daha fazla bilgi vereceğiz.
HTML Arama Butonuna CSS Uygulama
HTML arama butonuna CSS uygulamak, görünümünü ve tasarımınızı özelleştirmenizi sağlar. CSS (Cascading Style Sheets), web sayfalarına stil ve düzen eklemek için kullanılan bir stil dilidir. Arama butonunu istediğiniz şekilde özelleştirmek için aşağıdaki adımları izleyebilirsiniz:
1. İlk olarak, arama butonuna bir sınıf veya ID atayarak CSS ile hedefleyebilirsiniz. Örneğin, arama butonunu bir sınıf olan “search-button” ile hedefleyelim:
“`html
“`
2. Ardından, CSS stil dosyanıza veya “style” etiketine aşağıdaki kodu ekleyin:
“`css
.search-button {
background-color: #f2f2f2;
color: #333;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.search-button:hover {
background-color: #ddd;
color: #000;
}
“`
Yukarıdaki CSS kodunda, arama butonunun arka plan rengi, metin rengi, kenarlık, dolgu, köşe yuvarlatma ve imleç stilini belirledik. Ayrıca, fare imlecini üzerine geldiğinde butonunun nasıl görüneceğini de tanımladık. Bu stil özelliklerini ihtiyaçlarınıza ve tasarım tercihlerinize göre değiştirebilirsiniz.
3. Son olarak, CSS stil dosyanızı HTML sayfanıza dahil edin veya “style” etiketi içine CSS kodlarını ekleyin:
“`html
“`
Bu şekilde, arama butonunuzun görünümünü CSS ile özelleştirebilirsiniz.
Bu makalenin son bölümünde, arama butonuna JavaScript kullanarak daha gelişmiş bir özellik eklemek için adımları açıklayacağız.
