I would like to know how to include a require for different element like checkbox, select ... not alone but inside a group element
I tried this, but it doesn't seem to work as expected
<div class="form-group aria-required="true">
<div class="radio">
<ul class="list-unstyled">
<li>
<input type="radio" name="radio1">
<input type="radio" name="radio2">
<input type="radio" name="radio3">
</li>
</ul>
</div>
</div>
The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned.
HTML5 now has the required attribute, but aria-required is still useful for user agents that do not yet support HTML5.
Used in ARIA roles
Combobox
Gridcell
Listbox
Radiogroup
Spinbutton
Textbox
Tree
A simple form
<form action="post">
<label for="firstName">First name:</label>
<input id="firstName" type="text" aria-required="true" />
<br/>
<label for="lastName">Last name:</label>
<input id="lastName" type="text" aria-required="true" />
<br/>
<label for="streetAddress">Street address:</label>
<input id="streetAddress" type="text" />
</form>
Working Examples:
Link
Related
I have some disabled input text fields that I want the text color to be black because it's too greyed out.
I know its a simple one-line code but it won't work for some reason.
Other CSS properties work while it's disabled like the background color and stuff but not the text color.
Here's the CSS:
input[type="text"]:disabled {
color: black;
}
Here's the HTML:
<div class="form-container">
<label for="name">Full Name:</label>
<input id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
This is what it looks like on the android emulator running API 28.
I'm not sure why other properties work but not the text color.
Any ideas?
P.S. this is a cordova project and i am building it in Jquery Mobile v1.4.5
Nice to reply to you about the issue you are facing.
Since, you are using Jquery Mobile. The Jquery mobile on DOM generates div covering the input box. Since, you are also using disabled property of input box. So, jquery mobile implements a class on that div and there the opacity level have been defined.
So, add this:-
.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }
Working Fiddle :- https://jsfiddle.net/h3Lbadgv/1/
Hope it works for you.
Thanks
Can you use this one.
.form-container input:disabled{color: black}
<div class="form-container">
<label for="name">Full Name:</label>
<input value="XXXPPPAAPP" id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input value="XXXPPPAAPP" id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input value="XXXPPPAAPP" id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input value="XXXPPPAAPP" id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
Hope It Helps.
I have been trying to figure out how to make a custom field form that is responsive on Shopify.
<div class="one-whole">
<div class="one-half">
<label for="groom_name">Groom's First Name</label>
<input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
</div>
<div class="one-half">
<label for="bride_name">Bride's First Name</label>
<input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
</div>
<label for="last_name">Last Name</label>
<input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
<label for="wedding_date">Wedding Date</label>
<input required type="date" name="wedding_date">
<label for="city">City</label>
<input required type="text" id="city" name="properties[City]" placeholder="City">
<label for="state">State</label>
</div>
That is the code and this is what I get.
I have tried doing whole and one-half and separating each input into its own div. The always seem to be left justified and now wrapping.
I would like Groom Name and Bride Name to be on the same line. But when on mobile to collapse.
This question is about css not liquid or shopify.
The classes your are looking for are documented here.
Try something like grid__item small--one-whole medium--one-half
I have a simple HTML form that uses the Twitter Bootstrap framework (v3.1.1). On the smartphone/iPhone these checkboxes are quite small and hard to select with your finger. I would like to make them larger/more spaced out so they are easier to hit but haven't found a way so far - is this even possible.
Here's my form html:
<div class="container">
<div>
<p>Tick all that apply:</p>
<form role="form" action="continue.php" method="post">
<input type="hidden" name="selectionID" value="4567">
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
<input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
<input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
<input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
<input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
<input type="checkbox" name="selection[]" value="Other">Other<br>
</label>
</div>
<button type="submit" class="btn btn-primary">Next</button>
</form>
</div>
</div>
I've also setup a jsfiddle here
This isn't easy to do cross-broswer .. check out the study made here: http://www.456bereastreet.com/lab/form_controls/checkboxes/
Also, make sure you're using correct HTML code. You should wrap each of your checkboxes with label, like this:
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
</label>
<!-- etc. -->
</div>
This site:
http://proto.io/freebies/onoff/
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
The issue with this is the labels seem to require the use of the for attribute and the checkboxes require an id. Obviously with a form of many checkboxes this could prove quite annoying to have to create unqiue id's all the time. I altered it slightly (the css is on the fiddle), but does anyone know if there is a reason the checkbox was originally placed outside the label and not within? It seems to work fine within..
http://jsfiddle.net/UJw4F/
<div class="onoffswitch">
<label class="onoffswitch-label">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
This other guy has done the same with placing the checkbox outside the label:
http://cssdeck.com/labs/radio-buttons-clean
w3.org - Any input element descendant of a label element with a for attribute must have an ID value that matches that for attribute
Without the 'for' attribute
You can do
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<label class="onoffswitch-label">My Label</label>
And the label will be associated with the checkbox
Follow me #mickjguy
i know it is pure semantic way
<form action="" method="">
<fieldset>
<legend>Contact Form</legend>
<label for="name">Name</label>
<input name="name" id="name" size="20" />
</fieldset>
<form>
But some time for some design purpose it's not sufficient to get needed style. so my question is other than this purely semantic method
isn't this code is also semantic (after pure semantic method) because form is a group of ordered fields which we fill one by one
ol {
list-style: none;
padding-left: 0;
}
<form action="" method="">
<fieldset>
<legend>Contact Form</legend>
<ol>
<li>
<label for="name">Name</label>
<input name="name" id="name" size="20" />
</li>
<li>
<label for="email">Email</label>
<input name="email" id="email" size="20" />
</li>
<li>
<label for=" Choices"> Choices (radio)</label>
<input type="radio" name=" Choice" /> Choice 1
<input type="radio" name=" Choice" /> Choice 2
<input type="radio" name=" Choice" /> Choice 3
</li>
<li>
<label for=" Choices3"> Choices (checkbox)</label>
<input type="checkbox" name=" Choice3" /> Choice 1
<input type="checkbox" name=" Choice3" /> Choice 2
<input type="checkbox" name=" Choice3" /> Choice 3
</li>
<li>
<label for="dropdown">Question</label>
<select id="dropdown">
<optgroup label="Group of Options">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
</select>
</li>
<li>
<label for="message">Message</label><br />
<textarea name="message"rows="12" cols="36"></textarea>
</li>
<li><input type="submit" value="send it" /></li>
</ol>
</fieldset>
</form>
If the form fields are meant to be completed in a particular order, then yes, I would say an ordered list is semantically meaningful for separating form elements.
If you want to add extra elements to allow more layout styling hooks from CSS, but which have no semantic content in themselves, use <div> (or <span> for inline). That's what they're there for.
You should use a definition list, that way your label / input are linked to one another through the for and id, but also through the definition title (label) and definition description (input).
That way you can do some good styling or hide some stuff if needed.