HTML Search Box
출처: http://www.textfixer.com/tutorials/html-search-box.php
1. HTML Search Box
이 페이지에서 오늘 사용되는 4가지 가장 일반적인 검색 상자의 예를 보여드립니다. HTML 검색 창 코드가 포함되어 있으므로 당신은 이 예제들을 사용하여 당신의 웹 사이트에 검색 창을 구축할 수 있습니다.
The search bar for a website is typically located on the upper right side of the page so I've added a float right style and the search box itself generally follows a style like one of these four search examples listed below.
These are mainly visual examples, you'll need to hook them up to a search engine to process the search queries. You can set the search form method parameter to use whatever script you want.
HTML Search Box Example Standard Search Bar with some Basic CSS Style Enhancements
search I've eliminated the bevel, added a gradient, rounded some corners so that the text input box and search button form one nice styled package together. The submit button also has a nice little subtle color change on hover. The rounded corners and etc for this search bar rely on CSS3 and so if you're using an old browser the appearance won't be exactly identical as something more modern but it will be a fully functional fallback rendering.
Grab the search form html code below. I have included both the necessary html and the css in a whole page example that you can easily use.
<!DOCTYPE html>
Placeholder Text in Search Box
Search our website > This example is very similar to the code above but here we also have some default text in the search box and this text will disappear once a user clicks in to enter text for their own search.
This search text box requires some javascript to work. The javascript will make the placeholder text disappear once the focus is on the text area. I've also included a jQuery version in case that's your preference
Javascript search placeholder text version
<!DOCTYPE html>
jQuery search placeholder text version
<!DOCTYPE html>