I have my HTML code similar to the below code.
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<h1> </h1>
<input type="submit" value="Submit">
</form>
Here in the same form, I need to display the selected value in the tag.
Could someone guide how I can display the selected value in the tag as user makes the selection from the dropdown?
Thanks.
Please use below code.
<html>
<head>
<style>
</style>
</head>
<body>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" onchange="document.getElementById('tag').innerText=this.value;">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<h1 id="tag"> </h1>
<input type="submit" value="Submit">
</form>
</body>
</html>
Related
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
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!
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
<html>
<body>
<form name="orderform" action="order.php" method="POST">
<label>Username</label><br>
<input name="user" type="text" value="" size="10" maxlength="22">
<br>
<label>Items</label>
<div align="left">
<select name="mydropdown">
<option value="macbook">Macbook</option>
<option value="sony">Sony</option>
<option value="micromax">Micromax</option>
<option value="napolean">Napolean</option>
<option value="motorola">Motorola</option>
</select>
</div>
<label>Quantity</label>
<div align="left">
<select name="mydropdown">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
</select>
</div>
<input name="Order" type="submit" value="Order">
</form>
<form name="orderform" action="addtocart.php" method="POST">
<input name="Cart" type="submit" value="Add to Cart">
</form>
</body>
</html>
after executing this code all output is in vertical form i just wanted to make it in a line.please give me a solution i am new in php.
Try this
<!doctype html>
<html>
<head>
<style type="text/css" media="screen">
form div {
display: inline-block;
}
</style>
</head>
<body>
<form name="orderform" action="order.php" method="POST">
<div>
<label>Username</label>
<input name="user" type="text" value="" size="10" maxlength="22">
</div>
<div align="left">
<label>Items</label>
<select name="mydropdown">
<option value="macbook">Macbook</option>
<option value="sony">Sony</option>
<option value="micromax">Micromax</option>
<option value="napolean">Napolean</option>
<option value="motorola">Motorola</option>
</select>
</div>
<div align="left">
<label>Quantity</label>
<select name="mydropdown">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
</select>
</div>
<div>
<input name="Order" type="submit" value="Order">
</div>
<div>
<input name="Cart" type="submit" value="Add to Cart">
</div>
</form>
</body>
</html>
It would be easy to put it all on one line using CSS. You would just remove the default line breaking effects of some elements:
form, form div { display: inline }
form br { display: none }
To do the same in HTML requires modification of the HTML markup, of course. You just remove the div and br tags, but the forms require special treatment: the way to put two forms on one line in HTML is to put them in a table:
<html>
<body>
<table cellpadding=0 cellspacing=0>
<tr><td>
<form name="orderform" action="order.php" method="POST">
<label>Username</label>
<input name="user" type="text" value="" size="10" maxlength="22">
<label>Items</label>
<select name="mydropdown">
<option value="macbook">Macbook</option>
<option value="sony">Sony</option>
<option value="micromax">Micromax</option>
<option value="napolean">Napolean</option>
<option value="motorola">Motorola</option>
</select>
<label>Quantity</label>
<select name="mydropdown">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
</select>
<input name="Order" type="submit" value="Order">
</form>
<td>
<form name="orderform" action="addtocart.php" method="POST">
<input name="Cart" type="submit" value="Add to Cart">
</form>
</table>
</body>
</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