Sharingan no Google
Tags: braziliandevs, html, beginners
Published: 2024-03-29 03:15:37


> Sharingan é uma técnica de ninjutsu do clã Uchiha, que é uma das mais poderosas técnicas do mundo ninja. O Sharingan é conhecido por sua capacidade de copiar qualquer técnica de um oponente, além de poder ver através de genjutsus, taijutsus e ninjutsus.

Citação aleatória apenas para dizer que fiz uma "cópia" da página do Google...

## Contexto

Comecei um curso de programação web na [CS50W](), para rever alguns conceitos e treinar o idioma inglês.

O primeiro projeto desse curso é criar uma página web com alguns recursos de pesquisa, direcionando para o Google.

### Página de principal
Inicialmente, a página principal deve conter um formulário de pesquisa, com um campo de texto e um botão de pesquisa.

O que eu desconhecia era que na tag `<form>` é possível adicionar o atributo `action` que direciona para URL específicas da web Google junto com uma tag `<input>` e um atributo `name` que é usado como parâmetro de pesquisa.

```html
<form action="https://www.google.com/search">
    <input type="text" name="q">
    <input type="submit" value="Google Search">
</form>
```

- `<form>`: tag que define um formulário HTML para entrada de dados do usuário.
- `action`: atributo que especifica para onde enviar os dados do formulário.
- `<input>`: tag que define um campo de entrada onde o usuário pode inserir dados.
- `type="text"`: atributo que especifica o tipo de entrada do campo como texto.
- `name="q"`: atributo que especifica o nome do campo de entrada, indicando o 'q' de query.
- `type="submit"`: atributo que especifica um botão de envio para enviar o formulário.
- `value="Google Search"`: atributo que especifica o texto do botão de envio.

### Página de pesquisa

Fazendo uma busca qualquer, como "Sharingan":

![Formulário de pesquisa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xisd4rmyiklsrde4bee.png)

Veja o que acontece com o link ao submeter a busca:

![Link: https://www.google.com/search?q=sharingan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kscgymk2pl3l8nrjv9rg.png)

Nesse momento, o parâmetro `q` é concatenado com o valor digitado `value` "sharingan", formatando como uma query de pesquisa.

### Direcionando a pesquisa

Outro ponto interessante é a possibilidade de adicionar mais parâmetros e valores para direcionar a busca, por exemplo, em imagens:

```html
<form action="https://google.com/search">
    <input name="tbm" value="isch" type="hidden">
    <input type="text" name="q">
    <input type="submit" value="Images Search">
</form>
```

Aqui definimos o parâmetro `tbm` (**t**o **b**e **m**atched) com o valor `isch` (**i**mage **s**ear **ch**), os quais são especificos para pesquisa de imagens. Note que ele é do tipo `hidden`, ou seja, não é visível ao usuário.

Fazendo uma busca por "Sharingan" novamente:

![Formulário de pesquisa de imagens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2i7459tobeyj2ude8x6.png)


Veja como o link é formatado:

![Link: https://www.google.com/search?tbm=isch&q=sharingan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhn2mf7b5koac4nvxnbr.png)

Os parâmetros e valores são concatenados com o link de pesquisa, direcionando para uma busca mais detalhada.

## Então...
Um input com o atributo `name="tbm"` pode receber valores diferentes para direcionar a pesquisa para outros tipos de conteúdo, como:
- vídeos (`value="vid"`)
- notícias (`value="nws"`)
- livros (`value="bks"`)
- blog (`value="blg"`)
- discussões (`value="dsc"`)
- aplicativos (`value="app"`)
- compras (`value="shop"`)

Experimente fazer uma página para testar esses parâmetros e valores, e veja o que acontece!

Enjoy!