Say I have the following text input element:
<input type="text" value="Bruno">
Can I make the "B" in the value Bold? So it looks like Bruno?
I know it is pretty straightforward within <span> and <div> elements:
<span><strong>B</strong>runo</span>
But is this possible with an <input> element? If so, would the value still remain the same regardless of the styling applied to it?
An <input> or <textarea> element on it's own won't support this type of behavior. You could use an approach that would hide your actual element and use a facade to copy the values from your element and output them as raw HTML into a <div> to be displayed :
<!-- An element to handle typing your content that calls a function -->
<input id='input' onkeyup='updateOutput(value);' />
<hr />
<!-- Your output element (to display your content) -->
<div id='output'></div>
<script>
// A function to map your content and output it in your "output" element
function updateOutput(html){
document.getElementById('output').innerHTML = html;
}
</script>
You can see an example of this here and demonstrated below :
A better alternative might be to use a Javascript-based HTML editor like TinyMCE or CKEditor.
Related
I have discover a way to have an input and label elements as an accordion viewer.
To center vertically my elements I use the label as if it was a div, that is, giving it display:table and create a div inside it.
So I have :
<div>
<input id='myid'>
<label for ='myid' style='display table'>
<div style='display:table-cell'>
<img ....... >
thetextforthelabel
</div>
</label>
</div>
Ok, this works fine.
My question is: am I doing something 'forbiden' ?
Can I use the label tag as a container ?
I know that it can be not orthodox .. but It works for me...
Your code is invalid.
The problem is that div elements can only be used
Where flow content is expected.
However, the content model of label elements is
Phrasing content, but with no descendant labelable elements
unless it is the element's labeled control, and no descendant
label elements.
Anyways, it will probably work, because (unlike e.g. p elements) the end tag of label elements can't be omitted:
Neither tag is omissable
However, I'm not sure of the advantage of having a table element with a single cell. Consider using the following instead:
<div>
<input id='myid'>
<label for='myid' style='display:block'>
<img ....... >
thetextforthelabel
</label>
</div>
Yes, it is forbidden by the formal rules of HTML. And yes, it works, and the parsing rules of HTML mean that it must work. So this is different from, say, the rule that says that a p element must not contain a div element; that rule is enforced by the parsing process (the p element is implicitly closed when <div> is encountered).
On the other hand, if the content is just an image and text, you don’t need a div element but can use span. In rendering, it does not matter (with the usual CSS caveats) which one you select, since their only difference in rendering is with the default display value, and you are assigning a display value anyway.
<div>
<input id='myid'>
<label for ='myid' style='display table'>
<span style='display:table-cell'>
<img src="http://lorempixel.com/100/50" alt="(an image)">
thetextforthelabel
</span>
</label>
</div>
I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>
I've got a few lines that look like this:
<input type="hidden" name="email" value="email#email.com" style="display:none" >
Each one is adding extra space, even though I've used the type hidden and display:none. I'm starting to think it's something in the CSS (http://www.pastebin.ca/2350649), but after changing up a few things can't find what is causing it either.
The input is all inside a form, if that makes a difference.
It's not the input element, but rather the html. If you have a setup like:
text
<input>
more text
The newlines/spaces between the text and the input element are rendered.
The simplest solution is of course to just remove that whitespace in your html when it's emitted. If you can't do that, one trick is to add font-size: 0 to the container and font-size ? to the individual elements to display.
http://jsfiddle.net/ExplosionPIlls/cs63w/
step1: add your codes in a div element with an id tag like this:
<div id="remove_br"><input type="hidden" name="email" value="email#email.com" style="display:none" ></div>
step2: add this jQuery code in your page before </html> tag:
<script type="text/javascript">
$("#remove_br").find('br').remove()
</script>
Note: don't forget to add this code for calling jQuery
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
For beginner programmer: If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
Adding jQuery to Your Web Pages click here.
I'm just wondering what are you thinking about DIV-tag inside FORM-tag?
I need something like this:
<form>
<input type="text"/>
<div> some </div>
<div> another </div>
<input type="text" />
</form>
Is it general practice to use DIV inside FORM or I need something different?
It is totally fine .
The form will submit only its input type controls ( *also Textarea , Select , etc...).
You have nothing to worry about a div within a form.
It is completely acceptable to use a DIV inside a <form> tag.
If you look at the default CSS 2.1 stylesheet, div and p are both in the display: block category. Then looking at the HTML 4.01 specification for the form element, they include not only <p> tags, but <table> tags, so of course <div> would meet the same criteria. There is also a <legend> tag inside the form in the documentation.
For instance, the following passes HTML4 validation in strict mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>
You can use a <div> within a form - there is no problem there .... BUT if you are going to use the <div> as the label for the input dont ... label is a far better option :
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
It is wrong to have <input> as a direct child of a <form>
And by the way <input /> may fail on some doctype
Check it with http://validator.w3.org/check
document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
<input type="text" />
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Your question doesn't address what you want to put in the DIV tags, which is probably why you've received some incomplete/wrong answers. The truth is that you can, as Royi said, put DIV tags inside of your forms. You don't want to do this for labels, for instance, but if you have a form with a bunch of checkboxes that you want to lay out into three columns, then by all means, use DIV tags (or SPAN, HEADER, etc.) to accomplish the look and feel you're trying to achieve.
Definition and Usage
The tag defines a division or a section in an HTML document.
The tag is used to group block-elements to format them with
styles.
http://www.w3schools.com/tags/tag_div.asp
Also DIV - MDN
The HTML element (or HTML Document Division Element) is the
generic container for flow content, which does not inherently
represent anything. It can be used to group elements for styling
purposes (using the class or id attributes), or because they share
attribute values, such as lang. It should be used only when no other
semantic element (such as or ) is appropriate.
You can use div inside form, if you are talking about using div instead of table, then google about Tableless web design
As the others have said, it's all good, you can do it just fine. For me personally, I try to keep a form of hierarchical structure with my elements with a div being the outer most parent element. I try to use only table p ul and span inside forms. Just makes it easier for me to keep track of parent/children relationships inside my webpages.
I noticed that whenever I would start the form tag inside a div the subsequent div siblings would not be part of the form when I inspect (chrome inspect) henceforth my form would never submit.
<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
I figured that if I put the form tag outside the DIVs it worked. The form tag should be placed at the start of the parent DIV. Like shown below.
<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
Absolutely not! It will render, but it will not validate. Use a label.
It is not correct. It is not accessible. You see it on some websites because some developers are just lazy. When I am hiring developers, this is one of the first things I check for in candidates work. Forms are nasty, but take the time and learn to do them properly
No, its not
<div> tags are always abused to create a web layout. Its symbolic purpose is to divide a section/portion in the page so that separate style can be added or applied to it. [w3schools Doc] [W3C]
It highly depends on what your some and another has.
HTML5, has more logical meaning tags, instead of having plain layout tags. The section, header, nav, aside everything have their own semantic meaning to it. And are used against <div>
I have this type of markup:
<div class="box" href="pic-gallery/img01.jpg">
<div>----------</div>
</div>
Now as I am going to validate this it is showing error as href inside a div is not allowed. So how to validate this error? I had used:
<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>
but it is not opening the image as picture is coming through the fancybox. So please help me out. Any help and suggestions will be highly appreciated.
href isn't a valid attribute for div, just a and area. Your best bet is to use an actual link (an a element). You can use styling (display: block) to make it shown as a block on modern browsers (not, sadly, on some older versions of IE), and since its content model is transparent, you could put a div inside it. All of the examples on the Fancybox howto page show using an a element, not a div.
So perhaps
<a class="box" href="pic-gallery/img01.jpg">
<div>----------</div>
</a>
...where the "box" class includes display: block. Or if you use that class places where you don't want block display, break out the display: block and apply it separately (via another class or inline style attribute).
With fancybox, you can show your images by putting their path inside links:
<a class="box" href="pic-gallery/img01.jpg"></a>
This will be identified by fancybox based on link's class eg box and will be opened by fancybox.
This is expected - the href attribute is not valid on a <div> element. As T.J. said above, it would be best to use an actual <a> element to do this - it makes more semantic sense. You could even nest the <a> inside the outer <div> and hide it with CSS, so non-JS enabled users don't see redundant markup.
Instead of this code.
<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>
Try this
<script type="text/javascript">function open_win(){window.open("pic-gallery/img01.jpg");}</script><div class="box" onclick="javascript:open_win();"></div>
But how do you want to open the image?
I know this is unusual but you could still open an image (or any other type of content) in fancybox adding the onclick attribute to the <div> (or any other tag other than the <a> tag) and without using the href attribute.
You may have this (valid) html:
<div class="box" onclick="openFancybox('pic-gallery/img01.jpg');">
<div>whatever here</div>
</div>
and use this script:
<script type="text/javascript">
function openFancybox(url){
$.fancybox({
'href': url,
'type': 'image' //select the proper type of content
});
}
</script>
what you are doing is passing the url to the function instead of using href