Hello there, let's start.
You'll see two methods to do this:
There's a demo page here on Monkey Raptor as the result of the form submission, so that you know the method is valid.
The page will only show you the query from the
GET submit method from the
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.
action attribute is the URL where the form data is sent. That URL will then process the request.
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 with search type. As in
<input type="search">, we won't use it, because using
type="text" is fine already.
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.
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
1. The Example -- Separated
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
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 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
And then, 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.
So, to access an element by its
name, which is defined on
form element, we just use
And, to access an element inside it (child) which also has a name, use
This method is valid for
form element and such.
class attribute is good for manipulating/processing/styling multiple elements.
id attribute is the identifier of one unique element.
This demo form will self-cancel itself (no action) if there's no input.
2. The Example -- Inline
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.
It's using the same
CSS but the
onsubmit listener now is attached inline in the
form element. This part:
It's actually a shorthand. Translated, if
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 (
true value part is taken from the comparison of the element's value with blank string ('').
If expanded, it'd look like this:
This 2nd demo form will also cancel the default method if there's no input.
Alrighty, that's about that. Happy tinkering.