I am currently working on a website which incorporates heavily styled inputs, for example using the <label>-element to style checkboxes:
<label class="checkbox">
<input type="checkbox">
<span></span>
</label>
And where the standard <input> types just can't be reliably styled, We have recreated the neccessary functionality with other element types, for example <input type="range"> has been replaced with the following (and a bit of javascript):
<div class="rangeinput">
<div class="rangeinput-thumb></div>
<div class="rangeinput-slider"></div>
</div>
Now, the question is how to semantically add labels to these elements.
For regular inputs the <label>-element would work, but for the provided examples neither <label> nor <div> are allowed content of a <label>.
The checkbox-case can be solved by assigning an id to the checkbox and using the for-attribute of the label element, so that it does not have to be placed around the other label. But this does not work for any custom elements since they are not labelable, and it would be preferable to use a single solution for every input.
Currently I am wrapping every input-like element in a <fieldset> with a <legend>, but this feels more like a hack than actually helping semantics:
<fieldset>
<legend>A styled rangeinput:</legend>
<div class="rangeinput">
<div class="rangeinput-thumb></div>
<div class="rangeinput-slider"></div>
</div>
</fieldset>
This question is not about the click-to-focus effect of the element, but rather how to semantically associate a short, descriptive text with an element that takes a user input.
I would propose the aria-describedby attribute for this. You can then place your descriptive text in virtually any element, even if it's visually hidden.
The aria-describedby attribute is not limited to form controls. It can also be used to associate static text with widgets, groups of elements, regions that have a heading, definitions, and more. The aria-describedby attribute can be used with semantic HTML elements and with elements that have an ARIA role.
You might also (or instead) use aria-labelledby to give your control a more formal label. See Is it ok to combine aria-label and aria-describedby?
Yet another option is simply the aria-label attribute, which could be placed on the outer widget element. This is an always-hidden option for assistive tech usage only.
In your case, you might do something like this (with more specific wording than I've provided):
<div id="rangeLabel">Value Selector</div>
<div class="rangeinput" aria-describedby="rangeDesc" aria-labelledby="rangeLabel">
<div class="rangeinput-thumb"></div>
<div class="rangeinput-slider"></div>
</div>
<div id="rangeDesc">Use the range slider to set a value.</div>
Do keep in mind that if your range slider itself isn't accessible, this is all rather moot. It should be keyboard-controllable and have good audible feedback when used with screen readers, etc.
How to create a css selctor for a checkbox with :: before selector. I want to create css selector of a radio button .
I am using the selector for eg: [data-model-cid="c279"]>label in firepath and it shows me the element.However in the test script its unable to get the element.In google console when I try to get the element by $('[data-model-cid="c279"]>label') it is unable to fetch the element.So I think the :: before selector needs to be added in the selector to search the element. The Html is given below.How to write a selector with the :: before ?
<div class="radio" data-model-cid="c279">
:: before
<input id="pac-item-care-plan-4 years-45924345-view261" class="js-care-plan-update" type="radio" value="45924345" name="pac-item-care-plan-view261" data-analytics-id="cpradio" data-groupid="472AB3B8BDAD4A4AA78A7CF484FFA7E4" data-offerid="F259143E766145DF8F50DF46F9EC10B7" data-action="add" checked="checked"/>
<label class="no-wrap" for="pac-item-care-plan-4 years-45924345-view261">
:: before
4 years
<strong>(+ $39)</strong>
</label>
</div>
From what I know you cannot do this, mainly because an input is an empty tag (self-closing) and it basically has no content.
within a <div> element if you look at the following example
<style>
.my-div::before {
content: 'before';
}
.my-div::after {
content: 'after';
}
</style>
<div class="my-div"></div>
You'll notice in the chrome devtools you'll get something like this
<div class="my-class">
::before
::after
</div>
This is possible because the ::before and ::after psuedo-elements live inside the div tag, if you add another child div with a height and a background you'll see the words before pop up above the child div and after pop up after the child div - this is because they are basically children but inserted in a different way (through CSS).
The following is what you're looking for the browser to do
<input type="radio"></input>
to
<input type="radio">
::before
::after
</input>
But this is wrong already since the input tag shouldn't have any content in it. Most browsers will probably ignore this or even try to fix your markup for you but you simply won't be able to get this working.
From the documentation on MDN
"The :before and :after pseudo-elements elements interact with other
boxes... as if they were real elements inserted just inside their
associated element."
A correct <input> tag looks like this:
<input type="radio" />
And since this doesn't have any room to place the ::before and ::after in it won't work. You'll have to find an alternative solution unfortunately.
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
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>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.
This is what I have tried so far..
//div[#id='information']//div[div=='Site']
//div[text()='Site']//span//a[#href]
I am fiddling with an XPath expression but it´s not working out. I want to select the anchor's href attribute. Thats no problem but it needs to be explicitly after a div with class h3 AND a value = "Site".
<div id="information">
<div class="h3">Location</div>
<div class="h3">Site</div>
<span>
//Here is sometimes a <br/>
<a href='http://www.test.at'>Klick</a>
</span>
<div class="h3">Referenz</div>
<span>12345</span>
</div>
There can be arbitrarily many div elements inside the div with id="information" so selecting on index is not possible.
Something like this should work:
//div[#class = 'h3'][. = 'Site']/following-sibling::*/descendant-or-self::a/#href
This will extract the href attributes of all a tags that are after the "Site" div in document order but still contained within the same parent element (the "information" div in your example). If you're not bothered about that last bit, i.e. you want to include a tags that occur after the "information" div as well as inside it, then you can use the simpler
//div[#class = 'h3'][. = 'Site']/following::a/#href
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>