+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: Looking for ways to display forms within HTML elements (/showthread.php?tid=10711)
Looking for ways to display forms within HTML elements - El Forum - 08-09-2008
[eluser]Xeoncross[/eluser]
I am looking for recommendations on how best to place HTML form elements like inputs and textareas inside of CSS customizable HTML element lists.
Standard form:
Code:
<lable for="username">Username</label>
<input type="text" name="username" value="" />The way I want to do it:
Code:
<dl>
<dt><label for="username">Username:</label></dt>
<dd>
<input type="text" name="username" value="" />
</dd>
</dl>Or even like this to show help with each item:
Code:
<dl>
<dt>Please Enter Your Username</dt>
<dd>
<label for="username">Username:</label>
<input type="text" name="username" value="" />
</dd>
</dl>Does anyone have any better ways of doing this? (Don't even recommend Tables - I want full CSS customization)
Looking for ways to display forms within HTML elements - El Forum - 08-09-2008
[eluser]ReGeDa[/eluser]
CSS:
Code:
div.formed {
width:200px;
}
ul {
list-style-type:none;
padding:0;
margin:0;
}
label {
display:block;
float:left;
width:70px;
}
input {
width:130px;
}Code:
<form>
<div class="formed">
<ul>
<li><label>Name:</label><input type="text" /></li>
</ul>
</div>
</form>Looking for ways to display forms within HTML elements - El Forum - 08-09-2008
[eluser]Xeoncross[/eluser]
[quote author="ReGeDa" date="1218332939"]
Code:
<form>
<div class="formed">
<ul>
<li><label>Name:</label><input type="text" /></li>
</ul>
</div>
</form>Yes, there is always the ol' <UL>.
That doesn't provide support for a description though.
Also, why even add the div class? Just ul.formed or form ul.
Looking for ways to display forms within HTML elements - El Forum - 08-09-2008
[eluser]ReGeDa[/eluser]
add for example. your "just" is OK!
Looking for ways to display forms within HTML elements - El Forum - 08-21-2008
[eluser]Xeoncross[/eluser]
I want more input - therefore I am forced to drastic measures.
How about this:
Code:
<table>
<tr>
<td><label for="username">Username:</label></td>
<td><input type="text" name="username" value="" /></td>
</tr>
</table>I know, I know, I am placing my life on the line with this code...
Looking for ways to display forms within HTML elements - El Forum - 08-21-2008
[eluser]ReGeDa[/eluser]
why not?
Code:
<ul>
<li><label>Smth1</label><input type="text" value="User" /></li>
<li><label>Smth2</label><input type="text" value="Nickname" /></li>
</ul>Looking for ways to display forms within HTML elements - El Forum - 08-21-2008
[eluser]erik.brannstrom[/eluser]
What was so wrong with the UL-version that you decided to table up? If you need descriptions, add a span and style ul li span to your hearts' content.
Looking for ways to display forms within HTML elements - El Forum - 08-21-2008
[eluser]Xeoncross[/eluser]
[quote author="erik.brannstrom" date="1219371201"]What was so wrong with the UL-version that you decided to table up?[/quote]
This is about finding new ideas and arrangements of HTML items to form complex forms. Shoot, if I just wanted a single thing I would just stick with DL lists which offer WAY more semantic control than a UL.
Also, you can rest assured that I would never use a table in any of my forms - I just wanted to bump this thread and needed something to put there.
Looking for ways to display forms within HTML elements - El Forum - 09-11-2008
[eluser]beemr[/eluser]
I've used <dl> for forms, and I definitely prefer it, but it can be too finicky if you need to automate parts of your form. Checkboxes and radio buttons were kinda dicey, semantics-wise.
That being said, I still prefer to use <dl>s in a number of situation, so I thought I'd build an extension to the HTML_helper.
It works with the ol() and ul() functions so you could make an ordered list of definition lists should you so desire You can find it in the wiki, titled "definition list helper". Hope you find it useful.
Looking for ways to display forms within HTML elements - El Forum - 09-11-2008
[eluser]xwero[/eluser]
I think it's a misuse of the dl tag looking at the examples in the starter topic.
If you want a jumped in input field you can make them display:block and add padding to the input tag. If you want a hint text use the title attribute of the label. semantically those options are more correct.
Css is meant to place your page element upside down if you want so take advantage of it and use the tags for their appropriate purpose.