Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
HTML being the most widely used language (at least as a markup language) has not gotten its due credit.
Considering that it has been around for so many years, things like the FORM / INPUT controls have still remained same with no new controls added.
So at least from the existing features, do you know any features that are not well known but very useful.
Of course, this question is along the lines of:
Hidden Features of JavaScript
Hidden Features of CSS
Hidden Features of C#
Hidden Features of VB.NET
Hidden Features of Java
Hidden Features of classic ASP
Hidden Features of ASP.NET
Hidden Features of Python
Hidden Features of TextPad
Hidden Features of Eclipse
Do not mention features of HTML 5.0, since it is in working draft
Please specify one feature per answer.
Using a protocol-independent absolute path:
<img src="//domain.example/img/logo.png"/>
If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll request it with HTTP.
This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.
Caveat: When used on a <link> or #import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.
The label tag logically links the label with the form element using the "for" attribute. Most browsers turn this into a link which activates the related form element.
<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
The contentEditable property for (IE, Firefox, and Safari)
<table>
<tr>
<td><div contenteditable="true">This text can be edited<div></td>
<td><div contenteditable="true">This text can be edited<div></td>
</tr>
</table>
This will make the cells editable! Go ahead, try it if you don't believe me.
I think the optgroup tag is one feature that people don't use very often. Most people I speak to don't tend to realise that it exists.
Example:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
My favourite bit is the base tag, which is a life saver if you want to use routing or URL rewriting...
Let's say you are located at:
www.anypage.example/folder/subfolder/
The following is code and results for links from this page.
Regular Anchor:
Click here
Leads to
www.anypage.example/folder/subfolder/test.html
Now if you add base tag
<base href="http://www.anypage.example/" />
Click here
The anchor now leads to:
www.anypage.example/test.html
<img onerror="{javascript}" />
onerror is a JavaScript event that will be fired right before the little red cross (in IE) picture is shown.
You could use this to write a script that will replace the broken image with some valid alternative content, so that the user doesn't have to deal with the red cross issue.
On the first sight this can be seen as completely useless, because, wouldn't you know previously if the image was available in the first place? But, if you consider, there are perfect valid applications for this thing; For instance: suppose you are serving an image from a third-party resource that you don't control. Like our gravatar here in SO... it is served from http://www.gravatar.com/, a resource that the stackoverflow team doesn't control at all - although it is reliable. If http://www.gravatar.com/ goes down, stackoverflow could workaround this by using onerror.
The <kbd> element for marking up for keyboard input
Ctrl+Alt+Del
<blink>
Must be used for anything important on the site. Most important sites wrap all of content in blink.
<marquee>
Creates a realistic scrolling effect, great for e-books etc.
Edit: Easy-up fellas, this was just an attempt at humour
Not very well known but you can specify lowsrc for images which will show the lowsrc while loading the src of the image:
<img lowsrc="monkey_preview.png" src="monkey.png" />
This is a good option for those who don't like interlaced images.
A little bit of trivia: at one point this property was obscure enough that it was used to exploit Hotmail, circa 2000.
DEL and INS to mark deleted and inserted contents:
HTML <del>sucks</del> <ins>rocks</ins>!
The button tag is the new input submit tag and a lot of people are still not familiar with it. The text in the button can for example be styled using the button tag.
<button>
<b>Click</b><br />
Me!
</button>
Will render a button with two lines, the first says "Click" in bold and the second says "Me!". Try it here.
Specify the css for printing
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
the <dl> <dt> and <dd> items are often forgotten and they stand for Definition List, Definition Term and Definition.
They work similarly to an unordered list (<ul>) but instead of single entries it's more like a key/value list.
<dl>
<dt>What</dt><dd>An Example</dd>
<dt>Why</dt><dd>Examples are good</dd>
</dl>
Not exactly hidden, but (and this is IE's fault) not enough people know about thead, tbody, tfoot for my tastes. And how many of you knew tfoot is supposed to appear above tbody in markup?
The wbr or word-break tag. From Quirksmode:
(word break) means: "The browser
may insert a line break here, if it
wishes." It the browser does not think
a line break necessary nothing
happens.
<div class="name">getElements<wbr>ByTagName()</div>
I give the browser the option of
adding a line break. This won't be
necessary on very large resolutions,
when the table has plenty of space. On
smaller resolutions, however, such
strategically placed line breaks keep
the table from growing larger than the
window, and thus causing horizontal
scrollbars.
The there is also the HTML entity mentioned on the same page. This is the same as wbr but when a break is inserted a hypen (-) is added to signify a break. Kind of like how it is done in print.
An example:
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
A much underused feature is the fact that just about every element, that provides visible content on the page, can have a 'title' attribute.
Adding such an attribute causes a 'tooltip' to appear when the mouse is 'hovered' over the element, and can be used to provide non-essential - but useful - information in a way that doesn't cause the page to become too crowded. (Or it can be a way of adding information to an already crowded page)
Applying multiple html/css classes to one tag. Same post here
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
We all know about DTD's or Document Type Declarations (those things which make you page fail with the W3C validator). However, it is possible to extend the DTDs by declaring an attribute list for custom elements.
For example, the W3C validator will fail for this page because of behavior="mouseover" added to the <p> tag. However, you can make it pass by doing this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>
See more at about Custom DTDs at QuirksMode.
We can assign base 64 encoded string as a source/href attribute of image, JavaScript,iframe,link
e.g.
<img alt="Embedded Image" width="297" height="246"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />
div.image {
width:297px;
height:246px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}
<image>
<title>An Image</title>
<link>http://www.your.domain</link>
<url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>
<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
References
How can I construct images using HTML markup?
Binary File to Base64 Encoder / Translator
I recently found out about the fieldset and label tags. As above, not hidden but useful for forms.
<fieldset> explanation
Example:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
You can use the object tag instead of an iframe to include another document in the page:
<object data="data/test.html" type="text/html" width="300" height="200">
alt : test.html
</object>
<optgroup> is a great one that people often miss out on when doing segmented <select> lists.
<select>
<optgroup label="North America">
<option value='us'>United States</option>
<option value='ca'>Canada</option>
</optgroup>
<optgroup label="Europe">
<option value='fr'>France</option>
<option value='ir'>Ireland</option>
</optgroup>
</select>
is what you should be using instead of
<select>
<option value=''>----North America----</option>
<option value='us'>United States</option>
<option value='ca'>Canada</option>
<option value=''>----Europe----</option>
<option value='fr'>France</option>
<option value='ir'>Ireland</option>
</select>
Most are also unaware of the fact that you can distinguish the form button pressed by just giving them a name/value pair. E.g.
<form action="process" method="post">
...
<input type="submit" name="edit" value="Edit">
<input type="submit" name="delete" value="Delete">
<input type="submit" name="move_up" value="Move up">
<input type="submit" name="move_up" value="Move down">
</form>
In the server side, the actual button pressed can then be obtained by just checking the presence of the request parameter associated with the button name. If it is not null, then the button was pressed.
I've seen a lot of unnecessary JS hacks/workarounds for that, e.g. changing the form action or changing a hidden input value beforehand depending on the button pressed. It's simply astonishing.
Also, I've seen almost as many JS hacks/workarounds to gather the checked ones of multiple checkboxes like as in table rows. On every select/check of a table row the JS would add the row index to some commaseparated value in a hidden input element which would then be splitted/parsed further in the server side. That's result of unawareness that you can give multiple input elements the same name but a different value and that you can still access them as an array in the server side. E.g.
<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...
The unawareness would give each checkbox a different name and omit the whole value attribute. In some JS-hack/workaround-free situations I've also seen some unnecessarily overwhelming magic in the server side code to distinguish the checked items.
Colgroup tag.
<table width="100%">
<colgroup>
<col style="width:40%;" />
<col style="width:60%;" />
</colgroup>
<thead>
<tr>
<td>Column 1<!--This column will have 40% width--></td>
<td>Column 2<!--This column ill have 60% width--></td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
If the for attribute of a <label> tag isn't specified, it is implicitly set as the first child <input>, i.e.
<label>Alias: <input name="alias" id="alias"></label>
is equivalent to
<label for="alias">Alias:</label> <input name="alias" id="alias">
Button as link, no JavaScript:
You can put any kind of file in the form action, and you have a button that acts as a link. No need to use onclick events or such. You can even open-up the file in a new window by sticking a "target" in the form. I didn't see that technique in application much.
Replace this
Download file
with this:
<form method="get" action="myfile.pdf" target="_blank">
<input type="submit" value="Download file">
</form>
Simplest way to refresh the page in X seconds - META Refresh
<meta http-equiv="refresh" content="600">
The value in content signifies the seconds after which you want the page to refresh.
[Edit]
<meta http-equiv="refresh" content="0; url=foobar.example/index.html">
To do a simple redirect!
(Thanks #rlb)
<html>, <head> and <body> tags are optional. If you omit them, they will be silently inserted by the parser in appropriate places. It's perfectly valid to do so in HTML (just like implied <tbody>).
HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
The above doesn't work anywhere except W3C Validator. However shortest valid HTML5 text/html document works everywhere:
<!DOCTYPE html><title></title>
The lang attribute is not very well known but very useful. The attribute is used to identify the language of the content in either the whole document or in a single element. Langage codes are given in ISO 2-letter Language code (i.e. 'en' for English, 'fr' for French).
It's useful for browsers who can adjust their display of quotation marks, etc. Screen readers also benefit from the lang attribute as well as search engines.
Sitepoint has some nice explanation of the lang attribute.
Examples
Specify the language to be English for the whole document, unless overridden by another lang attribute on a lower level in the DOM.
<html lang="en">
Specify the language in the following paragraph to be Swedish.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
The "!DOCTYPE" declaration.
Don't think it's a hidden feature, but it seems it's not well known but very useful.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Related
Is it a valid thing to put a <section> inside a <form>?
Now, I know it works, so I'm not asking whether it works or not. I also know that they both are (both section and form) "box-model" elements and "may be inlined inside each other" -- according to the W3 definitions. And yet, I'm wondering if it's a legit thing to do?
Example for clarity:
<form action="foo.bar">
<section>
<input type="foo" />
</section>
</form>
In HTML5 you should use the tags that are most semantically appropriate for a given task.
And indeed there is a section tag for forms – it is called fieldset.
So instead of using a section tag inside your form, you might use a fieldset:
<form action="foo.bar">
<fieldset>
<legend>The fiedlset heading</legend>
<input type="foo" />
</fieldset>
</form>
Please also refer to the „html5 Doctor Element Flowchart“ (PNG, also as PDF).
On the same page we can read:
In addition to the element, it's also common practice to use HTML titles (e.g. , ) and sectioning (e.g. ) to structure complex forms.
In html5 can I use <button> outside the <form>, like this:
<body>
<form action="page.html" method="get" id="myForm">
...
</form>
<button type="submit" form="myForm" value="Submit">Send</button>
</body>
But I do not want to use the form, only the <button>, because my project is all done with Javascript/Ajax
I wanted to make a "noscript-friendly" design, but it is a closed intranet and for a company project and do not have much time for this.
Use <button> without <form> is semantic?
<body>
<div>
<button type="button">test</button>
</div>
</body>
Or would be better to continue to use <a href="javascript:void(0)">?
Note: Remember not all valid code by W3 is a semantic code
Your use of the button element is appropriate.
That’s why there is the Button state in the first place. The HTML5 spec also shows an example, very similar to your use case:
The following button is labeled "Show hint" and pops up a dialog box when activated:
<button type=button
onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
Show hint
</button>
Note: Your question has nothing to do with the Semantic Web. There is a difference between "semantic (markup)" and "Semantic Web".
Your use of the button element is "semantic" in the sense that you are using it correctly according to the HTML5 specification, and that there is no other element defined which would be more appropriate.
You might want to use the a element in cases where you are navigating to another resource (no matter how it’s implemented technically). For apps, the difference is sometimes not very clear. A rule of thumb: if the URL changes (could users want to bookmark/share it?) and/or you could use a link type (even only theoretically), it’s likely that you should use a instead of button. But as this is a different question, please take it just as a side note.
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 a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrame）
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/