I want to add a contact form to the site, but I don’t quite understand how to make the form fields floating ( input type="text" ), because the input field has a fixed width ( size attribute)?

  • 2
    Have you tried to give fields a percentage width? - Telion

3 answers 3

For example:

 input { width: 100%; } 
 <form > <input type="text" size="200"> </form>

Or using media queries (adaptive times):

 input { width: 50%; } @media screen and (min-width: 420px) { input { width: 100%; } } 
 <form > <input type="text" size="200"> </form>

PS: The point is that even if the size attribute is set, you can control the width of the input field using styles.

    Also an option, right?

     form input {display: block; width: 70%; margin: 15px auto;} form button {float: right; margin-right: 15%;} @media only screen and (max-device-width: 450px){ form input {width: 90%;} form button {margin-right: 5%;} } 
     <form> <input type="text" placeholder="ИМЯ"/> <input type="email" placeholder="EMAIL"/> <input type="password" placeholder="ПАРОЛЬ"/> <button type="submit">Готово</button> </form>

    And the size attribute of input is completely optional, just like the textarea attributes have cols and rows .

      1. Look at any ready-made CSS library, for example Bootstrap - the most popular, I think.

      2. size can be specified as a percentage of the screen size.

      • Why does a person who is barely in html \ css have any idea to advise all sorts of bootstraps, then he will have a mess in his head, and from such a G you should leave, there are more elegant solutions than bootstrap. ps Smart-grid - Vearo
      • Smart Grid? Do you seriously think the beginner is easier to master than the Bootstrap? Does it have any documentation at all? I suggested maybe not the most lightweight option, but the easiest one for a beginner. - Igor Kudryashov