I have too many div's what else can I use? - html

I've been doing dev on this online form submissions site and using HTML/CSS to align the fields and what not. I was doing fine until i needed to put little boxes around each section because I would have too many div's and would close each other when I don't want them to. So my question is, is there a way to explicitly tell each closing </div> to close certain div class' or should I just use another tag in general.
HTML:
<div class="print_content">
<div class="generalinfo">
<h4>User Information</h4>
<hr/>
</div>
<!--form starts-->
<form>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<!-- added div class clear to have a half class in 1 row -->
<div class="clear"></div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="abc" class="alignleft">abc</label>
<span class="left-text">abcabc</span>
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="full">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<div class="half">
<div class="nocolor">
google
</div>
</div>
</div>
</div>

I think "< ul >" with some "< li >" would be great here.
Just do it like this:
<ul>
<li class="half">
<input ...
<label ...
</li>
</ul>
Further information http://www.w3.org/TR/html401/struct/lists.html
HTML often gives you more than one (or 10) possibilities to achieve something. Generally I like your approach to use a very basic element (like a div) if you don't know a more specific one.
If you're feeling again like you're using too much divs and that there might be another solution, just search for sites which have a similar solution than your product implemented. With "F12" (most browsers) you can explore what they've used.

Related

How to get a warning that a class name is not recognized?

Today I wrote the code:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
The purpose of this code is to get a form that all of its element are in the same line. In order to make this happen, I used the class "form-inline", which is a part of Bootstrap directory. However, since I didn't loaded the Bootstrap files in the header, I got the elements in separate lines.
So I spent a lot of time to understand what is wrong with my file.
What I expect is that my browser/IDE gives an error for using an unknown class. Do you know how I can get this feature?

Why don't form tags work after a div

I have a form which has a div tag within it to help style the second part of my form into a second column. However my close form tag now doesn't work. Is there a reason why?
I have a localstorage.js which is working perfectly up until <div id="form-group">. Please, help! I'm so close to completing this page.
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr />
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</form>
You have unclosed div tags try closing them. close the <div id="form-group> and the div before <div class= "line-seprator">
You've forgotten to close a <div> tag. Use this:
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr>
</div>
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</div>
</form>
</div>
You can check markup errors with an HTML validator. This one is good enough for most cases.

Bootstrap form aligned, vertical, and horizontal

I am trying to make a pretty form that will work boostrap-responsive.css for mobile use. Before I used tables, and it worked fine without bootstrap-responsive, but now it becomes very ugly when scaled down.
What I'm trying to accomplish:
Get headline/label for each input to be in top(horizontal).
Aligned right side(so it will look pretty on a phone).
Have glyphicons prepended - this is what it makes difficult, since with them I can't format it correctly
If I am too unclear of what I want to accomplish, you can also take a look at my super hightech picture that describes the form:
http://i.imgur.com/xcvL0hp.jpg
My code half working code is:
<form class="form-vertical" ....>
<fieldset>
<div class="row-fluid">
<div class="span8 input-prepend">
<label class="control-label" for="title">Title</label>
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
<div></div>
<div class="span2 input-prepend">
<label class="control-label" for="price">Price</label>
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="controls">
<label class="control-label" for="description">Description</label>
<div class="input-prepend">
<span class="add-on"><i id="descriptionicon" class="icon-minus-sign"></i>/span>
<textarea name="description" rows="6" class="field span6" id="descriptionfield"></textarea>
</div>
</div>¨
</fieldset>
</form>
I am not sure I formatted it correctly for stackoverflow(this is my first question) so it is here too with syntax highlighting: http://pastebin.com/LzN1vbYi
I know there are tons of answers to very similar question, but that prepended glyph makes none of the code work. I tried around 15 different approaches.
you should try this form
<div class="row-fluid>
<div class="span12>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="price">Price</label>
<div class="controls">
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>`
</form>
</div>
</div>

Twitter Bootstrap - Inline Form

I have this form:
<!-- First Name-->
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Last Name-->
<div class="control-group inline">
<label class="control-label">Last Name</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Telefonnumber-->
<div class="control-group">
<label class="control-label">Telefonnumber</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Street-->
<div class="control-group">
<label class="control-label">Street</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
I want to display Last Name next to First Name and under these two field the Telefonnumber.
How can I realize this in twitter bootstrap?
btw the jsfiddle
Bootstraps has a few example form layouts that you can use here.
As per their documentation, use controls-row when you want multiple on a line. (form-inline is for the whole form to be inline). You will want to read their scaffolding documentation before going forward with using their classes.
Updated jsfiddle
PS.. HTML pointers
Don't duplicate id (and name if you can avoid it). For example, id="textinput" should be unique across the entire page. The name doesn't have to be unique, but it's best practice to just match the id.
Add for attribute to labels.

Twitter Bootstrap - Labels on top of form fields not aligned

I'm trying to create a form with form elements side by side, and their labels (aligned with the beginning of the respective input element) on top of them, like so:
Label Label2
+----------------+ +-------+
+----------------+ +-------+
The following doesn't work as expected, because "Label2" is slightly unaligned with the input element:
<div class="controls controls-row">
<label class="span9"><span>Label</span></label>
<label class="span2"><span>Label2</span></label>
</div>
<div class="controls controls-row">
<input type="text" class="span9" />
<input type="text" class="span2" />
</div>
I got it to work using this workaround-ish structure:
<div class="controls controls-row">
<div class="span9">
<label><span>Label</span></label>
</div>
<div class="span2">
<label><span>Label2</span></label>
</div>
</div>
<div class="controls controls-row">
<div class="span9">
<input type="text" class="span12" />
</div>
<div class="span2">
<input type="text" class="span12" />
</div>
</div>
So could this be a bug? Because on the Twitter Bootstrap page it says:
Use .span1 to .span12 for inputs that match the same sizes of the grid columns.
Here's a JSFiddle that reproduces my problem.
Probably the easiest fix is to remove the whitespace in the HTML between the two inputs:
<input type="text" class="span9" />
<input type="text" class="span2" />
to:
<input type="text" class="span9" /><input type="text" class="span2" />
I managed to do it using grid system:
<div class="row-fluid">
<div class="span9">
<label>First name</label>
<input name="firstName" class="span12" placeholder="First name" type="text">
</div>
<div class="span3">
<label>Last name</label>
<input name="lastName" class="span12" placeholder="Last name" type="text">
</div>
</div>
The reason it's misaligned is a whitespace after first <input>. This whitespace seems to be an old browsers "feature": they add Unicode SPACE (U+0020) character after an <input> immediately followed by other <input>, unless they are on the same line in the markup.
You can reduce ancestor's font size to 0, so this space won't be visible:
.controls.controls-row { font-size: 0; }​