Databases
StackOverflow2013
Postsdbo
POIs there a more efficient way to group-up a label with an input field so that they become block-like?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there a more efficient way to group-up a label with an input field so that they become block-like?
    primarykey
    data
    text
    <p>I want to make a HTML form for a webpage that is re-size-able ranging form full HD to smartphones. I want the distance form the label to the input to be the same distance such that if the form was to be placed in a div that for instance is 600px and the label and input field as line totals to 300px (including padding,margin, etc) that the fields order in 2 columns. If the div than after re-size would become 900px the form would spread over 3 columns.</p> <p>The fields should then be ordered in the following manner:</p> <p>with 2 columns:</p> <pre><code>F1 F4 F2 F5 F3 F6 </code></pre> <p>with 3 columns:</p> <pre><code>F1 F3 F5 F2 F4 F6 </code></pre> <p>Now since i am relatively new to HTML and CSS i personally would do this with a lot of div's but that seems a little bit redundant or just as really bad coding. I tried to do this with a <code>&lt;span style="width:300px;"&gt;</code> but the span wont be 300 px nor will it include the input field. </p> <p>my current form:</p> <pre><code> &lt;div class='main_text' style='width:55%;padding-left:10%;padding-right:10%;'&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;input id="name" type="text" value='Name'/&gt;&lt;br /&gt; Age: &lt;input id="age" type="text" value='21'/&gt;&lt;br /&gt; Insterests: &lt;input id="interests" type="text" value='Socer'/&gt;&lt;br /&gt; Targets: &lt;input id="targets" type="text" value='stop smoking for at least 2 years'/&gt;&lt;br/&gt; Other: &lt;input id="other" type="text" value='I have 3 cats'/&gt;&lt;br /&gt; &lt;/div&gt; </code></pre> <p>So the question in short is:</p> <p>Is there a more efficient way to group-up a label with an input field so that they become block-like?</p> <p>P.S. Im using XHTML 1.0 transitional</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USthomaux
    1. USRandom Programmer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIs there a more efficient way to group-up a label with an input field so that they become block-like?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou can use `<label for="someID">` to logically group elements. http://www.w3schools.com/tags/tag_label.asp
      singulars
      1. POIs there a more efficient way to group-up a label with an input field so that they become block-like?
      1. USJeroen Vannevel
    2. COSemantically speaking, using a span to group your elements is no different than using a div.
      singulars
      1. POIs there a more efficient way to group-up a label with an input field so that they become block-like?
      1. UScimmanon
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload