Monkey Raptor

The basic structure of form looks like this:

That is the elementary structure. You can add more elements to wrap each element inside the form element to style it even further.

We'll use only GET method here, because this is a basic example, it's just one query and we don't need to put the form data into the HTTP request. The query (the text from the input) in this demo will be visible on the URL bar.
For secure request (not https, but more like sensitive data like email, address, password, etc), the POST method is recommended and a must.

The action attribute is the URL where the form data is sent. That URL will then process the request.

The name for the form and the input elements are important here. That attribute will help us to identify the form parent element and check the value of the input.

In HTML5, there's input with search type. As in <input type="search">, we won't use it, because using type="text" is fine already.

The button doesn't need to have name (for this particular demo), because the thing we wanna capture and filter is the input element text value. Is it blank or not? If it's blank, cancel the submission.

The class attribute on each element above is intended for CSS styling, and the id will be for scripting. But we won't use the id to get the element, instead, we'll use name attribute.

This is a real example of search form we find everywhere on the internet. But this form will not yield search result, we're just gonna see the form data output on the action URL.

HTML

As you can see, there's a div element that wraps the form element, so that the form is wrapped. Hm.

The URL on the action attribute is a relative URL -- without the base domain and protocol. The absolute URL would be: http://monkeyraptor.johanpaul.net/p/demo.html. We can use the relative URL only. It's totally OK.

Now, let's create CSS.
The CSS must be wrapped with style tag, and placed above the element we wanna style. Or, to be more efficient, put all CSS in the head section of the HTML.

CSS

And then, the JavaScript controller.

JavaScript should be placed at the bottom of the body section of HTML, especially on-page script like this one. For external script, with asynchronous get method and some queue, also better on the bottom of the page. But of course, it mainly depends on the structure of the application.

I'll shut up now.

JAVASCRIPT

So, to access an element by its name, which is defined on form element, we just use document.[the_element_name].

And, to access an element inside it (child) which also has a name, use document.[the_element_name].[the_child_element_name].

This method is valid for form element and such.
For general JavaScript-ing (and CSS) purpose, use id (and class).
The class attribute is good for manipulating/processing/styling multiple elements.
And the id attribute is the identifier of one unique element.

DEMO #1

This demo form will self-cancel itself (no action) if there's no input.

Let's use that HTML but modify the name, so that the script from above example won't also control this form or produce error on console.

HTML with inline JAVASCRIPT

It's using the same CSS but the onsubmit listener now is attached inline in the form element.

The inline JavaScript is at the form element. This part:

It's actually a shorthand. Translated, if document.fs.qs (the input named qs) element inside the form (named fs) has blank value (''), then don't do anything (return false). If there is string, then do the default method (return true).
The false or true value part is taken from the comparison of the element's value with blank string ('').

If expanded, it'd look like this:

DEMO #2

This 2^nd demo form will also cancel the default method if there's no input.