I'm currently using PicoCSS as my CSS framework for a project, and so I need to nest input inside a label element using Jinja2, in order to apply some styling that PicoCSS establishes in their documentation.
Since this is for educational purposes, I'm limited to use Flask_WTF (WTForms) in Python only, no JavaScript.
I haven't found a solution for this, but searched a lot. I expect my HTML code to render like this:
<label for="coin_from">
Select currency:
<select name="coin_from" id="coin_from" required>
<option value="" disabled selected>Select an option</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
</select>
</label>
Inside label, it could be select or any other input element. How can i do it in Jinja2?
Is this possible? Thanks for your help!
Related
Currently trying to style a responsive form using bootstrap. This form actually didn't have any responsive design applied within a separate css file before applying bootstrap, everything was purely type and effects.
But I'm having a lot of issues with a select element within this form.
For whatever reason, a select element, which comes before a series of paired radio buttons (themselves grouped within fieldsets), is cutting off both the legend element and the label element for the first radio input. It looks like this:
select element viewed w/ element picker
It looks like content-box is taking up a ton of space. Or that space is "saved" for an active select dropdown? I'm not sure why there's so much blue there ^_^ I'm probably missing something very simple.
I've sectioned the select element off (using semantic section), I've wrapped it within its own row, I've tried applying some small-but-noticeable amount of extra margin-bottom (mb-4 for example).
None of this has worked. Here's my code for this particular section:
<section class="col-8 col-md-4" id="recommend">
<label class="col-form-label" for="select">Would you recommend your stay at the Aperture
Science computer-aided Enrichment Center?</label>
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</section>
Any ideas? :D
You should probably end your <select> element, as this could have unknown effects on the rest of the DOM.
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</select> <!-- <- this was missing -->
I am working on an assignment for an online web development course I am taking. The assignment is to create an HTML form.
One of the requirements is for there to be 3 dropdown menus - one for month, day, and year. A label of "Birthday:" is to precede these three menus.
The course's assignment solution showed three select elements nested inside of one label element. I tried this and, although it looked normal in the browser, when I uploaded the file to W3C I received the following error:
"Error: The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant."
Is there a proper way to use one label element to be applied to multiple select elements? Or is this a poor practice and instead each day, month, and year should each get its own label?
Here is my code:
<div>
<label>Birthday:
<select name="month" required>
<option value="">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
</select>
<select name="day" required>
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="year" required>
<option value="">Year</option>
<option value="1918">1918</option>
<option value="1988">1988</option>
<option value="1998">1998</option>
<option value="2008">2008</option>
</select>
</label>
</div>
-
In HTML, <input /> fields are »primitive«, which means, each one represents a single value primitive value like a number, string, boolean, etc. A Birth date, consisting of three values, one for the year, the month and the day is »complex« in that context. So you cannot make HTML »understand« that you are trying to create a »complex« field in that way.
That's why (imho) you should not attach the label (complex) to any of the fields (primitive) and use the label as »decoration« without any connection to any field, than you wont get any validation errors.
<label>'s as wrapping elements can be helpful (especially for radio buttons) to expand the »clicking area/hitbox« and to apply some css, depending on the fields value, without any javascript. Otherwise linking labels to fields is cool for search engines and stuff, but since HTML does not have a standardized definition about: »how to label complex inputs«, it is difficult to say if the proposed approach is helpful, or will be in the future (afik).
So in your case, I would just:
<form>
<div class="complex field-group">
<label>…</label>
<div class="fields">
<!-- eventually to help bots
<label for="x" style="display:none;">…</label>
-->
<input id="x"/>
…
</div>
</div>
</form>
I know that you can associate a label with an input using the for and id attributes. However can you use a class and not an id? Thanks
<label for="rooms">Number of rooms</label>
<select id="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Classes are not unique (you can have multiple elements with the same class), so no.
If you want to associate a label to an input without using ID, you can implicitly assign it by including said input inside of the label:
<label>Number of rooms
<select name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
Here is an example of when you wouldn't want to use an ID or nest the control:
I'm creating a BackboneJS application that uses templates. Because the template can be duplicated, it's important to refrain from using IDs, as it will create multiple elements in the DOM with the same ID.
I'm also using Bootstrap, which will present the control in a different (and undesirable) way if it's wrapped inside the <label> element.
At this point, the only solution I can find is to wrap the control element and tweek the default CSS to get the desired output. If someone has a more elegant solution, please chime in.
No, you cannot use the class of an element, because the same class can be used by multiple elements - in which case, which element would the label be for?
No, you can't. The only attribute you can use is the id attribute.
It doesn't make sense to use a class (which describes a group of related elements) since a label can be associated only with exactly one form control.
you can do this :
<label class="col-md-12 input-group input-group-sm">
<span class="col-sm-5 control-label text-nowrap">Code</span>
<input class="form-control listen code" type="text" size="15" required/>
</label>
I know that you can associate a label with an input using the for and id attributes. However can you use a class and not an id? Thanks
<label for="rooms">Number of rooms</label>
<select id="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Classes are not unique (you can have multiple elements with the same class), so no.
If you want to associate a label to an input without using ID, you can implicitly assign it by including said input inside of the label:
<label>Number of rooms
<select name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
Here is an example of when you wouldn't want to use an ID or nest the control:
I'm creating a BackboneJS application that uses templates. Because the template can be duplicated, it's important to refrain from using IDs, as it will create multiple elements in the DOM with the same ID.
I'm also using Bootstrap, which will present the control in a different (and undesirable) way if it's wrapped inside the <label> element.
At this point, the only solution I can find is to wrap the control element and tweek the default CSS to get the desired output. If someone has a more elegant solution, please chime in.
No, you cannot use the class of an element, because the same class can be used by multiple elements - in which case, which element would the label be for?
No, you can't. The only attribute you can use is the id attribute.
It doesn't make sense to use a class (which describes a group of related elements) since a label can be associated only with exactly one form control.
you can do this :
<label class="col-md-12 input-group input-group-sm">
<span class="col-sm-5 control-label text-nowrap">Code</span>
<input class="form-control listen code" type="text" size="15" required/>
</label>
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/