JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<body onload="remover()">
<div data-role="page">
<div data-role="main" class="ui-content">
<div class="y">
<center>
<h3 id="regist" class="i">REGISTRATION</h3>
<img id="line" src="bar_bottom_selected2.png"/>
</center>
<form id="process2" method="post" action="testjsp.jsp">
");
<input type="text" value="<%=mdn%>" name="mnum" id="mnum" style="display: none;">
<input type="text" value="<%=typ%>" name="typ" id="typ" style="display: none;">
<input type="text" value="<%=operator%>" name="operator" id="operator" style="display: none;">
<center>
<label for="male" ID="FIRST">
<img id="img" src="male.png">
<br>
<input id="male" type="radio" name="gender" value="male" required checked >
</label>
<label ID="SECOND">
<img id="img" src="Female.png">
<br>
<input id="gfemale" type="radio" name="gender" value="female" required>
</label>
</center>
<fieldset>
<label for="dob" style="color: black;">Date of Birth:</label>
<input type="date" id="dob" name="dob" max="<%=sdf.format(cal.getTime())%>">
<p id="x1"></p>
</fieldset>
<div...
CSS
.ui-page {
background-image: url('bg.jpg');
text-shadow: 0 0px 0 #f3f3f3;
}
.ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a {
background-color: #fff;
border-color: transparent;
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
}
.y{
background-image: url('CHECKBAR4.png');
background-size: cover;
margin-top: 15%;
}
#x1{
color: red;
size: A5;
}
.ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a {
background-color: #fff;
border-radius: 25px;
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
}
#regist{
padding-top: 3%;
margin-bottom: -3%;
}
#FIRST{
display: inline; float: left;
background-color: inherit;
}
#SECOND{
display: inline; float: right;
background-color: inherit;
}
.ui-checkbox input, .ui-radio input {
height: 22px;
left: 5.2em;
margin: -11px 0 0;
outline: 0 none !important;
position: absolute;
top: 98%;
width: 22px;
z-index: 1;
}
...
JavaScript
$(document).ready(function() {
$("#skip").click(function() {
$(location).attr('href', "offers");
});
$("#submit").click(function() {
var dob = $("#dob").val();
var c = 0;
if (dob === '') {
$( "#x1" ).text( "Invalid Date Of Birth" ).show();
} else {
$( "#x1" ).hide();
c = 1;
}
if (c === 1) {
$("#process2").submit();
}
});
});
function remover(){
$( "#FIRST" ).removeClass("ui-btn ui-btn-inherit");
$( "#SECOND" ).removeClass("ui-btn ui-btn-inherit");
}