In this docs example, the option name is the value submitted in the query string: http://v4-alpha.getbootstrap.com/components/forms/#form-controls
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>Example option that can be a really long string</option>
<option>Another option that can be a duplicate of another string but with a different ID</option>
<option>Another option that can be a duplicate of another string but with a different ID</option>
</select>
</fieldset>
Instead of this primitive hard-coding, I would like for the form to have the ID number of the option, and render for the user the verbose text that represents that option:
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>
1
<verbose>Example option that can be a really long string</verbose>
</option>
<option>
2
<verbose>Another option that can be a duplicate of another string but with a different ID</verbose>
</option>
<option>
3
<verbose>Another option that can be a duplicate of another string but with a different ID</verbose>
</option>
</select>
</fieldset>
This way, the query string will have ID numbers, there won't be duplicate short-circuiting in the backend, and it'll be faster because the ID is indexed.
How can this be accomplished, what is the proper syntax for the <verbose> pseudocode tag?
You are looking for the value attribute of the <option> tag. Example:
<option value="1">Example option that can be a really long string</option>
Related
I have a simple HTML form with a select element. The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive. Date Added, Title, etc.
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date&order=asc">Oldest First</option>
<option value="date&order=dsc">Newest First</option>
<option value="title&order=asc">Alphabetical (A-Z)</option>
<option value="title&order=dsc">Alphabetical (Z-A</option>
</select>
<input type="submit" value="Filter" />
</form>
The option values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:
www.example.com/songs/?orderby=date&order=asc
This is simply how HTML forms work.
The value attributes are arbitrary text. The browser is sending the form request to www.example.com/songs/?orderby=<value>, where you happen to be setting the <value> to "date&order=asc", "date&order=dsc", etc.
The orderby's value has to make it to the server intact. & and = are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby field is added to the URL query, thus allowing the server to properly receive the <value> that the user selected for orderby in the HTML.
To do what you want, you need to treat orderby and order separately in the HTML. I would add a separate <select> for order, eg:
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select name="order" id="sortbox">
<option disabled selected>Order by:</option>
<option value="asc">Oldest First, Alphabetical (A-Z)</option>
<option value="dsc">Newest First, Alphabetical (Z-A)</option>
</select>
<input type="submit" value="Filter" />
</form>
If you wanted to make the order list a little cleaner, you could use client-side scripting to manipulate the display texts of the order options whenever the user selects a different orderby option.
I am using a bootstrap form to submit data to a php page. I want that when the user doesn't make a particular selection from the given options, the form should submit either as or as null and not "SELECT ONE". Part of the code is given below. All the other data fields follow the same logic.
<div class="form-group">
<label for="smoking">Smoking Habits</label>
<select class="form-control" name="smoking" id="smoking" required>
<option data-hidden="true">SELECT ONE</option>
<option>Smoker</option>
<option>Non-smoker</option>
</select>
</div>
Any help will be appreciated. Thanks
An <option> only uses the text content as the data to submit if there is no value attribute.
You can add a value attribute to the option element, but the value has to be a string. It can be an empty string.
There is no native way to represent null in a HTML form.
<option data-hidden="true" value="">SELECT ONE</option>
Validation occurs:
<select name="fruit" required>
<option value="" selected> Select a fruit </option>
<option value="apple"> Apple </option>
</select>
Validation never happens:
<select name="fruit" required>
<option value="apple"> Apple </option>
<option value="" selected> Select a fruit </option>
</select>
Question
Why HTML doesn't considers the validation of required attribute in all cases that an empty option are selected?
Because its trying to treat the first element, since it's value is empty, as a placeholder label option, not a option to be selected, and therefore selecting it does not satisfy the "required" constraint.
You are right as default HTML5 validator will only check the value of the first selectable if you mark the input as required.
https://www.w3schools.com/code/tryit.asp?filename=FNP50ZBTEYOE
To modify this, you will need to use another validator and customize it by some code as well.
jQuery Validate Required Select
I am working with html select boxes and have found that they currently don't support the placeholder attribute, but I don't exactly understand why this is the case.
I would just like to understand what are the reasons for this if any? Thanks for any insight.
Likely, this is because conventional placeholder text doesn't make sense in a select element because you only have a predefined set of options to choose from. You can't edit the text in a select element like you can with an editable combo box in many desktop applications, but that's only because HTML simply does not provide an editable select element out of the box.
The select element implements "placeholders" by way of what the HTML5 spec calls a placeholder label option, which is described thusly:
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
And it gives the following example:
Code Example:
The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.
<p>
<label for="unittype">Select unit type:</label>
<select id="unittype" name="unittype">
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
</p>
When there is no default option, a placeholder can be used instead:
<select name="unittype" required>
<option value=""> Select unit type </option>
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3"> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
This idiom has in fact been in use since antiquity.
Placeholder text will appear when the user didn't feed any value.
selectbox, in this scenario the 1st option will appear when the user didn't enter a value. So we can use 1st <option> as placeholder text & place holder attribute is not required.
I'd like to replace a multiple select box like:
<select multiple="multiple" name="options">
<option value="option1">option1</option>
<option value="option2">option2</option>
...
</select>
with an arbitrary number of simple select boxes:
<select name="options1">
<option value="option1">option1</option>
<option value="option2">option2</option>
...
</select>
<select name="options2">
<option value="option1">option1</option>
<option value="option2">option2</option>
...
</select>
Is there any way to send and retrieve via POST an array of select boxes or should I try to access every select box named options(number) until it fails? Seems a bit dirty.
I should be able to submit an action to "delete this select box" or "create new select box" so I need some way to distinguish the select boxes.
Just give the select elements the same name.
HTML forms have no concept of "an array". Every form handling library that handles arrays of input data generates them from a name having multiple values:
foo=bar&foo=baz&aDifferentField=fizzbuzz
This is what a multiple select (named foo) with two values selected will generate (when there is 'aDifferentField' in the form too).
Sometimes there are provisos involved.
Perl's CGI.pm needs the request for the data to be in list context:
my #foos = $cgi->param('foo');
PHP requires the name to end with the characters '[]'
name="foo[]"
foo[]=bar&foo[]=baz&aDifferentField=fizzbuzz
… but it all comes down to the names being the same (although the ids must still be different).
As for the deletion:
<label for="foo5">Group 5</label>
<select name="foo" id="foo5">
<option value="delete_foo5">Delete this group</option>
<option value="1">1</option>
<option value="2">2</option>
</select>