This question already has answers here:
How do I make a field required in HTML?
(16 answers)
Closed 2 months ago.
<label for="select-choice">Birthday:</label>
<select name="select-choice" id="select-choice">
<option value="0" selected disabled>Month</option>
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
<select name="birthday-day" id="day">
<option value="0" selected disabled>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select name="birthday-year" id="year">
<option value="0" selected disabled>Year</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
The Sign Up or Register page is okay but I could not validate the birthday, When I try filling it on a browser I expect it to demand or require birthday option, every other input option was demanding or requiring me to input an information but if I purposely did not fill the birthday and hit the submit button it will go through just like that, please how do I validate the birthday using HTML?
You just need to add "required" to each of your selects and then just add an empty value instead of a "0" value. When you press a button, it will detect it has no value and will automatically make the select required.
<form>
<label for="select-choice">Birthday:</label>
<select name="select-choice" id="select-choice" required>
<option value="">Month</option>
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
</select>
<select name="birthday-day" required>
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="birthday-year" id="year" required>
<option value="">Year</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
<button>submit</button>
</form>
For example, I have 3 different select options:
<select name="FirstOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="SecondOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="ThirdOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
So, when I click a button, I want to get all the values of all 3 select options and insert the values into the database.
Right now, I'm using this button with a href tag but looks like it's very wrong:
Reserve
What's the best way to do this?
Wrap the selects inside a form and put a submit button.
Add your ID as hidden fields.
Your HTML code should now be something like this :
<form method="post" action="../reservation-confirmation">
<select name="FirstOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="SecondOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="ThirdOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<input type="hidden" value="" name="tour_id" >
<button type="submit" name="submit'> Submit </button>
</form>
On the server-side, process the responses by targeting
if(isset($_POST['submit']))
$FirstOption$=$_POST['FirstOption']
$SecondOption$=$_POST['SecondOption']
$ThirdOption$=$_POST['ThirdOption']
... //Add them into your database.
Remember to use prepared statements.
Is it possible to not show the first option as selected in a <select>, without adding a blank option?
<select id="location" name="location" class="form-control">
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Mexico">Mexico</option>
<option value="Russia">Russia</option>
<option value="Spain">Spain</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
Thanks
Steve
No.
Typically you might add something like:
<option value="0">Please select a country</option>
Then in your JS check if it's got a value of 0 before form submit.
I believe it's possible as described in here: w3schools
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Example: Link
How would I go about setting a title in select tag? Here is my select box:
<select>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
When I visit the site, by default it shows "Sydney". But I want to display a title, such as, "What is the name of your city?"
<select>
<option selected disabled>Choose one</option>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
Using selected and disabled will make "Choose one" be the default selected value, but also make it impossible for the user to actually select the item, like so:
<select>
<optgroup label = "Choose One">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</optgroup>
</select>
You can combine it with selected and hidden
<select class="dropdown" style="width: 150px; height: 26px">
<option selected hidden>What is your name?</option>
<option value="michel">Michel</option>
<option value="thiago">Thiago</option>
<option value="Jonson">Jonson</option>
</select>
Your dropdown title will be selected and cannot chose by the user.
You can use the following
<select data-hai="whatup">
<option label="Select your city">Select your city</option>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
I think that this would help:
<select name="select_1">
<optgroup label="First optgroup category">
<option selected="selected" value="0">Select element</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</optgroup>
<optgroup label="Second optgroup category">
<option value="5">Option 4</option>
<option value="6">Option 5</option>
<option value="7">Option 6</option>
</optgroup>
</select>
<option value="" selected style="display:none">Please select one item</option>
Using selected and using display: none; for hidden item in list.
You can add an option tag on top of the others with no value and a prompt like this:
<select>
<option value="">Choose One</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
Or leave it blank instead of saying Choose one if you want.
Typically, I would suggest that you use the <optgroup> option, as that gives some nice styling and indenting to the element.
The HTML element creates a grouping of options within a element. (Source: MDN Web Docs: <optgroup>.
But, since an <optgroup> cannot be a selected value, you can make an <option selected disabled> and then stylize it with CSS so that it behaves like an <optgroup>....
.optionGroup {
font-weight: bold;
font-style: italic;
}
<select>
<option class="optionGroup" selected disabled>Choose one</option>
<option value="sydney" class="optionChild"> Sydney</option>
<option value="melbourne" class="optionChild"> Melbourne</option>
<option value="cromwell" class="optionChild"> Cromwell</option>
<option value="queenstown" class="optionChild"> Queenstown</option>
</select>
With a default option having selected attribute
<select>
<option value="" selected>Choose your city</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
The first option's text will always display as default title.
<select>
<option value ="">What is the name of your city?</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
You can create dropdown title | label with selected, hidden and style for old or unsupported device.
<select name="city" >
<option selected hidden style="display:none">What is your city</option>
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
<option value="4">Queenstown</option>
</select>
I added a <div> and it worked fine
<div title="Your title here!">
<select>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
</div>
<select name="city">
<option value ="0">What is your city</option>
<option value ="1">Sydney</option>
<option value ="2">Melbourne</option>
<option value ="3">Cromwell</option>
<option value ="4">Queenstown</option>
</select>
You can use the unique id for the value instead
SO basically im trying to create a button on a html webpage that uses or checks the values from two drop down lists and relative to that it will link to the appropriate page.
But the IF statements dont seem to work...
i tried using regular href Links but this didnt end well, such as When to use onclick in HTML?
here is my code:
<select name="Module">
<option value="Module 10">Module 10</option>
<option value="Module 11">Module 11</option>
<option value="Module 20">Module 20</option>
<option value="Module 60">Module 60</option>
<option value="Module 70">Module 70</option>
<option value="Module 85">Module 85</option>
</select>
<select name="Sector">
<option value="Sector1">Sector1</option>
<option value="Sector2">Sector2</option>
<option value="Sector3">Sector3</option>
<option value="Sector4">Sector4</option>
</select>
<FORM>
<INPUT type="button" value="OK"
onClick="if (( Module=='Module 10') && (Sector=='Sector1)) {location.href='M10_S1.html'}">
</FORM>
This should be what you want:
<form>
<select name="Module">
<option value="1">Module 1</option>
<option value="2">Module 2</option>
<option value="3">Module 3</option>
<option value="4">Module 4</option>
<option value="5">Module 5</option>
<option value="6">Module 6</option>
</select>
<select name="Sector">
<option value="1">Sector1</option>
<option value="2">Sector2</option>
<option value="3">Sector3</option>
<option value="4">Sector4</option>
</select>
<input type="button" value="Confirm" onClick="location.href='./M' + Module.value + '_S' + Sector.value + '.htm'">
</form>
The file names will be formatted as "M#_S#.htm"