I'd like to be able to add a drop down select box to my contact form. Here's my existing html code for the field I wish to use:
<label class="topic">
<input type="text" name="topic" placeholder="Subject" value=""
data-constraints="#Required" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid subject.</span>
</label>
Any ideas?
You should use the <select> tag.
<select>
<option value="o1">Option 1</option>
<option value="o1">Option 1</option>
<option value="o1">Option 1</option>
</select>
More info:
http://www.w3schools.com/tags/tag_select.asp
Related
I want to make a dropdown menu where the user should select an option before being able to continue. I tried this code with the "required" attribute but the user is still able to continue without selecting an option.
I tried the same attribute when I made an input box and there it worked fine.
<p class="line-item-property__field">
<label>Indgravering i herre ring (Valgfrit)</label><br>
<select required class="required" id="indgravering-i-herre-ring-valgfrit" name="properties[Indgravering i herre ring (Valgfrit)]">
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>
</p>
You need an empty option value, otherwise the first option value is always selected anyway.
<form action="something.php">
<p class="line-item-property__field">
<label>Indgravering i herre ring (Valgfrit)</label><br>
<select required class="required" id="indgravering-i-herre-ring-valgfrit" name="properties[Indgravering i herre ring (Valgfrit)]">
<option value="">select something</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
I have a dropdown in my form which was generated by the html form builder:
<select class="form-control">
<option value="" selected="1" disabled="1">Select option</option>
<option value="course 1">course 1</option>
<option value="course 2">course 2</option>
<option value="course 3">course 3</option>
</select>
Is there a simple way to ensure that the user selects a value in the dropdown before submitting the form? If he has not selected anything, then display an error message.
Also, I have an input field:
<div class="form-group field-x_street_name_1">
<label for="x_street_name_1" class="col-sm-2 col-form-label col-form-label-lg">Street 1 <span style="color:red;">*</span></label>
<div class="col-sm-10">
<input type="text" name="x_street_name_1" t-att-value="x_street_name_1" id="x_street_name_1" class="form-control form-control-lg" placeholder="e.g. John Lane" required="required" t-att-readonly="'readonly' if only_passwords else None" t-att-autofocus="'autofocus' if login and not only_passwords else None"/>
</div>
</div>
I want to ensure the user enters only between 10 to 30 uppercase, lowercase alphabets. I would ensure that using html pattern simply. But it does not seem to work.
<div class="needContent">
<label for="Country" >Country</label>
<input list="browsers" name="Country" required="required">
<datalist id="browsers">
<option value="Canada">
<option value="The United States">
<option value="India">
<option value="Pakistan">
<option value="Germany">
</datalist>
</div>
Hi, I am new to html.I am trying to validate my file on html validator but it is giving me the error specified above. Can someone help me to fix that please?
The problem is that the for attribute of <label> corresponds to the element's ID, not its name:
for
The id of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
To resolve this, all you have to do is give your <input> element an id that is the same as its name. Note that you'll probably also want to ensure that both of these are lowercase to prevent confusion:
<div class="needContent">
<label for="country">Country</label>
<input list="browsers" id="country" name="country" required="required">
<datalist id="browsers">
<option value="Canada">
<option value="The United States">
<option value="India">
<option value="Pakistan">
<option value="Germany">
</datalist>
</div>
In my HTML:
<div class="main">
<label>Select an option </label>
<select>
<option value="user123"> user123 </option>
<option value="user234"> user234 </option>
<option value="user345"> user345 </option>
<option value="user456"> user456 </option>
<option value="Other"> Other </option>
</select>
<input type="text" style="visibility:hidden" maxlength="7" id="custom" </input>
</div>
In my typescript:
if(input=="Other") {
(<HTMLInputElement>document.getElementByID('custom').removeAttribute('style')
}
By doing this, it will activate a text box when the user select Other from the dropdown. But if the user changes his/her mind to the regular option(without activating the text box), the text box will still stay. I understand the cause of this issue is because I removed the hidden attribute. So is there a way to show the text box only when the user select Other and hide the text box for other cases.
Another question is how to force the user to only input "userXXX" into the text box?
Thank you!
I would just use a boolean to show and hide the element. So check if the checkbos is checked, and set it to visible, otherwise set it to false
var element = <HTMLInputElement> document.getElementById("otherchk");
var isChecked = element.checked;
isChecked ? this.isVisible : !this.isVisible
Then use the hidden selector in your html
<div class="main">
<label>Select an option </label>
<select>
<option value="user123"> user123 </option>
<option value="user234"> user234 </option>
<option value="user345"> user345 </option>
<option value="user456"> user456 </option>
<option value="Other" id="otherchk"> Other </option>
</select>
<input type="text" [hidden]="isVisible == false" maxlength="7" id="custom" </input>
</div>
I would love to make a select box, which has checkboxes inside. Something like this:
<form>
<select name="cars">
<option value="volvo"><input type="checkbox" name="volvo">Volvo XC90</option>
<option value="saab"><input type="checkbox" name="saab">Saab 95</option>
<option value="mercedes"><input type="checkbox" name="mercedes">Mercedes SLK</option>
<option value="audi"><input type="checkbox" name="audi">Audi TT</option>
</select>
<input type="submit" value="Submit">
</form>
Is this possible? It is not for multiple selection. It means the selected value is independent from the checkboxes.
check below link, it may usefull
www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/