This question already has answers here:
Give border title in div
(4 answers)
Closed 7 years ago.
I guess its really simple, but I cant find it as I'm don't know how it is called.
I want to make a border with a title, something like this:
----TITLE_HERE----------------------------------
You can use the <fieldset> and <legend> tags to achieve this, as demonstrated in the code below pulled from this answer:
<div id="form" style="width:350px;">
<fieldset>
<legend style="color:blue;font-weight:bold;">General Information</legend>
<table>
<tr>
<td><span style="text-decoration:underline">C</span>hange Password To:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span style="text-decoration:underline">C</span>onfirm Password:</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
</div>
I think you're going for something like this :
fieldset {
border : none;
border-top : 1px solid #000;
}
<fieldset>
<legend>Title</legend>
Here is some demo content
</fieldset>
See also this Fiddle.
Related
This question already has answers here:
Align form elements in CSS
(3 answers)
Closed 6 years ago.
I'm new to HTML, this being my first project. I'm trying to design a simple calculator, identical to this image.
The problem I'm having is I can't find a simple way to put spacing between the labels i.e "term, interest rate" and the input boxes meaning the layout looks poor. The easiest I've found is adding loads of  's but that seems ludicrous.
For example in the code below how can I get spacing between the "Term" and the input box?
<form>
<label>
Term <input name ="term" type ="text"/>
</label>
</form>
.table tr td{
text-align:right;
}
/*this sets padding space */
.table tr td{
padding-top:10px;
}
<form>
<table class="table">
<tr>
<td>
<label> Term </label>
</td>
<td><input name ="term" type ="text"/></td>
</tr>
<tr>
<td>
<label> Rate Blah Blah </label>
</td>
<td><input name ="blahblah" type ="text"/></td>
</tr>
</table>
</form>
you can use it like this
I am trying to add background color to a input box with
<td bgcolor = "color" >< foo>=</td>
my code look like this
<td bgcolor = "#fa8072">< some text goes here <input size="20"
name="pname" value="Bob"></td>
but I do not get any color. Can someone clarify how to write this?
This is because, if you only have the above code, you don't have a <table> tag to go along with the <td>. Instead, use this:
<table>
<tr>
<td bgcolor = "#fa8072">
< some text goes here
<input size="20" name="pname" value="Bob">
</td>
</tr>
</table>
Demo: https://jsfiddle.net/cp2xa4dp/3/
Try:
<td style="background-color: #fa8072"> some text goes here <input size="20" name="pname" value="Bob"></td>
JSFiddle: https://jsfiddle.net/suomyone/gvaxeu8g/
Ps. You're also missing the <table> and <tr> tags.
Im trying to do a linethrough over a label + checkbox both in a separate td.
In my example code I have created 2 tables:
Currently only table 1 is doing a line-through when checkbox = checked. I guess this is working because both elements share a td. Is there a way to fix this so table 2 can line-through instead of table 1? Thanks!
HTML:
<table id = "1">
<tr>
<td>
<input id="oregano" type="checkbox" class="checkedBox" />
<label for="oregano" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table id = "2">
<tr>
<td><input id="oregano" type="checkbox" class="checkedBox" /></td>
<td><label for="oregano" class="checkedLabel">Oregano</label></td>
</tr>
</table>
Stylesheet:
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue
}
Fiddle
http://jsfiddle.net/gdmpz506/
That is because you have a different syntax for each table.
If you put the checkbox and label in the same td in the second table it will work just fine. (and of-course make the id unique so that the second label does not point to the first element..)
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue;
}
<table>
<tr>
<td>
<input id="oregano-1" type="checkbox" class="checkedBox" />
<label for="oregano-1" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table>
<tr>
<td id="checktd">
<input id="oregano-2" type="checkbox" class="checkedBox" />
<label for="oregano-2" class="checkedLabel">Oregano 2</label>
</td>
</tr>
</table>
Demo at http://jsfiddle.net/gaby/gdmpz506/1/
It works in table 1 because there the input and label elements are siblings, i.e. children of the same element. It is irrelevant that the parent happens to be a td element. You are correctly using the “next sibling” operator +. (Here I’m assuming that you really want just the label struck out.)
The same is not possible when the input and label elements are not siblings, as they cannot be if they are in different td elements. There are no CSS selectors at present to handle such cases. You would need JavaScript to make checking a checkbox strike out the corresponding label.
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.
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.