Content Collapsible jquery mobile - jquery-mobile

I have a problem with jQuery Mobile 1.1.0 accordion ( http://jquerymobile.com/test/docs/content/content-collapsible.html )
I have a page with more accordion, and when I press to open / close the section brings me back to the top of the page.
I have already set:
ajaxEnabled: false;
hashListeningEnabled: false;
linkBindingEnabled: false;
this is my code:
<!-- anagrafica -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>Scheda cliente</h3>
<!-- Dati azienda -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="c" class="grid-scheda">
<h3>Anagrafica</h3>
<form id="dati-azienda">
<div data-role="fieldcontain">
<label for="ragionesociale">Ragione Sociale:</label>
<input type="text" name="ragionesociale" id="ragionesociale" class="required fullsize" />
</div>
<div data-role="fieldcontain">
<label for="indirizzo">Indirizzo:</label>
<input type="text" name="indirizzo" id="indirizzo" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="localita">Località:</label>
<input type="text" name="localita" id="localita" class="large" />
<input type="text" name="cap" id="cap" class="small" placeholder="CAP" />
</div>
<div data-role="fieldcontain">
<label for="pi">Partita IVA:</label>
<input type="number" name="pi" id="pi" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="fisso">Fisso:</label>
<input type="number" name="fisso" id="fisso" class="medium" />
<input type="number" name="fax" id="fax" class="medium" placeholder="Fax" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<!--
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Altre sedi:</legend>
<input type="checkbox" name="checkbox-0" style="margin-top:0px;" id="checkbox-mini-0" data-mini="true" />
<label for="checkbox-mini-0">Si</label>
</fieldset>
</div>
-->
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-azienda" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati Azienda -->
<!-- Dati Referente -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Dati Referente</h3>
<form id="dati-referente">
<div data-role="fieldcontain">
<label for="cognome">Referente:</label>
<input type="text" name="cognome" id="cognome" class="small2" placeholder="Cognome" />
<input type="text" name="nome" id="nome" class="small2" placeholder="Nome"/>
<input type="text" name="dt_nascita" id="dt_nascita" class="small2" placeholder="Data nascita"/>
</div>
<div data-role="fieldcontain">
<label for="posizione">Posizione:</label>
<input type="text" name="posizione" id="posizione" class="medium" />
<input type="text" name="reperibilita" id="reperibilita" class="medium" placeholder="Reperibilità" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="medium" />
<input type="number" name="fisso" id="fisso" class="medium" placeholder="Fisso" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="referente2">Referente alternativo:</label>
<input type="text" name="referente2" id="referente2" class="fullsize" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-referente" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati referente -->
<!-- caratteristiche -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Caratteristiche</h3>
<div data-role="fieldcontain">
<label for="x">Consistenza attiva:</label>
<input type="text" name="x" id="x" class="small" />
</div>
</div><!-- /caratteristiche -->
<!-- registrazione -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Registrazione 190</h3>
<form id="registrazione">
<div data-role="fieldcontain">
<label for="userid">User ID:</label>
<input type="text" name="userid" id="userid" class="small2" />
<input type="text" name="passw" id="passw" class="small2" placeholder="Password" />
<input type="date" name="dt_registrazione" id="dt_registrazione" class="small2" />
</div>
<?php for($i=1;$i<=2;$i++) { ?>
<div data-role="fieldcontain">
<label for="analisi_ft_num">Analisi Fattura:</label>
<input type="text" name="analisi_ft_num[]" id="analisi_ft_num" class="medium" placeholder="Nr. Fattura" />
<input type="date" name="dt_doc[]" class="medium" />
</div>
<?php } ?>
<div data-role="fieldcontain">
<label for="codice_cliente">Codice Cliente:</label>
<input type="text" name="codice_cliente" id="codice_cliente" class="medium" />
<input type="text" name="ciclo_fatturazione" id="ciclo_fatturazione" class="medium" placeholder="Ciclo Fatturazione" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="registrazione" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /registrazione -->
</div>
<!-- /anagrafica -->
Thanks in advice

It is not very clear as to what exactly the interface is supposed to look like. However, please look at the documentation: http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html
The link you pasted is for a test demo, but the syntax seem to have changed since then.

Related

Passing Current Model to partial View, Handling Large from Server To Clients

i want to pass All Input values of View to My Partial View(Passing User Order to Show Order Summary) but all values got null in partial View Below is My Code.
Submit
<div id="myModal_#Model.CustRef" class="modal fade" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
...Disabled Inputs...
</div>
</div>
</div>
</div>
My Create Order View
<form asp-action="Create">
....
#*<partial name="~/Views/Order/OrderSummary.cshtml" model="Model" />*#
#await Html.PartialAsync("~/Views/Order/OrderSummary.cshtml", new OrderViewModel() { cus_name = Model.cus_name, cus_phone = Model.cus_phone, CustRef = Model.CustRef, Phoneid = Model.Phoneid, modelId = Model.modelId, Quantity = Model.Quantity, Address = Model.Address, CityId = Model.CityId, Date = Model.Date, store_id = Model.store_id })
</form>
Second Question
My Second Question is i have large data to pass to View(Admin Dashboard) to Complete Statistics but its taking too much time. Please tell me any other Efficient way to increase performance.
You need to pass the current input model to the controller through ajax and return
to render the new partial view.
Please refer to the following code:
Controller:
public class OrderController : Controller
{
public IActionResult Index()
{
OrderViewModel orderView = new OrderViewModel();
return View(orderView);
}
public PartialViewResult ShowParitalView(OrderViewModel orderView)
{
return PartialView("OrderSummary", orderView);
}
}
Index view:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script>
$(function () {
$("a").click(function () {
event.preventDefault();
$("div .modal").attr("id", "myModal_" + $("#cus_name").val());
$("a").attr("data-target", "#myModal_" + $("#cus_name").val());
$.ajax({
type: "POST",
url: "/Order/ShowParitalView",
data: $("form").serialize(),
success: function (data) {
$('#partial').html(data);
$("#myModal_" + $("#cus_name").val()).modal('show');
}
})
})
});
</script>
}
<form asp-action="Create">
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" />
<span asp-validation-for="cus_name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" />
<span asp-validation-for="cus_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" />
<span asp-validation-for="CustRef" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" />
<span asp-validation-for="Phoneid" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" />
<span asp-validation-for="modelId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" />
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" />
<span asp-validation-for="store_id" class="text-danger"></span>
</div>
<a href="#" data-toggle="modal" data-target="#myModal_#Model.CustRef"
style="border-radius: 1.5rem; margin-right:8%; margin-top: 1%; border: none;
padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%;
cursor: pointer; text-align:center; font-weight:bolder;">
Submit
</a>
<div id="myModal_#Model.CustRef" class="modal" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
<div id="partial">
</div>
</div>
</div>
</div>
</div>
</form>
OrderSummary Partial View:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" disabled/>
</div>
Here is the result:
For the second question, there are too many SQL query statements in your code, you can try to improve performance by referring to this.

rails amp form error request and response access-control-allow-origin

i'm using rails amp and setting my amp route for contact form
<form id='contactusform' method="POST" class="p2" action-xhr = "<%= addquery_path %>" custom-validation-reporting="as-you-go" target="_top">
<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="as-you-go-name" pattern="p{L}+\s\p{L}+" class="inline-label-input input-item" name='name' value="" required />
<span class="inline-label-label">Name</span>
</label>
<div class="validation-blk">
<span visible-when-invalid="valueMissing" validation-for="as-you-go-name">Please enter your first name</span>
<span visible-when-invalid="patternMismatch" validation-for="as-you-go-name">Please enter characters only</span>
</div>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="email" id="as-you-go-email" class="inline-label-input input-item" value="" name='email' required />
<span class="inline-label-label">Email</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="as-you-go-email">Please enter your email address</span>
<span visible-when-invalid="typeMismatch" validation-for="as-you-go-email"></span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="number" id="phone-number" name='phone' class="inline-label-input input-item" value="" required />
<span class="inline-label-label">contatct number</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="phone-number">Please enter your phone number</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Cityname" name='city' pattern="\w+\s\w+" class="inline-label-input input-item" value="" required />
<span class="inline-label-label">City</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Cityname">Please enter your City</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Statename" pattern="\w+\s\w+" class="inline-label-input input-item" name='state 'value="" required />
<span class="inline-label-label">State</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Statename">Please enter your State</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Country" pattern="\w+\s\w+" class="inline-label-input input-item" name='country' value="" required />
<span class="inline-label-label">Country</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Country">Please enter your Country</span>
</div>
</div>
<div class="form-row">
<div class="inline-form selectionbox">
<label class="inline-label">
<select class="select-box custom-select" required name="eventtype"
id="eventtype">
<option value="">QUERY TYPE</option>
<% #app_config.event_type.split('|').each do |event_name,index| %>
<option value="<%= event_name %>"><%= event_name %></option>
<% end %>
</select>
</label>
<span visible-when-invalid="valueMissing" validation-for="eventtype">selectoption message appears like this</span>
</div>
</div>
<div class="form-row">
<div class="ampstart-input inline-block relative">
<textarea name="message" id="message" class="block" rows="5" cols="50" required placeholder="your message"></textarea>
<!-- <label class="textarea-ab" aria-hidden="true">
Your message
</label> -->
<span visible-when-invalid="valueMissing" validation-for="message"></span>
</div>
</div>
<div class="button button-common">
<input type="submit" value="OK" class="ampstart-btn caps">
</div>
<!-- social icons -->
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
And my controller saves the form in my database, but the browser throws an error.
def addquery
#contact = Lead.new
#contact.name = params[:name]
#contact.email = params[:email]
#contact.phone = params[:phone]
#contact.city = params[:city]
#contact.state = params[:state]
#contact.country = params[:country]
#contact.enquiry_type = params[:eventtype]
#contact.message = params[:message]
#contact.save
end
when i try to submit my AMP form it showing
amp form error request must have access-control-allow-origin
in my browser console.
as well as the
response must have access-control-allow-origin
Set access-control-allow-origin: <your domain> as a response header in the form handler in rails.
Example, if you are running on localhost set form response header as access-control-allow-origin: http://localhost:3000

bootstrap Form Layout --horizontal with labels on top

I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>

Set inline 2 control group jQuery Mobile

I would like to align 2 control group with jQuery Mobile. I use the the version 1.4.2.
This is what I have : http://i.stack.imgur.com/qEAav.png
And this is what I would like to do : http://i.stack.imgur.com/NA9YR.png
My currently code is :
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie" align="center">
Fermer la liste
</br>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
<label for="loadEPT">ETP</label>
</fieldset>
</form>
</div>
</h3>
If there are pro jQuery Mobile I'll glad to solve my problem.
Thanks in advance.
See if this works for you:
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
<label for="loadEPT">ETP</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
Fermer la liste
</fieldset>
</div>
</h3>
CSS to line things up and add spacing:
#btnPaie {
text-align: center;
}
#btnPaie form, #btnPaie fieldset {
display: inline;
}
#btnPaie fieldset {
margin: 1em;
}
DEMO

Styling the controlgroup buttons in Jquery Mobile

I have a controlgroup with grouping 3 radio buttons to look like buttons, and what I want to do is to to colour the button on click of each one. Clicking the "Red" will change the colour of the button to "Red"
The code is below
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="rd1" id="rd1" value="R" />
<label for="rd1">Red</label>
<input type="radio" name="rd2" id="rd2" value="G" />
<label for="rd2">Green</label>
<input type="radio" name="rd3" id="rd3" value="B" />
<label for="rd3">Blue</label>
</fieldset>
Can somebody please help me on this.
Live Example:
http://jsfiddle.net/phillpafford/fAYEw/5/
JS
$('input[name=rdColor]').change(function() {
$(this).next().addClass($(this).val());
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="rdColor" id="rd1" value="R" />
<label for="rd1">Red</label>
<input type="radio" name="rdColor" id="rd2" value="G" />
<label for="rd2">Green</label>
<input type="radio" name="rdColor" id="rd3" value="B" />
<label for="rd3">Blue</label>
</fieldset>
</div>
</div>
</div>
CSS
.R {
background:red;
}
.B {
background:blue;
}
.G {
background:green;
}

Resources