I'm wondering if i can divide the <datalist> into sections like <optgroup> does. Many thanks!
Codes below:
<label>Location:</label>
<select>
<optgroup label="classroom">
<option>1A</option>
<option>1B</option>
</optgroup>
</select><br>
<label>Location</label>
<input type="text" name="location" class="form-control-lg" list="location">
<datalist id="location">
<option value="Classroom">
<option value="1A">
<option value="1B">
</datalist>
Related
currently working on an assignment and trying to code it to have titles as shown in the picture. Current code looks like this:
<section for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option selected disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option selected disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Picture of what I need for formatting, Hogwarts and Other is how I want it to look
Looks like you had it, just have to take the selected off of the 2 disabled options!
<label for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Data list doesn't appear. Tried everything. I know the data list is correct.
<input name="country" list="country_name">
<datalist i="country_name">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<!-- etc. -->
</datalist>
It should be id
<datalist id= "country_name">
You have a typo in the id of your datalist.
i="country_name" should be id="country_name"
<input name="country" list="country_name">
<datalist id="country_name">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<!-- etc. -->
</datalist>
I am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">
Is it possible to to include multiple (or a single) <input type = hidden> nested within an <optgroup>'s <option>?
For example, I might have
<select>
<optgroup label="North America">
<option value="Canada">Canada</option>
<input type="hidden" name="capital" value="Ottawa">
<option value="United States">United States</option>
<input type="hidden" name="capital" value="Washington D.C.">
<option value="Mexico">Mexico</option>
<input type="hidden" name="capital" value="Mexico City">
</optgroup>
...
</select>
If I choose "Canada" could I get "Ottawa" and only "Ottawa" submitted also?
What you are asking for is not exactly possible, but it sounds like the result you want is...
<select name="capital">
<optgroup label="North America">
<option value="Ottawa">Canada</option>
<option value="Washington D.C.">United States</option>
<option value="Mexico City">Mexico</option>
</optgroup>
...
</select>
When the user selects "Canada" from the drop-down, the value "Ottawa" will be submitted to the server.
Does the select element have the required attribute?
Yes you can use required attribute in HTML5. But remember, first value should be empty.
<select required>
<option value="">Please select</option>
<option value="first">First</option>
</select>
Here you get the more example:
http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element
Yes it has a required attribute, you can use it as follows
<select required>
<option value="" disabled selected>Choose</option>
<option value="first Option">First Option</option>
<option value="Second Option">Second Option</option>
</select>
Reference :
HTML Select required Attribute (W3C)
You can do this way to make it look better
<select required>
<option hidden="" disabled="disabled" selected="selected" value="">Select subject</option>
<option value="first Option">First Option</option>
<option value="Second Option">Second Option</option>
</select>
Yes it does, but currently it is not supported by any version of all major browsers. This includes Safari, Chrome, Firefox, and IE.
It is possible but (just Arif said above) it is important (obviously) that you use the first option without value like:
<form action="#" method="post">
<div>
<label for="State">State</label>
<select required id="State" name="State">
<option value="">Choose</option>
<option value="new">New</option>
<option value="old">Old</option>
</select>
</div>
</form>
You can see more info at: http://www.maxdesign.com.au/2012/11/03/select-required/