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.
Related
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.
I have been created simple web page using html, css and some scripts.
Here is my jsfiddle i tried: http://jsfiddle.net/67x8cyp9/
<p>
<img class="text-wrap" align="right" src="img/9780143332497.jpg">
<div class="caption">
<form method="get" action="9780143332497.png">
<button type="submit">Download!</button>
</form>
</div>
</p>
Is it correct to use <form> tag and <div> tag inside <p> tag?
And also, how to set download button under the image?
Can anyone help me to fix this?
Thanks in advance.
Its NOT recommended.
According to W3 specifications, <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content(see this for Minimal Content Model in <p> tag). Alternately, you may use a <div> to enclose your <form>
You may validate your html code on w3 validator for better clarity.
Cheers!
Not it is not, p is a block element, but cannot contain other block elements, only inline ones. (at least in HTML4, but I don't think HTML5 changes this behaviour).
Hmm, according to MDN, you can put a form in a p, but actually what happens is that the end of the p is at the beginning of the form, so not very useful.
Update:
To help you in your current actual problem, you can wrap the content in a div instead of a p:
<div class="right-figure">
<img class="text-wrap" src="img/9780143332497.jpg">
<div class="caption">
<form method="get" action="9780143332497.png">
<button type="submit">Download!</button>
</form>
</div>
</div>
And in the CSS file:
.right-figure {
float: right;
}
This will do, what you need.
Another approach:
By the way, you could also just use a link instead of a form:
Download!
and format the anchor with CSS to look like a button, just like e.g. Twitter Bootstrap does.
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 have a webpage, which has an overall form element surrounding all the code on the page between the <body> ... </body> tags on the page.
As part of the webpage, there are two additional forms inside this to add and edit rows on a tables contained on the webpage.
How are the form elements handled on a webpage? Will the browser know what to process a webpage laid out:
<body>
<form id="FullPageForm">
Content here.
<form id="AdditionalFomr1">
Form1 elements only
</form>
<form id="AdditionalFomr2">
Form2 elements only
</form>
</form>
</body>
Can the browser isolate the various different form sections on the page correctly?
Having <forms> nested inside other <forms> is not valid in HTML4 or HTML5.
See the relevant part of the HTML5 Specification below:
4.10.3 The <form> element - Content model: Flow content, but with no <form> element descendants.
They can however, be siblings, e.g.
<form id="AdditionalFomr1">
Form1 elements only
</form>
<form id="AdditionalFomr2">
Form2 elements only
</form>
<form id="AdditionalFomr3">
Form3 elements only
</form>
Now that your forms are separated, it's easy to differentiate between what action should happen when each one is submitted etc.
it will not work. nested variables is not supported by any browser.
ya your code is working
but you have done silly mistake in above code
see in tag you used '?' instead of '>' sign
and put forms in a table form
so you can get formal look
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>