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>
Related
<div class="dx-field"> <dx-text-box #userLogin label="userName" [(value)]="login" placeholder="UserName or email" width="100%"> <dx-validator> <dxi-validation-rule type="required" message="UserName Required"></dxi-validation-rule> </dx-validator> </dx-text-box> </div> How to add a associate label to the dx-text-box control
I have created a login page by giving username and password under textbox control. Now lighthouse showing me the error of. Forms do not have associate labels. How to fix it?
I encourage you to review how label works in HTML, see MDN.
Here is an Angular example from angular.io:
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
However, please read the HTML content I shared above, otherwise you will have more problems. Just my 2 cents.
I'm having issues when trying to type in the input field of the HTML form is getting autorefresh as soon as I try to write on it, it is occurring just in phones link of the page: https://cheerful-cranachan-2e938c.netlify.app/?prefijos=%2B55&celular=12312#
I think most likely is regarding a slider interval of images I have on the page but I don't want to take it off.
<form action="#">
<label for="prefijos"></label>
<select name="prefijos" id="prefijos">
<option value="+57">+57</option>
<option value="+58">+58</option>
<option value="+55">+55</option>
<option value="+59">+59</option>
<input class="phone" type="text" name="celular" placeholder="Celular">
</select>
<button class="btn btn-form">Enviar</button>
</form>
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
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>
This is my first question in Stack Overflow!
So, I'm trying to align (horizontal) all labels of my form, but, without success. My HTML is:
<form class="form-inline" id="form-filtro" role="form">
<div class="form-group">
<label class="control-label" for="filtrar-por">Filtrar por</label>
<select class="form-control" id="filtrar-por">
<option value="id">ID</option>
<option value="id">Nome</option>
<option value="id">Nome comercial</option>
<option value="id">CPF/CNPJ</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="filtro">Filtro</label>
<input type="text" class="form-control" id="filtro">
</div>
</form>
But, the result is:
What am I doing wrong?
I went to the bootstrap site and pasted your form code directly over the top of the example form-inline demo and things worked fine.
I did however encounter an issue if I manually styled the form to restrict it's maximum width. It looks like your form may not have enough room to display and so the label is wrapping.
Check the styles on the form in your stylesheet, or on the containing element to see if something is restricting the size.
It would also help if you posted a minimalist reproduction of your issue. ;-)