Can I use @media on my HTML page?

Question

I would like to use @media in my html page, but I don't know if this is possible or not.

I saw how W3schools do this:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

So, I thought, maybe I can do this:

<form>
    <input id="submit" type="submit" value="zoeken" media="(min-width: 613px)">
    <input id="submit" type="submit" value="*" media="(max-width: 613px)">
    <input type="text" name="search" placeholder="Artikelen..">
</form>

So, I tried to show button 1 if it is below 613px, and the other if it is above 613px. But he just shows them next to each other. Is it possible that this multimedia tool is only possible with <picture>and <video>?

---

Update

The answer taught me this is only possible with some tags.

I could get it to work with media queries with display:nonefor example:

<form>
    <input id="submit" type="submit" value="zoeken" class="bigger680">
    <input id="submit" type="submit" value="..." class="smaller680">
    <input type="text" name="search" placeholder="Artikelen..">
</form>

<style>
    @media only screen and (max-width: 680px) {
        .bigger680{
            display: none;
        }
    }

    @media only screen and (min-width: 680px) {
        .smaller680{
            display: none;
        }
    }
</style> 

Answer 1

, a, area link, : http://www.w3schools.com/tags/att_media.asp

, . HTML , CSS . CSS-/ CSS.

, - . , , , html .