I am asking this question to test the validity of my HTML. I can very well try this out (and I have, and it's possible), but I'm simply curious whether or not this is allowed in HTML. If not, how can one simulate a div or span element inside a form? Using blockquote?
form is a block-level element in HTML. Typically, block-level elements allow both block-level and inline children. Both div and span are valid children of form.
There are a ton of resources online to learn more about this topic, for example:
http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
It may also benefit you to read about the box model, as this is one of the most fundamental concepts of web design/development.
http://www.w3.org/TR/CSS2/box.html
Yes, you can. And it is also "officially allowed" by the XHTML standard, if you look into the XHTML XSD, you will find
<xs:complexType name="form.content">
<xs:annotation>
<xs:documentation>
form uses "Block" excluding form
</xs:documentation>
</xs:annotation>
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:group ref="block"/>
<xs:group ref="misc"/>
</xs:choice>
</xs:complexType>
"block" encompasses div and "misc" contains span. The "documentation" part points out one particular thing you are not allowed to do: nest a form within another one.
Yes it's valid and you can use any number of divs, spans or blockquotes inside a form. You can always use W3C Markup Validation Service to check your html.
Eg:
<body>
<form id="Form1">
<div id="wrap">
<div id="content-wrap" class="content-wrap-admin">
</div>
</div>
</form>
</body>
I must correct emboss' answer.
In the XHTML 1.0 Strict DTD that he quotes, the group misc does not refer to inline elements. Instead, it refers to the following 4 elements: noscript, ins, del and script.
<!ENTITY % misc.inline "ins | del | script">
<!ENTITY % misc "noscript | %misc.inline;">
So to answer the question, XHTML 1.0 Strict does not allow span elements inside form elements. You'll need to wrap them inside block elements such as p, dip or fieldset.
This is not the case with XHTML 1.0 Transitional, though. Indeed, the DTD indicates that inline elements are allowed inside form elements:
<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">
For reference: XHTML 1.0 - DTDs
Yes.
Did you even try this yourself?
Related
Does XForms have a mechanism for manipulating attributes of the resultant HTML?
I guess I mean emitting HTML dynamically and setting the attributes as part of that.
I know that using a xf:repeat - you can effectively emit HTML elements, but I can't work out if this would stretch to attributes?
I'm using XSLTForms as the implementation - so maybe this support hooks for Javascript to do this if there isn't a built-in way?
The reason to ask specifically - I would like to work with the audio element (and some other HTML5 elements).
Yes, it is named AVT for Attribute Value Template. As in XSLT, just wrap XPath expressions into curly braces like in <div class="proto{$myclass}">.
Thanks to the help from Alain Couthures - I was able to put together the following. Sharing in case others find it interesting.
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Podcast Player</title>
<xf:model>
<xf:instance xmlns="">
<data>
<url/>
</data>
</xf:instance>
<xf:instance id="feed" src="https://podcasts.files.bbci.co.uk/b05qqhqp.rss"/>
</xf:model>
<style><![CDATA[
* { font-family: arial; background-color:black; color: white }
]]></style>
</head>
<body>
<h1><xf:output ref="instance('feed')/channel/title"/></h1>
<blockquote><xf:output ref="instance('feed')/channel/description"/></blockquote>
<xf:select1 ref="url" appearance="full">
<xf:itemset nodeset="instance('feed')/channel/item">
<xf:label ref="title"/>
<xf:value ref="enclosure/#url"/>
</xf:itemset>
</xf:select1>
<audio src="{url}" controls="true"/>
</body>
</html>
The relevant bit to this post is the "audio" tag and in particular the "{url}" attribute template.
Here's a screenshot:
For those that wish to try this example, you'll need XSLTForms : https://en.wikibooks.org/wiki/XSLTForms , other XForms implementations are available.
Note: save the file with the extension '.xhtml' and place behind a webserver of your choice.
For instance using test HTTP servers: php, python etc.
When adding Mask content element it doesn't reflect some setting of the Appearance tab at front-end, like Layout, Frame, Space Before or After, also it doesn't include the uid of content element. How can I make usage of these fields?
By default Mask elements do not use standard wrapping for rendering the content element, fortunately you can easily access them within data variable which contains array of tt_content.
To check what fields of tt_content are available just put the line in FE template of your Mask element:
<f:debug>{data}</f:debug>
So you can make the wrapper div by yourself using simple Fluid syntax
<div class="
{f:if(condition: data.layout, then: 'frame-layout-{data.layout}')}
{f:if(condition: data.frame_class, then: 'frame-{data.frame_class}')}
{f:if(condition: data.space_before_class, then: 'frame-space-before-{data.space_before_class}')}
{f:if(condition: data.space_after_class, then: 'frame-space-after-{data.space_after_class}')} ">
<!-- your markup here -->
</div>
You can use the layouts like fluid_styled_content does - it takes care of headers, frames, spaceBefore, etc. This is also the easiest way.
First step: define the layout directories in TypoScript:
lib.maskContentElement.layoutRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Layouts/
lib.maskContentElement.partialRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Partials/
Second step: use the layout in your template:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<!-- your markup here -->
</f:section>
</html>
This also works for DCE (with corresponding TypoScript path)
Of course you can copy the layouts and partials to your theme path and make changes there, but I recommend sticking to the core functionality.
In Ektron I have a form that generates an HTML email on submission and sends it to a mailbox (foo#bar.com). An application (MailReader) checks that mailbox, reads the messages, strips all markup, and saves the resulting messages for later use. This is a problem because all the text from the HTML email end up getting mashed together and are completely unreadable by someone using the MailReader app.
For example, this HTML:
<h1>Header1</h1>
<div>
<h2>Header2</h2>
<p>Some text in a paragraph.</p>
</div>
Becomes:
Header1Header2Some text in a paragraph.
I cannot change MailReader in any way, it will always strip any markup so my solution is to have Ektron generate an email that contains no HTML for just this form. I know the email is generated using XSLT transformations with the file /Workarea/controls/forms/DefaultFormEmailBody.xslt.
My attempt at my solution involved adding a hidden input to the form with name "__nohtml". Then the XSLT will do the following:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:choose>
<xsl:when test="/field[starts-with(#name, '__nohtml')]">
<xsl:output method="text" />
</xsl:when>
<xsl:otherwise>
<xsl:output method="html" />
</xsl:otherwise>
</xsl:choose>
<xsl:template match="/">
<xsl:choose>
<xsl:when test="/field[starts-with(#name, '__nohtml')]">
text output
</xsl:when>
<xsl:otherwise>
html output
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
But it never sends the email when I use this. I tried just rendering with this template on my own machine and I get errors. And I've also noticed that w3 documentation says the The xsl:output element is only allowed as a top-level element. That probably explains why I can't put it in the element.
I've also tried just completely omitting the element and it seems to default to HTML no matter what.
I've tried searching our local Ektron code for the point where the transformation occurs so I can tell Ektron to use the default XSLT in standard cases or use a different XSLT if __nohtml exists, but I don't know if that code is even accessible.
I would greatly appreciate it if someone can help me find a template that would allow either HTML or plaintext based on whether a field exists. If not then it would be equally awesome if someone could point me to the point of XSLT transformation in Ektron's code (if it's even accessible).
I would recommend a form strategy to generate a version of an email that you build out. There should be a public override void OnAfterSubmit(FormData formData, FormSubmittedData submittedFormData, string formXml, CmsEventArgs eventArgs) that would allow you to create pull out the submitted form data (either in the raw object or I believe it returns the xml as well. From there you could just parse it and save your html file.
I am writing a form (betterFORMs/Xforms) to be displayed to the user with a selection of checkboxes.
If a checkbox is empty the form should bind an "N" into the element. When ticked, a "Y".
I realise there are answers to this question already but I have tried all answered solutions with no luck.
The first solution I attempted to use is here - stackoverflow link
(the first solution looks good, but I have had more success with solution 2 as I am not using Orbeon)
The answer given is what I am looking for, but I am having trouble implementing this into my form. I am not using Xhtml or Orbeon and so the binding I use seems to be different to that used in the solution.) I have tried tweaking this code to fit into my form but I get a repetitive error from the xml parser every time I load the page - but it doesn't point me to anywhere related to the new code.
The next solution I have tried is found here - stackoverflow link
This answer has had the best results in my code because the checkbox values change to N when not used and when they are deselected. The problem I have with this solution is that the Y set in the form element is contained in braces - [].
output example:
<addressProof>N</addressProof><other>[Y]</other><otherText>_text_</otherText>
Here is a snippet of my form:
model:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema"
<xsl:output method="xml" />
<xsl:template match="/">
<xforms:model id="documentsChecklist">
<xforms:instance>
<actionform xmlns="">
<xforms:model id="documentsChecklist">
<xforms:instance>
<actionform xmlns="">
<detail>
<other></other>
<otherText></otherText>
</detail>
</actionform>
</xforms:instance>
<xforms:bind id="other" nodeset="/actionform/detail/other" calculate="choose(. = 'Y', ., 'N')"/>
<xforms:bind nodeset="/actionform/detail/otherBox" relevant="/actionform/detail/other ='Y'" />
</xforms:model>
form:
<div id="formBody"><br />
<xforms:select bind="other" appearance="full" align="right">
<xforms:item>
<xforms:label>Other</xforms:label>
<xforms:value>Y</xforms:value>
</xforms:item>
</xforms:select>
<xforms:input ref="/actionform/detail/otherText">
<xforms:label>Please specify:*</xforms:label>
</xforms:input>
</div>
</xsl:template>
</xsl:stylesheet>
Why does the checkbox value now get set to "[Y]" instead of "Y"? (Could it be something to do with an Array?) Thanks.
PS. I know I could do this using a boolean for each checkbox, with the checkbox value corresponding to the boolean, which in turn updates the bind value. I would rather not have to have a big block of boolean elements and binds as I have a large amount of check boxes. this solution has an example here - stackoverflow link
A select control allows you to select more than one item and I wonder if it is why the XForms implementation you are using is adding square brackets (according to specifications selected values have to be separated by a space character, which is not always very convenient by the way).
I am afraid that XForms 1.1 and XForms 2.0 require to use extra intermediate nodes and bindings. It would be useful to be able to add 2 XPath expressions for bindings: one to convert node value to control value and the other one back from control value to node value.
As a workaround, I use another extension in XSLTForms: XSLT stylesheets for converting instances.
-Alain
I am getting validation errors with the inputmode attribute on text areas and text fields. The validator tells me Attribute inputmode not allowed on element input at this point but the HTML5 spec indicates that it is allowed.
Is there actually something wrong with this code, or is the validator at fault?
Here is a bare bones case which will produce exactly this kind of validation error (twice), in one case on an email input, and on the other on a textarea.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="contactme.php">
<label class='pas block'>
Your E-Mail:<br/>
<input type='email' name='email' required inputmode='latin' placeholder='your e-mail here' />
</label>
<label class='pas block'>
Your Message:<br/>
<textarea name='message' required inputmode='latin' placeholder='and your message here!'></textarea>
</label>
</form>
</body>
</html>
Also, see the chart about which attributes apply to the different input types here:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type
The "inputmode" attribute applies only to "text" and "search".
UPDATE 2019-09-04: "inputmode" is now a global attribute (per WHATWG) and can be specified on any HTML element: https://html.spec.whatwg.org/multipage/dom.html#global-attributes
Another reference page for "inputmode":
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
On another note, "inputmode" is not a W3C HTML5 attribute, but it is a W3C HTML 5.1 attribute (at least at the time I'm writing this). UPDATE 2019-09-04: "inputmode" has been removed from HTML 5.2 and HTML 5.3.
The HTML5 spec says
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, max, min, src, step, and width.
It's under bookkeeping details at https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
Five years after the question was asked, some may wonder why some of the properties listed by #dsas doesn't trigger such errors, like enctype
The answer is simple support, while enctype for instance gained a wide support
inputmethod is supported only as of IE11 and Edge 14, for more infos click here