I often face a problem when I need to encapsulate some far apart fields in one form, and the fields in between them in other forms. Or encapsulating first two rows of a table in form and other two in other forms and so on. But of-course this is not allowed in standard practice. My question is why such tags like form (and other non displaying tags) have to be treated as "displaying" tags, and they also are restricted to be used at some places. Is there any genuine reason.
PS: what I was thinking about form in particular, that I define as many forms as I want at a single place, and give their references (eg ids or names) to the corresponding fields. That way form tag does not have to interfere somehow with the location of fields?
Asking "why" questions of HTML behaviour is not normally a useful activity. Very often the answer is "because one of the browsers originally did it that way and we're stuck with it for backward-compatibility reasons".
Note also what #DanMan says about the displayability of <form>.
However, your description of declaring forms in one place and then having the controls associate with the forms by id, is very similar to what has been done with the HTML5 form attribute. The only difference is that the controls reference the forms, rather than the forms referencing the controls. All we need to do now is wait for implementations in the browsers.
How is a <form> a non-displaying element? You can apply all kinds of CSS on it, and they will show up. It's just that they usually have no default browser styles. It's a rookie mistake to wrap elements in <div>s and styling those, when the only thing inside them is a single element.
<div class="myform"><form>...</form></div>
<form><div class="myform">...</div></form>
Both equally superfluous. Just style the original element directly.
<form class="myform">...</form>
Now, before you jump on my back: I'm not saying you're doing that. Just a general advice.
About restricted usage: that's probably to make it easier for implementors (browser creators) and for backwards compatibility.
Related
TYPO3 is kind of new to me, but what I try (need) to implement is a multi-step-Wizard without a form, just a few buttons which lead to other buttons which then lead to specific pages. It should contain a back button and a step-indicator.
I first started to use html with vanilla JS but since the Wizard should support multi language I am a bit confused. Could it be better done with a own Extension? Use the Controller with Fluid?
Can you give me any tips on how I could tackle the problem in a good, TYPO3 manner way?
I tried it with vanilla JS and many if-else conditions. If button1 was clicked, set its style to none; and set the style of button2 to block; etc.
I tried it with a controller passing all the wizzard data to the view, use fluid to iterate and generate buttons.
But nothing seems to be a good solution. It all ends up with a bunch of DRY and hacky code.
Pretty much sounds like a "tab" element to me. You could go for the official introduction package or maybe the bootstrap package, that is the base for the introduction package.
https://extensions.typo3.org/extension/introduction
https://extensions.typo3.org/extension/bootstrap_package
With these packages as a base, you could easily implement something like this:
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
As you want that wizard in front end it is no specific TYPO3 problem.
There are elements in TYPO3 which are called 'wizard'. But that are forms to get some information to fill in a normal back end form field. That has nothing to do with the front end and the wizard you want.
For your solution it is necessary to analyse your requirements.
First: is the decision tree fix or may it vary sometime?
Second: how many decision levels do you have? how many endpoints do you have?
A small fix tree can be hardcoded.
If you expect changes or have lot of levels it might be better to have a flexible solution which gets called recursively.
This might include a hierarchical data structure to represent the decisions until you get an end point with an url to the final page.
The answer to the question about the amount of decisions might change the implementation:
If you only have a few decisions all data might be stored in the initial page and javascript only changes visibility or content of elements.
If you have a lot of data you might consider AJAX to get only small parts of data for the next decision from the server. repeating until you reach an end point with a final url.
In general:
have a data structure with something like:
ID
title/question
option1-text
option1-url / next node-ID
option2-text
option2-url / next node-ID
:
I'm trying to learn how Microdata works and I was looking at the Schema.org website and I kinda get how the basics works because you can find some outlined examples online of the Navigations, Headers, Sidebars and Footers - but I don't understand what properties you can use with more complex item types.
Let's say I have an About page on my site.
Nothing fancy, you just talk about your business but there is a item type http://schema.org/AboutPage you can use.
So I visit that link but to be honest everything you see at that page isn't really written down for beginners I think.
Am I allowed to use all the item properties listed on that specific page or only the the selected few in the Thing section at the bottom of the page because the above two sections are part of WebPage and CreativeWork? I don't have the CreativeWork item type on my page, just the WebPage attached to my HTML body tag.
I always thought you could use those item types as snippets in your HTML to wrap pieces of HTML content together and you didn't need to work with an inherited workflow. Going from wrapped content inside WebPage → CreativeWork → AboutPage item types.
How to find the items types and which properties you can use within them?
First note, you can’t use the vocabulary Schema.org with Microformats. You probably confused it with Microdata, which is one of three syntaxes the Schema.org partners support (the other two are JSON-LD and RDFa). (I edited your question accordingly.)
You may use all properties that are listed on a type’s page.
A type in Schema.org always inherits from all its parent types, up to Thing. So, for example, the type AboutPage is also a WebPage, which is also a CreativeWork, which is also a Thing. You just have to use the most specific type that applies in your case.
For finding appropriate types, simply start at Thing and check the "More specific Types", linked on that page. And repeat.
Another way would be to search for some related keywords on the list of all types and check if a suitable type exists.
The problem is if you're unfamiliar with XML and Schemas because schema.org is as friendly as they can be without actually giving more examples of it, simply because stuff like this is indeed complex to make generic enough to reuse, while verbose enough to explain.
However there are some Google tools which can help you learn:
https://www.google.com/webmasters/markup-helper
https://developers.google.com/structured-data/testing-tool/
And register for Google Webmaster Tools account, and use their data highlighter and test.
Use that in combination with the schema.org examples and definitions, and then you'll properly relatively fast start learning which tags to use and how to nest them.
I have tinymce inserting posts into a database where they'll be subsequently pulled and put into a webpage. The problem is that some of the elements are interfering with page elements.
eg. Maybe the HTML that's being copy / pasted will have a table HTML tag with an id that conflicts with another id already on the page. Or maybe in the style attribute there'll be a z-index so the post cover up certain elements of the page.
I don't really want to blacklist attributes because (XSS considerations aside) I'm thinking all should be considered fair game (well maybe not event handlers) and if it interferes with the layout I can disable those specific tags / attributes on a case by case basis.
Any ideas?
There are several ways to filter your content:
use the tinymce paste_preprocess parameter to filter pasted content before insertion
you may use the valid_elements, valid_children and extended_valid_elements setting to allow which elements and attributes tinymce accepts as valid html tags (this is something you don't want?)
you can filter your code before writing it to your database
You could filter it when putting the content from database into another web page
I am attempting to build a simple application using wicket and have been impressed so far. I have been taking advantage of the Component class to determine behavior of elements on the page based on user input or the model. I see the component model similarities with JSF, but find the wicket lifecycle easier to manage.
What i haven't been able to understand is having to add every component to the tree for every wicket:id mentioned on a page, especially for ones without any children. it seems heavy handed to have to build up the tree in java code when the tree has already been somewhat defined within the markup. what am i missing?
edit
I should probably give an example. I have a label for an input box that in some cases i want to be able to modify. 95% of the time the text and attributes i have for the label in markup will be fine.
Short answer: Yes, you have to add them.
Long answer: You can create custom code to do this, but I doubt it's worth the effort.
With JSF, you use a non-html tag, which has one component type associated to it - for example, h:inputText correspond to the class HtmlInputText -, so it knows what class to instantiate.
With Wicket, the HTML file contains only (with a few exceptions) HTML tags, and you have to instantiate a concrete component for each wicket:id-marked tag you add to the markup, because it can't know for sure if <span wicket:id='xyz'> means a Label, a FeedbackPanel, a WebMarkupContainer, or some custom component.
With JSF you do in the markup what, with Wicket, you do in Java code, that is, to build the component tree, bind components to properties, and handle events. It keeps everything in one file (you don't have to create a class for every template file), which has many, many cons (some may think it has some pros, I digress).
You page is never just a simple form that does nothing. You want to convert and validate the input, you want to process the submit, you want to update components using Ajax. With JSF, you do all that in the (non-compilable, type-unsafe, poorly tooled, non-refactorable) template, making it bloated with expressions, configuration tags, and - gawd forbid - business logic.
If Wicket had support for this (and, for the matter, it has the flexibility needed for you to build this add-on yourself), you would have to add lots of extra annotations (special, non-standard tags and attributes) to the markup, to declare what class to instantiate, what model to update, what validations to execute, etc., compromising two of the beauties of the framework, the clean HTML template, and the clear separation between visuals and logic.
One framework that tries to do more in the template, while remaining less bloated than JSF (which isn't that hard anyway) is Apache Tapestry. But as can be seen in its tutorial, you still end up having to use non-standard tags and following arbitrary conventions to bind the template to the code (you may like it, but if this is the case you have baaad taste, sorry :P).
I have a label for an input box that in some cases i want to be able to modify. 95% of the time the text and attributes i have for the label in markup will be fine.
You could try to wrap the content of the label in a Model, enclose that label in a container and repaint the container (target.add(container);).
Offcurse you should add them.One of the most powerful facilities of wicket is that allow you to make a reusable components espacially html components.
There are a million ways to build a house, but most people wouldn’t
consider building toilets, bathtubs, and glass windows from scratch.
Why build a toilet yourself when you can buy one for less money than
it would cost you to construct it, and when it’s unlikely you’ll
produce a better one than you can get in a shop? In the same fashion,
most software engineers try to reuse software modules. “Make or buy”
decisions encompass more than whether a module is available;
generally, reusing software modules is cheaper and leads to more
robust systems. Reusing software also means you don’t have to code the
same functionality over and over again.(wicket in action:manning)
So to have a reusable wicket pages, wicket just needs a html page to show it's components hierarchy or their positions. The types and model of these components left to programmer.
I am almost at the end of my rope trying to style my Zend form using decorators. Previously to avoid these issues I would create a form script extending zend_form, add whatever validators, labels, etc I needed then retrieved the element from my view script using $form->getElement('my_form_element');
that way I could wrap whatever css tags I wanted around the element. I thought I should learn how to use the built in decorators, but I'm starting to feel like it's a waste of my time. My old way seems easier, is there some reason I am not seeing that makes using custom decorators better?
In general decorators are used to dynamically add functionality without having to touch the code's core functionality and for a better re-usage of code. In Zend_Form however, I think that the decorator system (as well as Zend_Form in general) is unintuitive and heavily over-engineered and so it does exactly the opposite of what it should do: Help the developer to create better and more intuitive code faster.
In my opinion the usage of Zend_Form_Decorator makes only sense in the case where you have some extended logic that you plan to reuse throughout your project on multiple and different types of elements.
Let me give you two examples:
You want to add a tooltip icon next to an arbitrary form element with a nice icon and a fancy JavaScript hover box.
An element should be validated directly upon entering data by posting an AJAX request and adding either a green check mark on success or a red cross icon on failure next to the element.
With the decorator you can now separate the logic of the added functionality from that of the underlying element and so you can use the same code to add the tooltip and/or the live validation feature to a textbox element as well as any other element simply by adding all the decorators you want to the element.
There is also a great article from Matthew Weier O'Phinney, the lead developer of Zend Framwork, that gives some background insight on the motivations for using decorators along with a lot of examples: Decorators with Zend_Form
Decorators can come in handy if you have a specific repeatable markup for your forms, for example if you want to use Bootstrap. Other than that, especially if you have a good html/css person, I would avoid them.