How to use select inputs with Crowd HTML for mturk - html

I'm trying to set up a question with a select/dropdown for answers on mechanical turk, using Crowd HTML.
This is what I've got so far, but it doesn't give me a dropdown feature when testing, and it just appears as an ordinary text input. The documentation says this:
type
Takes a string to set the HTML5 input-type behavior for the input. Examples include file and date.
So based on this I think it should work but clearly no dice. Any ideas on how to do this? Thank you
<crowd-input name="qualificationType" type="select" required>
<option value="">High School</option>
<option value="">Some College</option>
<option value="">Associate Degree</option>
<option value="">Bachelor's Degree</option>
<option value="">Professional Degree</option>
<option value="">Master's Degree</option>
<option value="">Doctorate Degree</option>
</crowd-input>

A dropdown list is a select element, which you can use in mturk. Change what you have to:
<select name="qualificationType" required>
<option value="">High School</option>
<option value="">Some College</option>
<option value="">Associate Degree</option>
<option value="">Bachelor's Degree</option>
<option value="">Professional Degree</option>
<option value="">Master's Degree</option>
<option value="">Doctorate Degree</option>
</select>
And it should work

Related

HTML Drop Down Menu - Default Value

I'm making a dropdown menu in HTML and was trying to figure out how to pre-select a drop down value when the page loads. I've tried the following, using the selected option to indicate what value I want to be the default upon load. Though, this doesn't seem to work and I still end up with the first option being the default. I'm sure it's really simple but is there
<select selected="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Rather than manually put it in the <option value> tag, since these options are being generated via a loop, is there a way in the <select> tag to indicate what option should be defaulted? Thanks.
Use the selected property of the <option> you want selected by default:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
You can set that property programatically, if you update your question to include how you are generating, I can update this to show you how.

Disable custom input in HTML input dropdown

Good day!
I've got a simple problem, and it involves HTML.
I've googled everywhere, but found only similar results for, "How to disable autocomplete on input".
I'm trying to find a way to block custom input for a dropdown selection input, but I can't seem to find it.
I've found the attribute disabled, and setting disabled="true" on the input completely disables it, which is not my goal.
This is my code, I found it on w3schools.com.
I've attached 2 versions of it, un-disabled and disabled.
<!--NOT DISABLED STUFF-->
<form action="/action_page.php">
<input style="margin-bottom:15vw;" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<!--DISABLED STUFF-->
<form action="/action_page.php">
<input list="browsers" disabled="true">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Thank you for reading :)
I found a way to do it, thanks to #Eisenheim's comment.
Instead of using <datalist> stuff, it works when I use <select>.
<form action="default.php">
<select>
<option value=""></option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<input type="submit">
</form>

Drop-down lists for contact form

Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Creating drop menu navigation with <select>

I've managed to make myself drop menu navigation with html <select>. I've encountered one problem, though.
My external links aren't working. Namely Youtube.
Here is the code:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Navigation</option>
<option value="index.html">Home</option>
<option value="detroitvideoproduction.html">Video Production</option>
<option value="locationsounddetroit.html">Location Sound</option>
<option value="videoeditingdetroit.html">Video Editing</option>
<option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
<option value="demoreel.html">Demo Reel</option>
<option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
<option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
<option value="dslrrentalsdetroit.html">Camera Rental</option>
<option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
<option value="griprentalsdetroit.html">Grip Rental</option>
<option value="camerasupportdetroit.html">Camera Support</option>
<option value="about.html">About Us</option>
<option value="contact.html">Contact</option>
</select>
As you can see I have 2 external links. One to Vimeo, the other to Youtube.
When you select Vimeo it works perfectly fine and takes you to the appropriate vimeo page,
but when you select Youtube, it does nothing at all.
I know the URL in the link is correct, I checked it before I posted this.
Anybody know why Youtube wont work when Vimeo will?
Well you're not going to want to hear this, but it worked fine for me... i copied and pasted the code and tested it with Chrome and it went to your page just fine.
You might want to change onChange with window.location.href=this.value
So, the correct code is:
<select onChange="window.location.href=this.value">
<option value="" selected="selected">Navigation</option>
<option value="index.html">Home</option>
<option value="detroitvideoproduction.html">Video Production</option>
<option value="locationsounddetroit.html">Location Sound</option>
<option value="videoeditingdetroit.html">Video Editing</option>
<option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
<option value="demoreel.html">Demo Reel</option>
<option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
<option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
<option value="dslrrentalsdetroit.html">Camera Rental</option>
<option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
<option value="griprentalsdetroit.html">Grip Rental</option>
<option value="camerasupportdetroit.html">Camera Support</option>
<option value="about.html">About Us</option>
<option value="contact.html">Contact</option>
</select>
Some browsers may be objecting to seeing a ? in the string in a select list. Try converting your YouTube URL using TinyURL. I haven't tested, but I'm guessing that will do the trick.

I need to have an HTML <select multiple> with a disabled element

I need a way to have a multi-select box that has a disabled element. I want the box to look like:
All
-----or-----
option 1
option 2
with the "----or----" not being able to be selected. So far my code is pretty simple:
<select multiple size="4" >
<option value="0">All</option>
<option value="1">----or----</option>
<option value="2">option 1</option>
<option value="3">option 2</option>
</select>
But as of yet I have been unable to get the '----or----" disabled or unselectable. I've looked around and I'm not sure there is an HTML attribute that will disable it, but I'm really not sure and I'm also not sure this is the best way to present this option. Any help you can offer is greatly appreciated!
Maybe take a look at the optgroup element ?
<select multiple size="4" >
<option value="0">All</option>
<optgroup label="----or----"></optgroup>
<option value="2">option 1</option>
<option value="3">option 2</option>
</select>