Supercool search bars, part 1

James Turner, 09 December 2014

Tags: CSS HTML

Along my adventures in web design so far, I᾿ve focussed my attention on two of the three elements that make a website work: HTML and CSS. I think it᾿s time to start looking at the third member of the trinity: JavaScript, and what better way to start than to look at the funky search bar that sits quietly in the top corner of A List Apart. I᾿ll divide this topic into a few parts. The first part is a revision of the HTML elements and attributes that ALA uses to build its search bar. The posts that follow will look at the CSS used to style the search bar, and the JavaScript that makes it do its stuff.

Search Bar HTML

The markup for the search bar appears below. As you can see, it appears inside one of the li elements that make up the main menu (see my previous post on ALA᾿s menu for more on this).

<li>
  <form data-action="/search" action="http://www.google.com/search" method="GET">
    <input type="hidden" name="sitesearch" value="alistapart.com" />
    <label for="search-keywords">
      <input id="search-keywords" type="search" data-name="keywards" name="q" placeholder="Search" aria-label="Search" value="" required="required">
    </label>
    <input id="submit-search" name="submit" type="image" src="icon_magnify_v.svg" data-fallback="icon_magnify_v.png" alt="Submit">
  </form>
</li>

The Form element

The form element is a block-level container for inputs and other form-related ele­ments. As well as providing a convenient way of grouping inputs together, it also tells the browser what to do when a ‘submit’ event is called. I᾿ll have to revise quickly the attri­butes that form uses.

data-action This is a user-defined attri­bute. The browser will ignore it, but it can be referenced via JavaScript. Stay tuned for more what JavaScript does in this particular instance.

action This tells the browser where to send the data that the user has input.

method This attribute tells the form how to submit the data that the user inputs. It can have one of two values: get and post. With get, the data are sent via the URL, while post requires a programming solution to send the data. See HTML Forms on w3schools.com for more.

The hidden input type

The hidden input type enables a webpage to send data that was not added by the user, but that was pre-defined (as in this case) or set by JavaScript. In the case of the first input, the data being sent is A List Apart᾿s URL. I guess this forms part of the Google search query, telling Google only to look in alistapart.com.

type When set to hidden, the browser creates an invisible input that can only be accessed behind the scenes.

name This attribute allows JavaScript or a submitted form to access the input.

value This is important for hidden inputs. It gives the input a value that can only be changed via JavaScript.

The label element

A label helps mouse users to reach an input. When the user clicks on an input᾿s label, the focus moves to the input. As explained under HTML Label Tag on w3schools.org:

A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element.

Here, the label has only one attribute:

for As described above, this attribute links the label to an input, via the associated input᾿s id.

The search input type

The search input is the main part of the search bar. This is where the user enters the terms that she wants to search for. Here is a quick look at the attri­butes that go into the search input.

id This attribute is important for inputs as it allows the label element to refe­rence it, as well as Java­Script.

type The search bar has the type search. This behaves like a regular text field, but pre­sumably there are things at work behind the scenes (need to check the differ­ence between search and regular text inputs).

data-name I first came across user-defined data-* attributes back in Responsive Images Part 2: Body. They get ignored by the browser, but they can be referenced in JavaScript.

name This attri­bute, again, can be used by Java­Script or by a browser after a form has been submit­ted.

placeholder This attribute is new to HTML5, but supported by all modern browsers. It adds ‘ghost text’ to an unedited input element, giving the user an indication of what to type into it.

aria-label This attribute allows the web designer to include an accessible text label for inputs whose visual design doesn᾿t otherwise include a label. For example, if a pop-up window has an input with just a cross image in the top right corner, non-sighted users might not know it᾿s there. It is described in more detail here: Using aria-label to provide an invisible label.

value The value attribute sets the content of the input. In this case, empty quotes indicate that the input contains nothing.

required Setting the required attri­bute to "required" presumably means that the submit input won᾿t execute until the user adds some text to the search bar.

The image input type

The image input type works pretty much like a submit input. In other words, when you click on it, the data in the form are sent. There are a couple of important differences. Firstly, you can tell the input to display an image instead of text like ‘Submit’ or ‘Search’. Secondly, when the user clicks on the image, you can tell the form to submit the mouse cursor᾿s x- and y-coordinates, which is useful when the input image is a map, for example.

There is more information about image inputs here: How to Make Images into Input Buttons on Web Pages and here: input type=image (w3.org). Interestingly, the first of those webpages warns that you shouldn᾿t really use image inputs as mere buttons, as ALA has done. It doesn᾿t explain why, though.

Here are the attributes that ALA uses:

id and name Again, these help to reference the input. Hopefully, I᾿ll learn more about this when I start looking at the JavaScript.

type The image type is declared here.

src This is the filename of the image that the input displays. In this case, it᾿s a SVG file. Presumably, not all browsers play well with SVGs, which is why I᾿m guessing we need…

data-fallback Yet another data-* attribute, I suppose this one is called by JavaScript when the image input᾿s SVG isn᾿t recognised by older browsers. I᾿ll need to check this later.

alt Like img elements, I guess image inputs need alt text for screenreaders, etc.

Conclusion

So, this post has ended up being a rather dry list of all the elements and attributes that go into building ALA᾿s search bar. Essentially, the search bar consists of a form, which contains a label, a search input, and a submit button. I᾿ve seen that the placeholder attribute can be used to add some snazzy ‘ghost text’ to the search input, and you can also use an image input type—perhaps not entirely legally—as a submit button.

There are a few things that I need to follow up in the next couple of posts. From the CSS point of view, I᾿m curious to see how the expand/collapse on mouse hover is achieved. And in JavaScript, I᾿d like to know how the form data is processed, and what happens with all of those custom data-* attri­butes.

By the way, I᾿d love to read your comments (yeay, new feature) if any of the above has tickled your fancy!