Suddenly I am in doubt, how do you have a predefined text in a form, but the text cannot be chosen. More like a text there is defining the subject on the form.
I have this short form here.
<div class="form-group">
<label class="sr-only" for="cars">H</label>
<select id="cars" name="cars" class="form-control" required>
<option>Cars</option>
<option>Lamborghini</option>
<option>Volvo</option>
<option>Toyota</option>
<option>Chervolet</option>
</select>
</div>
So the main point is that cars should be in the form field but we should not be able to choose it. Any one knows how to do that?
<option disabled>Cars</option>
http://www.w3.org/TR/html5/forms.html#attr-option-disabled
https://developer.mozilla.org/en/docs/Web/HTML/Element/option#Attributes
Related
I have been working on a project that will ask users for their details and then underneath a bunch of questions. The details section uses a form with gutters (unsure if that is correct terminology). But i want to be able to input the questions and have them come down 1 by 1 in order. And not by the side of eachother like it does for inputting the details.
This is the link i used for the gutters- https://getbootstrap.com/docs/5.1/forms/layout/
This is the link to what the details page looks like - https://imgur.com/a/yI7R09H
And i want it the questions like this underneath - https://imgur.com/a/qu0qjfm
However they must be in the same form otherwise my code wont work and unsure to change it to submit the form from two pages...
Code of both parts - https://pastebin.com/5nbavuUt
/* Code From Details */
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name</label>
<input type="name"
class="form-control"
id="site_name"
name="site_name"
value="<?php if(isset($_GET['site_name']))
echo ($_GET['site_name']); ?>"
placeholder="Enter Site Name"
required><br>
</div>
/*Code From Questions */
<div class="form-group">
<h6 for="q9">9. Is there clear access to the position of the Machine(s)   (e.g. acess through doors)</h6>
<select class="form-select form-select-sm" name="q9">
<option selected>Choose</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
</select>
</div>
I am learning web development. I am at html forms.
I understand that we can use
<label>a:
<input type="text">
</label>
or same thing can be done like this
<label for="name">a:</label>
<input id="name" type="text">
for the selction of option say we want user to choose D.O.B from drop down menu Can we use the <label>tag
1st way:-
<label>Birthday:
<select><option>1<option><option>2<option></select>
<select><option>jan<option><option>feb<option></select>
<select><option>2001<option><option>2002<option></select>
</label>
OR
But how can we use this format what to use at for=""
<label for="birthday?????">Birthday:</label>
<select id="day"><option>1<option><option>2<option></select>
<select id="month"><option>jan<option><option>feb<option></select>
<select id="year"><option>2001<option><option>2002<option></select>
You cannot associate a label element with more than one control. This is described in the definition of label.
You could give each select element its own label.
A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.
A label associates some text with one input-field. So in your case you would have to split it up like this. You can also add a fieldset to group multiple formelements (and use legend to describe the gruop):
<fieldset>
<legend> Enter your birthdate</legend>
<label for="day">Day:</label>
<select id="day"><option>1<option><option>2<option></select>
<label for="month">Month:</label>
<select id="month"><option>1<option><option>2<option></select>
<label for="year">Year:</label>
<select id="year"><option>1<option><option>2<option></select>
</fieldset>
you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):
<label id="date">Check in date</label>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
or
<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
<!-- ... -->
</select>
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
<!-- ... -->
</select>
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
<!-- ... -->
</select>
Reference link :- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
I copied a code where it works good in mozilla but, when i go to chrome it doesn't work correctly. I have this in mozilla, where it works like it is an input type where when you type the start letter, the select box will show something like it suggest.
Here is the code :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" id="labelcheck-up" for="fname">Diagnosis:</label>
<div class="col-sm-2">
<select name="tdiagnosis[]" id="tdiagnosis" class="form-control select2" multiple="multiple" data-placeholder="Please input diagnosis here">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Goat">Goat</option>
</select>
</div>
</div>
</form>
Here is jsfiddle link:
https://jsfiddle.net/DTcHh/40338/
Any suggestions how to make this work in google chrome? Thanks.
For instance, I have a page that has some forms that are directives. I would like to store every input element on the page into a variable, but some of these elements are hidden behind ng-if's.
How can I get these elements regardless of whether or not they are currently visible on the view? Currently I am using
var selects = document.getElementsByTagName('select');
This is ran on the directive that corresponds with the templateHTML below:
<div>
<label>Are you planning to attend a commencement ceremony at the Athens Campus? </label>
<select id="ceremony" name="ceremony" ng-model="gradCeremony" ng-options="option.value as option.name for option in options" required>
<option value="">Selection Required</option>
</select>
</div>
<div>
<label class="control-label" for="regional-ceremony">Are you planning to attend a recognition ceremony at one of the regional campuses?</label>
<select id="regional-ceremony" ng-model="regionalCeremony" ng-options="option.value as option.name for option in options">
</select>
</div>
<!-- This one is hidden by default -->
<div ng-if="regionalCeremony">
<label>Please indicate the regional campus</label>
<select id="regional-campus-ceremony" ng-model="regionalCeremonyCampus" ng-options="c.code as c.name for c in campuses" required>
<option value="">Selection Required</option>
</select>
</div>
As you can see, that last option is hidden behind an ng-if. It is not picked up in the array of inputs like I would like it to be.
This code is called with this in the html:
<form name="Form" commencement application="application" campuses="campuses" submitting="submitting"></form>
I have 2 select boxes called country and city. When i select a value from country box onchnage event is fired and cities will be loaded using an ajax request.
But when i use the tabs to navigate there are some issues.
Process.
Press tab key and get to country select box
press a key like 'M' to find values starting from 'M'
Then click tab again
The second tab click should focus the city box. But its not working only the 3rd tab click is focusing the city select box.
Do you have any idea of solving this??
Code
<label>Country * : </label>
<select tabindex="1" onchange="loadCities(this.options[this.selectedIndex].value,'url')" id="cmbDistric" name="cmbDistric">
<option value="0">Select</option>
<option value="1">Colombotest</option>
<option value="2">Colombotest</option>
<option value="3">Colombotest</option>
</select>
<label>City * : </label>
<select tabindex="6" >
<option value="0">Select</option>
</select>
This W3C document explains how to control the tabbing order. Basically, you can use tabindex to control the tabbing order. Here's the relevant part of their sample code, complete with unfortunate HTML 4-isms:
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
Similar information (without the HTML 4 sample code) is in the HTML5 draft.