I need to align the labels on the left hand side properly, so that the textbox and text area at the same place..I have added a class to set the width but that does not work properly.
FIDDLE
Code:
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<ul>
<li>
<label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
<input type="text" id="feedback_name">
<br>
</li>
<li>
<label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
<textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
<br>
</li>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
<button id="feedback_submit">Send</button>
</div>
css
.feedback-label-len {
width:600px;
}
I think if I were in your place, I'd just add two </br> below the labels.
They are:
On the left hand side
They are left-aligned as well.
This obviously shall give you the same effect as
label {display:block;}
Adding display: block to the labels would be a fine solution for a simple form. If you're set on putting them side by side...
label {display: block; float: left}
li {overflow: hidden
.feedback-label-len {
display: block;
}
JSFIDDLE
I would use a table.
JSFIDDLE
<form method="post" action="feedback.php">
<table id="feedbackTable">
<tr>
<th><label for="txtName">(Optional) tell us who you are</label></th>
<td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
</tr>
<tr>
<th class="message"><label for="">How can we do better?</label></th>
<td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
</tr>
<tr>
<th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
<td><input type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
</tr>
<tr>
<th><label title="Send"></label></th>
<td><input type="submit" style="color:#000000" value="Send" /></td>
</tr>
</table>
</form>
One approach you can try using is using tables in order to format the data. Using the table, tr (table row), and td (table data) html tags we can format the data in so that they are spaced correctly without using CSS!!!
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<table>
<ul>
<tr>
<td>
<li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
<td><input type="text" id="feedback_name"></td>
</tr>
<tr>
<td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
<td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>
</li></tr>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
</table>
<button id="feedback_submit">Send</button>
</div>
</body>
</html>
Just so you know this method may upset html purists. The tag was designed to actually display table data and using it for other purposes such as formatting is sometimes considered improper by old school web coders. However it I have not been able to find an actual problem caused by formatting data like this and doing so is the easiest way for you to make pages such as the one you are asking about.
I hope this answered your question, if you need me to expand on this just ask but when I ran the code above it gave me something much like you described.
Related
I am new to html, so please try to understand if i am making any silly mistake.
I am trying to create a login window like face book. i have created a login window which looks like following:
Here i have taken a table of 2 rows first row renders 2 text boxes and a login button. second consists of 'remember me' and 'forgor password' link.
Problem is that i want 2nd row of height 12px and text "remember me " to be shown in exact center of check box not as its looking a bit down in above image.
I have written some temporary inline cssto check out look:
following is my code for this section:
<table style="float:left;margin-top:1%">
<tbody>
<tr>
<td style="padding-right: 0px;background:blue;">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
</div>
</td>
<td style="padding-right: 0px;background:red">
<div class="uiStickyPlaceholderInput">
<input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
</div>
</td>
<td >
<button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
</td>
</tr>
<tr height="12" style="background:pink;">
<td height="10">
<span class="_5ajw">
<div>
<label class="_5bb4">
<input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
<span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
</label>
<input type="hidden" name="default_persistent" value="0">
</div>
</span>
</td>
<td style="margin-top:-1%;">
<a class="_5ajx" rel="nofollow" href="https://www.google.com"
style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
</td>
</tr>
</tbody>
</table>
So,please can any one tell me how to adjust css to achive above mentioned.
thanks in advance. . .
Try vertical-align:middle on the span containing the Remember me text.
On a side note, I would advice you to avoid tables for this kind of layout and achieve the same layout using divs.
Ideally, you shouldn't use a table for layout purposes.
In your example, I would try removing the margins around the checkbox, leaving only the right margin like so:
<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>
That should do the trick.
I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
I've started to design a form, and I've done it the obvious way (to me) but this really seems like the wrong way. I don't think I should be using tables, but rather CSS:
<form action="test.php">
<table>
<tr>
<td>Name</td><td><input type="text" id="prjname" size="30"/></td>
<td align="right">Design type</td><td align="right"><select id="prjdesigntype">
<option value="0" selected="selected">- Select one -</option>
</select></td>
</tr>
<tr>
<td>Description</td><td colspan="3"><input type="text" size="80" id="prjdesc" /></td>
</tr>
</table>
</form>
Can anyone suggest a better way or doing the above? Specifically, I want it to look nice, for example the lining up of the "select" box with the end of the description box like above.
I've tried using DIVs, but I can't figure out how to align text boxes on one line with a text box on a previous line.
Its better to use textarea tag for description, because input tag is not suitable for long text and it wont look good.
Probably you would do well to start using divs and css, because then you will have more control over your elements. Try this code.
<div style="width: 500px; height: auto; margin: auto;">
<form>
<input type="text" name="prjname" id="prjname" size="30" placeholder="Enter your name .." style="float:left; clear:none; padding-left: 15px;"/>
<select id="prjdesigntype"style="float: right; clear:none;" >
<option value="0" selected="selected">- Select one -</option>
</select>
<input type="text" size="80" id="prjdesc" placeholder="Enter the description .." style="float:left; clear:both; width: 500px; padding-left: 15px;"/>
</form>
</div>
Give this a go
<form action="test.php">
<div style="margin-bottom:5px;">
<div style="float:right;">
Design type
<select id="prjdesigntype">
<option value="0" selected="selected">
- Select one option
</option>
</select>
</div>
<div>
Name
<input type="text" id="prjname" size="30"/>
</div>
</div>
<div>
Description <input type="text" size="60" id="prjdesc" />
</div>
</form>
Once you get your head around it, divs and CSS are much easier than tables :)
Also, this might belong more on http://ux.stackexchange.com, but it tends to be better for usability to have all your form elements in one column rather than two, so you might wish to do that.
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.
I am not a HTML expert, just doing some fun coding once in a while. What I try to accomplish is to have the button in the "td" filling the remaining width, as simple as possible.
<table width="100%">
<tr>
<td>My Text</td>
<td>
<input name="x" id="y" type="text" size="4" maxlength="4" />
<input type="button" onclick="..." value="BlaBla" />
</td>
</tr>
<tr>
<td>Other Text</td>
<td>
<input name="xx" id="yy" type="text" size="20" />
<input type="button" onclick="..." value="MoreBlaBla" />
</td>
</tr>
</table>
I have tried width 100%, but this gives me an extra line. I have checked some answers such as Help with div - make div fit the remaining width here, but since I am not an expert in HTML it is getting too complex. Guess there is a very simple solution.
Well it can be done with JavaScript but it doesn't look that great.
A right-aligned, fixed width button looks better IMHO.
Try this
<td>
<input name="x" id="y" type="text" style="float:left;" size="4" maxlength="4" />
<input type="button" onclick="..." style="float:left;width:70%" value="BlaBla" />
</td>
Basically, there is no way to specify this using HTML+CSS. At some point pretty much everyone has wanted this, and it doesn't exist.
If you are sticking with HTML+CSS, if you have widths specified in some predictable way (either fixed lengths, or percentages), then you can calculate the right percentage (or other measure) to set for the button width. This is probably the best way.
If that is impossible, your next choice is javascript (which you should enhance with at least one of the many libraries that exist now to make javascript so much easier to use).
Try this:
<tr>
<td>My Text</td>
<td>
<input name="x" id="y" type="text" size="4" style="float:left;width:100px" maxlength="4" />
<div style="padding-left:100px"><input type="button" style="width:100%" value="BlaBla" /></div>
</td>
</tr>