I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.
Related
I have a WordPress website with a bar at the top that I can add custom code to.
I'm trying to add an Infusionsoft email signup form to this bar and I want everything to be on the same line. Currently it's showing the field label on the first line, then the email field on the second line and then the submit button on the third line.
I can add whatever code I need to this form and this custom code box and I can also add custom CSS to the theme options themselves.
I've tried a bunch of things and some of them almost work but I can't figure this out.
Any help would be greatly appreciated.
Here's my form code:
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text">
</div>
<div>
<div> </div>
</div>
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
I moved the infusion submit div inside the infusion field div. I used display flex and flex-direction row to achieve them on the same row.
I know you're using word press and probably just copy and pasting code. If you plan to do web design work it would be well worth it to study up on HTML and CSS. It's actually not that complicated and you'll have so much control over how things look on your site!
*Edit to center content
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field" style="display:flex; flex-direction: row; justify-content: center;">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" style="margin-right: 10px;">
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
I was looking how a bootstrap form looks like, And I saw something that looks pretty much like this:
<div class="form-group">
<label for="inputA">Some Input:</label>
<input type="text" name="Input" id="inputA" class="form-control">
</div>
And it's really bothers me to do the for attribute every time. so, my question is, Is it possible to do somethig like this?:
<label class="form-group">
<span>Some Input:</span>
<input type="text" name="Input" id="inputA" class="form-control">
</label>
And is there any possible issues working this way?
The for simply toggles the control for the form input. Essentially, when you click the label, the form element is focused upon, or selected, depending on what type of form element it is. You do not have to include the for on each label; however, this is just common practice. I would not swap the label for a span though, I would simply do this...
<div class="form-group">
<label class="col-sm-2 control-label">Your Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="foo">
</div>
</div>
I'm currently implementing accessibility website to meet the Level AA Conformance
One of the things that I do not meet the correct labeling of the elements on the forms.
Currently my HTML structure is this:
<label for="edit-title">Text</label>
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
I would change the structure to this other.
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<label for="edit-title">Text</label>
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
Order to have the "input" tag after the label tag.
My question is if there is any possible way to make this change easily in Drupal.
Thanks.
Best Regards.
Yo can edit template archive .tpl or create one in theme options in views module. In this template you can add and modify elements.
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
I want to use html input elements in twitter bootstrap. I have a label on the left and an input element on the right. I pretty much used the example given in the bootstrap documentation. But my problem is that I don't have IDs for every input element and so I can't specify the "for"-value of the labels.
My solution in previous projects was wrapping the input element with a label, but this results in a wrong styling when I use bootstrap.
<div class="control-group">
<label class="control-label">MyTitle:
<div class="controls">
<input type="text" value="..." />
</div>
</label>
</div>
Will this work for you?
<div class="control-group">
<div class="controls">
<label class="control-label">MyTitle:
<input type="text" value="..." />
</label>
</div>
</div>