Requiring to make a selection from a drop down html 5 - html

Is it possible to force/require a user to make a selection from a drop down menu?
Example:
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
By default "Volvo" is selected. What I want is for the browser to know that the user has made a selection and not accept the auto default.
I am thinking something like this:
<form action="">
<select name="cars" required="required">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Any advice?


A lot of time has passed since the question was posted.
For anybody stumbling over this like I did, the solution became a lot simpler by now:
You can just add a first option to the selection, with no value set.
The browser will automatically treat this like "nothing was selected":
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">Please select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
JSFiddle showing it work with no further JS required: https://jsfiddle.net/nrs5a7qh/


I tweaked an example from jquery validate to get this working for you. I know in your original question you asked for it to be based in HTML5 but maybe this blended example is acceptable.
http://jsfiddle.net/36MkJ/
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#carsForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="carsForm" method="get" action="">
<select name="cars" class="required">
<option value="">Select a car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
​Original Example was on http://docs.jquery.com/Plugins/Validation

Related

Opening html based on a formular

How to open a web page consisting of values submitted to the selection manu, please?
For instance, Saab, Volvo, and Audi are chosen. After clicking OK, I want to open another HTML page with the chosen words. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>CAR</h1>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
// After clicking OK, href consisted of choosen values is open
<p>Open</p>
</body>
</html>

I think if you wrap your html in a Form element it should work.
And also make sure you add a target parameter to the form element:
target="_blank"
An example:
<h1>CAR</h1>
<form
target="_blank"
action="https://www.lipsum.com"
method="get"
>
<label for="car1">Choose a car 1:</label>
<select id="car1" name="car1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car2">Choose a car 2:</label>
<select id="car2" name="car2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car3">Choose a car 3:</label>
<select id="car3" name="car3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
</form>
How do you get the values
To get the values back from the URL, use window.location.search.
An example:
const searchQuery = window.location.search;
/* '?car1=Volvo&car2=Audi' */
const values = searchQuery.split('?').pop().split('&').map(query => query.split('=').pop());
/* ['Volvo', 'Audi'] */

How do I not include 'none' in a HTML email if the user hasn't made a dropdown selection?

I was learning how to use the select tag in HTML to create dropdowns. And then I found out that dropdown selections could be sent as an email. After some experimenting with the tag, I figured out that I couldn't 'not include' the 'None' keyword in my email if the user hadn't made a dropdown selection. This was very frustrating.
<html>
<body>
<form action="mailto:test#gmail.com">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="None">None</None>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<label for="bike">Choose a bike:</label>
<select name="cars" id="cars">
<option value="None">None</None>
<option value="bike1">Volvo</option>
<option value="bike2">Saab</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
(Code Credits: W3 Schools)
Basically, when I make 1 out of the 2 dropdown selections and leave the other as none when I click submit the label with the value None is included
For example, If I choose Audi for Car dropdown selection and none for Bike selection, in the mail it's displayed as:
cars=volvo
bike=None
or something like that. How do I not include 'none' in the email if the user doesn't make a selection for that particular label?
Apologies for not framing the question clearly

required the select tag and empty the first element to set as a placeholder
<select name="cars" id="cars" required>
<option value="">None</option>
complete code will be like follows:
<html>
<body>
<form action="mailto:test#gmail.com">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" required>
<option value="">None</None>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<label for="bike">Choose a bike:</label>
<select name="cars" id="cars" required>
<option value="">None</None>
<option value="bike1">Volvo</option>
<option value="bike2">Saab</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
i hope this will be helpful for you

HTML Select Always have Blue Background Regardless of Focus

I am using this example of HTML select multiple Attribute: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple. The code is below:
<!DOCTYPE html>
<html>
<body>
<h1>The select multiple attribute</h1>
<p>The multiple attribute specifies that multiple options can be selected at once:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<p>Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</p>
</body>
</html>
When I select the Volvo option, it has a blue background:
When I click somewhere else on the screen (to remove the focus), the background for Volvo becomes grey:
My question: How do I make the background on my selection (in this case, Volvo) always blue, regardless of focus?

As far as I know, the color and background-color cannot be changed with the :checked pseudo-element, but it can be mimic with the help of a linear-gradient.
option:checked {
background: linear-gradient(lightblue, lightblue);
}
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>

Best you can do is use a linear gradient.
select option:checked{
background: #1E90FF -webkit-linear-gradient(bottom, #1E90FF 0%, #1E90FF 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

specify label's position to be above of the dropdown menu in html

How can I specify the position of the label to be above the dropdown menu?
E.g.
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="Submit">
</form>
Is there any style argument in <label for="cars">Choose a car:</label> that would place it above the menu?
Thank you!

Because label is an inline element, you can't give it a size unless you change its display option to block or inline-block
<label for="cars" style="display:block;">Choose a car:</label>
MSDN explaination.

So far it worked this way:
Style should include display: inline-block and width: 10em; and the label tag should close after the select tag.
<form action="/action_page.php">
<label for="cars" style="display: inline-block; width: 10em;">Choose a car:
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></label>
<input type="submit" value="Submit">
</form>
See here
I am still looking for a more thorough explanation to learn from!

Required attribute not validating on a select element

For some reason, the required attribute didn't work. Where did I go wrong?
I've already tried putting another <option> with blank value
<form action="">
<select required>
<optgroup label="test">
<option value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</optgroup>
</select>
<input type="submit">
</form>

It works without optgroup DEMO
<form method="POST" action="">
<select required>
<option value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
Anyway, there is poor support of the required attribute in browsers