(music)
I want to show you the input of type search quickly.
Firstly, I want to show you the input of type text.
Okay, let's go to the end, and input of type search. And you'll see, if we save this, and we just refresh
the browser, visually they look exactly the same ... initially. If we are inside the text field
you know that this is what it looks like.
But if we go into the search input box, look what happens.
We start typing, we get that little X, that cross. Chrome automatically puts this in for us.
And of course, if the user clicks that X, it clears the search box altogether.
So that's one visual difference between the two.
Now let's just get rid of the text box and just have the search box.
Just like that.
And many of the attributes we can use are the same as other form widgets.
Bear in mind we have to have a name attribute, otherwise nothing will be submitted to the server.
You have to send name:value pairs to a server. So the name here can be "q".
Why did I use the letter "q"?
It's just convention.
A lot of developers, when it comes to search terms, define a variable and they define it as "q". So it's
just something that's done in the development industry, but you don't have to do it.
It's not like it's mandatory or anything, but you do have to have a name attribute.
The next thing we can put on here is a placeholder attribute.
You know, I'm just showing you that we can use many of the same attributes you've seen before and we
can have "search".
So if we save this, refresh the page, there's our search placeholder.
Of course, when the user clicks on the box, it's still there until you start typing.
It's a very, very handy.
Now what's really cool is we can easily, easily style this input type.
It's not difficult.
You know what,
let me just set up this document a bit better.
So let's have HTML. Within here,
body. And let's put this input in the body.
And of course, before the body we can have a head section with the style section. And you'll see how
easy it is for us to style this input of type search.
Firstly, you've seen this before.
We can target our inputs and with CSS we can define its type.
And of course the type here is search.
And we can apply any styling we want.
It's very easy in this instance.
You'll see later on in the course I dedicate an entire section talking about styling. And some widgets
are easy to style, some are difficult.
The search is very, very easy, in fact.
And I'll show you now, you know we can change font-size, let's say 18 pixels.
Background: tomato.
Refresh the browser.
There we go.
You can already see, we're starting to add some funky styles.
What else ... you'll notice that if the user starts typing, it's black.
We can make that white, color: white.
How's this?
Yeah, it's better.
You know what? I actually don't even like that placeholder of search.
So what we can do as well, which is pretty neat.
Here's another thing we can do with CSS.
We can target its type of search,
okay?
But, what we can do is we can actually specifically style the placeholder.
How awesome is that?
And here we can make its color white, for example. Much better. And we can even add some padding.
Let's add some padding to the left just a little bit.
2 pixels.
There we go.
Just pushes it slightly, makes it look pretty cool.
So that's our placeholder.
And let's continue to style the actual input text itself.
I don't know.
We can change the font-family to Georgia.
How is that?
Hey, it's starting to look cool ðŸ˜Ž.
I don't like that border.
So let's change the border to 2 pixels,
solid black, for example.
I mean, you can see how easy this is to style, right?
We're doing nothing fancy, and yet it's starting to come together so nicely.
What about adding a slight text shadow, that could look cool.
Let's see what that looks like.
0 0 2px black.
How does that look?
I think that looks kind of cool, man.
And let's just have spacing between words like word-spacing,
5
5 pixels.
Let's just type on here.
grass.
Warthogs.
See?
Really nice spacing between those words.
I think it looks cool.
And we can change its width to say 100%.
And if we expand this, you can see the width is stretched 100% across the viewport.
Anyway, I'll stop here because I can literally keep going on, but you can see how nice you can create
these search boxes.
You can really customize it to be very intuitive, and very user friendly. (music plays)