Hello,
I am wondering if it is possible to change the wicket output html code. e.g. for the component "CheckBoxMultipleChoice" you will get the following html output.
<span wicket:id="letters">
<input name="letters" type="checkbox" value="0" id="letters_0"/><label for="letters_0">fff</label><br/>
<input name="letters" type="checkbox" value="1" id="letters_1"/><label for="letters_1">aaa</label><br/>
<input name="letters" type="checkbox" value="2" id="letters_2"/><label for="letters_2">bbb</label><br/>
<input name="letters" type="checkbox" value="3" id="letters_3"/><label for="letters_3">ccc</label><br/>
<input name="letters" type="checkbox" value="4" id="letters_4"/><label for="letters_4">ddd</label><br/>
</span>
if i dont want the <br/> tag, what can i do?
regards
It depends on the component.
For anything Panel-based, you can always subclass the component (MyPanel.java) and supply a different markup file (MyPanel.html). As long as you have the same wicket:ids in there, it works fine.
For built-in Wicket components that have markup elements embedded in their source code, like CheckBoxMultipleChoice, you're at the mercy of the custom API of the component. In your case it looks like you want CheckBoxMultipleChoice#setSuffix.
No, extract from the documentation
Components may alter their referring tag, replace the tag's body or insert markup after the tag. But components cannot remove tags from the markup stream. This is an important guarantee because graphic designers may be setting attributes on component tags that affect visual presentation.
however if you want add/remove new line spaces between your components you can change the display of component to block/inline
#Override
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
//block or inline
tag.put("style", "display:block");
}
or use a CSS class
Related
I am new to HTML and I want to implement a rather large list of user options that use radio buttons. The various items all have a similar format and look like this:
<p>
"Question 1 text"
<input style="radio" name="question1" id="q1_id1">
<label for="q1_id1">Yes</label>
<input style="radio" name="question1" id="q1_id2">
<label for="q1_id2">No</label>
<input style="radio" name="question1" id="q1_id3">
<label for="q1_id3">Maybe</label>
</p>
<p>
"Question 2 text"
<input style="radio" name="question1" id="q2_id1">
<label for="q2_id1">Yes</label>
<input style="radio" name="question1" id="q2_id2">
<label for="q2_id2">No</label>
<input style="radio" name="question1" id="q2_id3">
<label for="q2_id3">Maybe</label>
</p>
etc.
Since so much of this code is repetitive, I was wondering if there was a way to declare an html object or something (I know html isn't an object oriented language), like you would do in other programming languages so you could have something like this:
Define html object that contains text and three radio buttons
Add a list of those objects to the document, changing only the question text and the button label text
in just a few lines of html.
Is there a way to do this, or do I have to resort to copy-pasting?
There is no way to do this in HTML. There are other ways:
1) You can use a template language to generate the appropriate HTML on the server before you send it to the user. Depending on your server, there are different options for this.
2) You can send the input's data to the user's browser as JSON and generate the HTML using Javascript. This can be more economical if the element repeats many times, like in a large data table.
If I have a plain checkbox <input> element with an id attribute that contains a space, I can still use <label for=""> to bind a label to the element, and then click on the label text to toggle the checkbox value:
<input type="checkbox" id="remember me" />
<label for="remember me">Remember me</label>
However, if I create the same <input> element using the HtmlHelper class, <label for=""> does not seem to bind the label to the label text. When I click on the label text, the checkbox does not toggle:
#Html.CheckBox("remember me")
<label for="remember me">Remember me</label>
Why is the behavior differing when I use HtmlHelper? Is it possible to use <label for=""> with a HtmlHelper rendered element that has an id that contains a space?
Please note, the main purpose of this question is to document something interesting that I discovered. According to HTML 5 standards, the id attribute should be at least one character, and should not contain any space characters. I came across some code that obviously didn't follow the W3C recommendations, and while cleaning it up, found a solution for the above problem, so I figured I may as well share what I found in case this can help someone in the future.
When the HtmlHelper creates the <input> element, it replaces all spaces in the id attribute with underscores.
If you inspect the rendered HTML code, you will see the the input element renders as follows:
<input id="remember_me" name="remember me" value="true" type="checkbox">
If you want to associate a label with the above element, therefore, you need to replace all spaces with underscores in the forstring:
#Html.CheckBox("remember me")
<label for="remember_me">Remember me</label>
Another way you can possibly avoid the above problem is by skipping the for="" attribute all together, and just wrapping the <label> tag around the entire input element:
<label>
#Html.CheckBox("remember me")
Remember me
</label>
I've found this solution to sometimes causes issues, however, if I had some CSS styles set for all label elements, and didn't want the styles applied to all the elements that the label surrounded.
This works fine:
<label>myText</mytext>
Is it possible to have short form? This doesn't work:
<label myText>
What you are trying is an Invalid HTML. As per W3c
A label element must have both a start tag and an end tag.
So you need to write that in the lengthy way if you are going with traditional HTML. If you use some templating lib / Pre-Processor than it might give you additional features which will further let you write compact/tighter syntax.
For example you can use HAML, Slim and so on..
If we take Slim as an example here, all you need to write is
label Username
This will further compile to .. Demo (Click on compile please)
<label>Username</label>
Further if you want to add attributes to your label
label for='username' Username
Will compile to
<label for="username">Username</label>
I know only one shorting:
<!-- from large -->
<label for="foo">Question:</label>
<input id="foo" value="answer" />
<!-- shorten me -->
<label>Question:
<input value="answer" />
</label>
Any way to provide a separate tabIndex order for accessible elements in HTML5 using WAI-ARIA?
Usecase: Lets take a case where a multiple choice question is rendered in HTML. It can have a question text, radio buttons with labels, and a submit button.
Here only radio buttons and submit button should be tabbable. Whereas all three components should be accessible for screen readers. Question text should be read before the radio button labels are read.
As an example, please check a question in the following link http://www.html5tests.com/tests/intro/intro-00.php
How should we use aria in such a case.
The Using WAI-ARIA in HTML Spec provides some practical guides about using ARIA. As written on that spec the first rule of ARIA use is:
If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
In your case, the <fieldset> HTML element has all your requirements built-in so I would use <fieldset> rather than using something else and re-purposing it with ARIA. Here is an example implementation:
<fieldset>
<legend>We hear that the internet is based on HTML. What is HTML exactly?</legend>
<p>
<input type="radio" name="HTML" id="option1" />
<label for="option1">HTML is a protocol that is used to route data across the internet, via TCP/IP.</label>
</p>
<p>
<input type="radio" name="HTML" id="option2" />
<label for="option2">HTML is a text-based language that is used to structure and present content on the world wide web.</label>
</p>
<p>
<input type="radio" name="HTML" id="option3" />
<label for="option3">HTML is a binary file format that codes web pages for use on the Internet.</label>
</p>
<p>
<input type="radio" name="HTML" id="option4" />
<label for="option4">HTML is a disk file system used in modern operating systems.</label>
</p>
</fieldset>
<input type="submit" value="Submit Answer" />
Keep in mind that this doesn't mean that you have to choose between a native HTML element and ARIA. Always pick the most semantic element first and if you still have additional requirements complement that element with ARIA.
You can find more information about the fieldset technique on this article: H71: Providing a description for groups of form controls using fieldset and legend elements.
I know by reading the W3C documentation for HTML4.01 and HTML5 that the "name" attribute originally existed as a property of the <a> tag to permit people to link to an anchor point within a document.
However, now that all major browser vendors allow linking to any HTML element within a document via the "id" attribute, is there still any real use for the "name" attribute? If so, how should I be using the "name" attribute?
One thing that comes to mind are radio buttons: you have to use name to specify which ones are part of the same group.
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
The name attribute is required, I think, on input elements (and their friends)...
<input type="text" name="email" value="" />
Good question... As mentioned in other answers one obvious use is for radio buttons so that only one radio button can be selected at a time, as you can see in jQuery radio buttons - choose only one?
Along with this, in ASP.Net MVC I have found another use of the name attribute. Refer
MVC which submit button has been pressed
<input name="submit" type="submit" id="submit" value="Save" />
<input name="submit" type="submit" id="process" value="Process" />
From http://www.w3schools.com/tags/att_button_name.asp
The name attribute specifies the name for a element.
The name attribute is used to reference form-data after the form has been submitted, or to reference the element in a JavaScript.
Tip: Several elements can share the same name. This allows you to have several buttons with equal names, which can submit different values when used in a form.
Other References
HTML5 How To Skip Navigation When Name Attribute Is Obsolete
HTML5 Obsolete features
HTML input - name vs. id