CODEWITHSUNDEEP
htmlforms
MTB Lover
MTB Lover

Reputation: 33

Making an HTML form responsive

I'm studying the HTML5 and CSS3 code and I have created my first form.

I have this problem: how can I make my form responsive?

I have this code:

<fieldset>
<legend>Prenota il Servizio</legend>
<table>
<tr>
<td>
<label for="nome">Nome*</label>
</td>
<td>
<input type="text" name="nome" autofocus required size="30">
</td>
<td>
<label for="cognome">Cognome*</label>
</td>
<td>
<input type="text" name="cognome" autofocus required size="30">
</td>
</tr>
</table>
</fieldset>

But what can I do to make this responsive?

Upvotes: 0

Views: 3984

Answers (3)

ankit chauhan
ankit chauhan

Reputation: 5

<!DOCTYPE html>
<html>
  <head>
    <title>BUG-13</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <style>
    

    .fieldset
    {
    width:50%;
    }
    .form-inline
    {
    height: 11px;
    width: 80%;
    border: 1px solid #928383;
    margin-left: 15px;
    }
    @media only screen and (max-width: 360px)
    {
    .fieldset
    {
    font-size: 10px;
    color:red;
    font-size:10px;
    }
    }
    </style>   
  </head>
  <body>
    <fieldset class="form">
      <legend>Prenota il Servizio</legend>
      <table>
        <tr>
          <td>
            <label for="nome">Nome*</label>
          </td>
          <td>
            <input class="form-inline" type="text" name="nome" autofocus required size="30">
          </td>
          <td>
           <label for="cognome" style="padding-left: 14px;">Cognome*</label>
          </td>
          <td>
            <input   class="form-inline" type="text" name="cognome" autofocus required size="30">
          </td>
        </tr>
      </table>
    </fieldset>
  </body>
</html>

Upvotes: 0

user1781710
user1781710

Reputation:

In modern Web 3.0 development "Responsive Design" involves CSS3 media queries.

They look something like this:

// Smartphone Version

@media (min-width: 200px) {

    form {
          width: 150px;
          height: 500px;
    }

}


// Tablet version

@media (min-width: 700px) {

    form {
          width: 350px;
          height: 500px;
    }

}

// Full computer version

@media (min-width: 1024px) {

    form {
          width: 900px;
          height: 500px;
    }

}

This is a very simple example. The principal is, use CSS to detect what kind of screen (or other factor, there are many many) and then apply these style rules (inside the {…}) for that screen (or other criteria).

Have a look here for details from Mozilla Dev Network: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

There is also a starter solution over at http://www.initializr.com (choose the responsive template and build it out).

Upvotes: 4

Th3BFG
Th3BFG

Reputation: 315

I'm guessing that you want to be reading about the Form tag.

Example:

<form action="demo_form.asp" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Upvotes: 0

Related Questions