0

I have to design a form similar to this one: form

The form you see has been designed using a table design: each label and each input field is contained in a <td>, the brown separators (e.g. "picture") are <tr> having only one ("colspanned") cell .

I want to make this form responsive, what I need is just a fluid layout that, according to the screen width:

  1. put the label above its input field (instead of on the left)
  2. put the fields one below each other (one row, one field)

I have redesigned the form using <div> instead of tables and I managed to get what I wanted using something like

label{
    float:left;
}

@media (max-width: 600px) {
    label{
        display:block;
    }
}

The problem is that the fields are not vertical aligned as in the original form. I've seen several examples on stackoverflow about how to vertical align form fields without using tables but they all require to know the max width of the labels. I don't know that, the form is dynamically generated according to the schema of a database, also the number of fields and how the user want to distribute them in the form (e.g. one in the first row, two in the second, ...) is something I don't know in advance.

I also tried to use a display:table-cell approach, like the one explained here: is such alignment achievable without <table>? and here https://softwareengineering.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs but I finally couldn't make the form responsive as I want.

I would also be happy to keep a table layout, moving to a <div> design is not a requirement, but I don't know how to make the form responsive using CSS media rules if I keep a table-based design.

Just to summarize: both table-based and div-based design would be fine for me, if I can get

  1. A responsive form (I couldn't get it using a table-based design)
  2. Vertical aligned fields (I couldn't get it using a div-based design)
Community
  • 1
  • 1
Eugenio
  • 3,195
  • 5
  • 33
  • 49

1 Answers1

0

You can add CSS rules to the HTML form elements that you want to use.

If you have a form element inside a div element you can simply set the width for the form elements to make it responsive.

HTML:

<div>
  <form>
    <input type="text" name="firstname" placeholder="First name">
    <input type="text" name="lastname" placeholder="Last name">
  </form>
</div>

CSS:

div {
  width: 100%;
}

div input {
  min-width: 80%;
}

*Better use vh, vw units instead of % for better practice.

flux
  • 108
  • 8
  • there is no labels in your example and vertical alignment is not guaranteed. – Eugenio Jun 05 '16 at 12:17
  • Maybe I couldn't understand your question properly. can you share your code? to edit the label text vertical align use padding/margin.. – flux Jun 05 '16 at 12:49
  • The aim is to get a form exactly like the one you see in the screenshot and make it responsive. The alignment requirement: as you can see, the input for "last" is aligned with the input of "city"; for another example related to this alignment requirement see http://stackoverflow.com/questions/11021567/is-such-alignment-achievable-without-table – Eugenio Jun 05 '16 at 14:50