O'Reilly logo

Mastering HTML5 Forms by Gaurav Gupta

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making our form responsive

In earlier chapters, from basics of the form we learned how to style, validate, and link our form with the database. In this section, we will learn how to make our form responsive.

We will re-use our form that we styled earlier and will see the new technique with which we can make our forms responsive.

The HTML code remains the same except that the following links are added to the <head> tag of the HTML page.

The following first line mentioned is the viewport <meta> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The second line is an external media query (explained for example). The code is maintained in a separate file but the media query is written in the <head> tag.

The following mentioned ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required