I want to create a HTML form where users insert:
A name in an input type=text"
Choose a car from list using select tag
A message in a textarea
How could I do in order to make that the input, select and textarea have the same width?
Set the css attribute width to the same value:
<input type="text" style="width:150px" />
You can create a css class and assign it to them:
<style>
.same-width{
width:200px !important;
}
</style>
<input type="text" class="same-width">
<select class="same-width">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<textarea class="same-width"></textarea>
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!
With this html:
<h2>Where (Location / Station)</h2>
<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
<option value="linecook">Line cook</option>
<option value="barrista">Barrista</option>
<option value="securityguard">Security Guard</option>
<option value="fignipper">Nipper of Figs</option>
</select>
My label drops to the bottom of the select element:
I want it at the top, instead. What html or CSS do I need for that?
Just use vertical-align:top:
label {
vertical-align: top;
}
<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
<option value="linecook">Line cook</option>
<option value="barrista">Barrista</option>
<option value="securityguard">Security Guard</option>
<option value="fignipper">Nipper of Figs</option>
</select>
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
<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
If there is no option available, it shrinks and looks bad. Is there any attribute where I can specify the default length?
You can give it a width via CSS, for example:
<select multiple="multiple" size="2" style="width: 200px;">
You can test it out here.
you can use CSS to specify a width and height, so that no matter what options are available, the size of the select element stays the same:
select { width: 12em; height: 6em }
sample:
http://jsfiddle.net/3PQ92/
http://jsfiddle.net/3PQ92/1/
http://jsfiddle.net/3PQ92/2/