Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm working on a website for kids to learn maths and physics :)
There are two problems I couldn't find the solution to :
I want to move the operations fieldset to inside Basic math Operations.
I want to make all titles of fieldsets on the same line and make all fieldsets the same size.
Thanks for your patience
This is my code :
Ps: I'm not a professional programmer I'm just a math teacher and not an English native speaker sorry if there is an error in my language.
function clickSolve()
{
let temp=document.getElementsByName("op");
let op=getOp(temp);
let num1= parseInt(document.getElementById("num1").value) ;
let num2=parseInt( document.getElementById("num2").value);
let num3=myOperation(num1,num2,op);
document.getElementById("result").innerText=num3;
}
function getOp(oparr)
{ // Get wich radio button is checked
for(let i=0;i<oparr.length;i++)
{
if(oparr[i].checked)
{
return oparr[i].value;
}
}
}
function myOperation(num1,num2,op)
{
switch(op){
case "+":
return num1+num2;
case "-":
return num1-num2;
case "*":
return num1*num2;
case "/":
return num1/num2;
}
}
function getFactirial(){
let num=document.getElementById("factNumber").value;
document.getElementById("factResult").innerText=factorial(num);
}
function getFibonacci(){
let num=document.getElementById("fibonacciNumber").value;
document.getElementById("fibResult").innerText=fibonacci(num);
}
function factorial(x) {
// find the factorial of a number
// if number is 0
if (x == 0) {
return 1;
}
// if number is positive
else {
return x * factorial(x - 1);
}
}
function fibonacci(x)
{
// find the fibonacci of a number
if(x<=1){
return x;
}
else{
return fibonacci(x-1)+fibonacci(x-2);
}
}
let slider = document.getElementById("temperatureValue");
let output = document.getElementById("tValue");
let fahrenheitVar=0;
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
fahrenheitVar=((this.value/5)*9)+32;
document.getElementById("fahrenheitVal").innerText=parseInt(fahrenheitVar);
}
function getRndInteger(min, max)
{
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
body{
background-color: #1E0555;
font-family: cursive;
}
.div_style {
background-color:#F0DB4F;
align-content: center;
font-size: large;
padding: 10px;
border-radius: 5px;
}
.tableStyle {
width: fit-content;
align-content: center;
}
.fieldsetStyle{
color: #F0DB4F;
border: 2px solid #F0DB4F;
height: 50%;
}
.textbox1 {
width: 25%;
margin-left: 20px;
border: 1px solid black;
margin-bottom: 5px;
}
.textbox2 {
width: 25%;
border: 1px solid black;
}
.btn {
border: 1px solid black;
border-radius: 4px;
font-size: 16px;
font-family: cursive;
margin-left: 25%;
cursor: pointer;
padding: 5px;
}
.liststyle {
list-style: none;
color: black;
}
.lableStyle{
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>English site</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table class="tableStyle">
<tr class="trStyle">
<td>
<fieldset class="fieldsetStyle">
<legend>Basic math Operations</legend>
<div class="div_style" id="div_back">
<label class="lableStyle" for="num1">First Number:</label>
<input class="textbox1" type="text" id="num1" /><br />
<label class="lableStyle" for="num2">Second Number:</label>
<input class="textbox2" type="text" id="num2" /><br />
<label class="lableStyle" for="">Result: </label>
<label class="lableStyle" for="" id="result"></label>
<br /><br />
<button class="btn" onclick="clickSolve();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Operations</legend>
<div class="div_style">
<li class="liststyle">
<input type="radio" name="op" value="+" checked /> +
</li>
<li class="liststyle">
<input type="radio" name="op" value="-" /> -
</li>
<li class="liststyle">
<input type="radio" name="op" value="*" /> *
</li>
<li class="liststyle">
<input type="radio" name="op" value="/" /> /
</li>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Find factorial</legend>
<div class="div_style">
<label class="lableStyle" for="">Number:</label>
<input type="number" id="factNumber" min="0" max="7" />
<br />
<label class="lableStyle" for="">Factorial is:</label>
<label class="lableStyle" id="factResult" for="">?</label><br />
<button class="btn" onclick="getFactirial();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Find fibonacci</legend>
<div class="div_style">
<label for="" class="lableStyle">Number:</label>
<input type="number" id="fibonacciNumber" min="0" max="9" /><br />
<label for="" class="lableStyle">Fibonacci is:</label>
<label for="" class="lableStyle" id="fibResult">?</label><br />
<button class="btn" onclick="getFibonacci();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Temperature converter</legend>
<div class="div_style">
<label for="" class="lableStyle">Temperature celsius:</label>
<input
type="range"
id="temperatureValue"
min="0"
max="100"
step="1"
/>
<label for="" class="lableStyle" id="tValue">0</label><br />
<label for="" class="lableStyle">Fahrenheit:</label>
<label for="" class="lableStyle" id="fahrenheitVal">?</label>
</div>
</fieldset>
</td>
</tr>
</table>
<script src="jsfuctions.js"></script>
</body>
</html>
body {
background-color: #1E0555;
font-family: cursive;
}
.div_style {
background-color: #F0DB4F;
align-content: center;
font-size: large;
padding: 10px;
border-radius: 5px;
width: 100%;
}
.tableStyle {
width: fit-content;
}
.fieldsetStyle {
color: #F0DB4F;
border: 2px solid #F0DB4F;
height: 50%;
display: flex;
}
.textbox1 {
width: 25%;
margin-left: 20px;
border: 1px solid black;
margin-bottom: 5px;
}
.textbox2 {
width: 25%;
border: 1px solid black;
}
.btn {
border: 1px solid black;
border-radius: 4px;
font-size: 16px;
font-family: cursive;
margin-left: 25%;
cursor: pointer;
padding: 5px;
}
.liststyle {
list-style: none;
color: black;
}
.lableStyle {
color: black;
}
tbody {
vertical-align: top;
}
<table class="tableStyle">
<tr class="trStyle">
<td>
<fieldset class="fieldsetStyle">
<legend>Basic math Operations</legend>
<div class="div_style" id="div_back">
<label class="lableStyle" for="num1">First Number:</label>
<input class="textbox1" type="text" id="num1" /><br />
<label class="lableStyle" for="num2">Second Number:</label>
<input class="textbox2" type="text" id="num2" /><br />
<label class="lableStyle" for="">Result: </label>
<label class="lableStyle" for="" id="result"></label>
<br /><br />
<button class="btn" onclick="clickSolve();">Calc</button>
</div>
<fieldset class="fieldsetStyle">
<legend>Operations</legend>
<div class="div_style">
<li class="liststyle">
<input type="radio" name="op" value="+" checked /> +
</li>
<li class="liststyle">
<input type="radio" name="op" value="-" /> -
</li>
<li class="liststyle">
<input type="radio" name="op" value="*" /> *
</li>
<li class="liststyle">
<input type="radio" name="op" value="/" /> /
</li>
</div>
</fieldset>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Find factorial</legend>
<div class="div_style">
<label class="lableStyle" for="">Number:</label>
<input type="number" id="factNumber" min="0" max="7" />
<br />
<label class="lableStyle" for="">Factorial is:</label>
<label class="lableStyle" id="factResult" for="">?</label><br />
<button class="btn" onclick="getFactirial();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Find fibonacci</legend>
<div class="div_style">
<label for="" class="lableStyle">Number:</label>
<input type="number" id="fibonacciNumber" min="0" max="9" /><br />
<label for="" class="lableStyle">Fibonacci is:</label>
<label for="" class="lableStyle" id="fibResult">?</label><br />
<button class="btn" onclick="getFibonacci();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Temperature converter</legend>
<div class="div_style">
<label for="" class="lableStyle">Temperature celsius:</label>
<input type="range" id="temperatureValue" min="0" max="100" step="1" />
<label for="" class="lableStyle" id="tValue">0</label><br />
<label for="" class="lableStyle">Fahrenheit:</label>
<label for="" class="lableStyle" id="fahrenheitVal">?</label>
</div>
</fieldset>
</td>
</tr>
</table>
If you inspect the tbody, you will see a default style vertical-align set to center.
If you change it to top, your items will align to the top.
For the operations, you can move the fieldset "operations" to inside the first fieldset "Basic math Operations", so it sits inside it. Operations fieldset will show by default on the bottom. To show it on the right side you can for example use display:flex on class .fieldsetStyle and add width: 100% to the .div_style class (so it's not smaller).
The provided code has the mentioned changes.
I want to move the operations fieldset to inside Basic math Operations.
To get the Operations inside Basic math Operations. Move the Operations'
<fieldset> inside the Basic math Operations <fieldset>.
To get them side by side use flexbox:
Add this class basicMathsFieldset to the Basic math Operations <fieldset>.
.basicMathsFieldset {
display: flex;
}
I want to make all titles of fieldsets on the same line and make all fieldsets the same size.
To get <td> on the same line, use vertical-align: top;, Like this:
td {
vertical-align: top;
}
Final Code:
function clickSolve() {
let temp = document.getElementsByName("op");
let op = getOp(temp);
let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);
let num3 = myOperation(num1, num2, op);
document.getElementById("result").innerText = num3;
}
function getOp(oparr) {
// Get wich radio button is checked
for (let i = 0; i < oparr.length; i++) {
if (oparr[i].checked) {
return oparr[i].value;
}
}
}
function myOperation(num1, num2, op) {
switch (op) {
case "+":
return num1 + num2;
case "-":
return num1 - num2;
case "*":
return num1 * num2;
case "/":
return num1 / num2;
}
}
function getFactirial() {
let num = document.getElementById("factNumber").value;
document.getElementById("factResult").innerText = factorial(num);
}
function getFibonacci() {
let num = document.getElementById("fibonacciNumber").value;
document.getElementById("fibResult").innerText = fibonacci(num);
}
function factorial(x) {
// find the factorial of a number
// if number is 0
if (x == 0) {
return 1;
}
// if number is positive
else {
return x * factorial(x - 1);
}
}
function fibonacci(x) {
// find the fibonacci of a number
if (x <= 1) {
return x;
} else {
return fibonacci(x - 1) + fibonacci(x - 2);
}
}
let slider = document.getElementById("temperatureValue");
let output = document.getElementById("tValue");
let fahrenheitVar = 0;
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
fahrenheitVar = (this.value / 5) * 9 + 32;
document.getElementById("fahrenheitVal").innerText = parseInt(fahrenheitVar);
};
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
body {
background-color: #1e0555;
font-family: cursive;
}
.div_style {
background-color: #f0db4f;
align-content: center;
font-size: large;
padding: 10px;
border-radius: 5px;
}
.tableStyle {
width: fit-content;
align-content: center;
}
.fieldsetStyle {
color: #f0db4f;
border: 2px solid #f0db4f;
height: 50%;
}
.textbox1 {
width: 25%;
margin-left: 20px;
border: 1px solid black;
margin-bottom: 5px;
}
.textbox2 {
width: 25%;
border: 1px solid black;
}
.btn {
border: 1px solid black;
border-radius: 4px;
font-size: 16px;
font-family: cursive;
margin-left: 25%;
cursor: pointer;
padding: 5px;
}
.liststyle {
list-style: none;
color: black;
}
.lableStyle {
color: black;
}
td {
vertical-align: top;
}
.basicMathsFieldset {
display: flex;
}
<table class="tableStyle">
<tr class="trStyle">
<td>
<fieldset class="fieldsetStyle basicMathsFieldset">
<legend>Basic math Operations</legend>
<div class="div_style" id="div_back">
<label class="lableStyle" for="num1">First Number:</label>
<input class="textbox1" type="text" id="num1" />
<br />
<label class="lableStyle" for="num2">Second Number:</label>
<input class="textbox2" type="text" id="num2" />
<br />
<label class="lableStyle" for="">Result:</label>
<label class="lableStyle" for="" id="result"></label>
<br />
<br />
<button class="btn" onclick="clickSolve();">Calc</button>
</div>
<fieldset class="fieldsetStyle">
<legend>Operations</legend>
<div class="div_style">
<li class="liststyle">
<input type="radio" name="op" value="+" checked />
+
</li>
<li class="liststyle">
<input type="radio" name="op" value="-" />
-
</li>
<li class="liststyle">
<input type="radio" name="op" value="*" />
*
</li>
<li class="liststyle">
<input type="radio" name="op" value="/" />
/
</li>
</div>
</fieldset>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Find factorial</legend>
<div class="div_style">
<label class="lableStyle" for="">Number:</label>
<input type="number" id="factNumber" min="0" max="7" />
<br />
<label class="lableStyle" for="">Factorial is:</label>
<label class="lableStyle" id="factResult" for="">?</label>
<br />
<button class="btn" onclick="getFactirial();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Find fibonacci</legend>
<div class="div_style">
<label for="" class="lableStyle">Number:</label>
<input type="number" id="fibonacciNumber" min="0" max="9" />
<br />
<label for="" class="lableStyle">Fibonacci is:</label>
<label for="" class="lableStyle" id="fibResult">?</label>
<br />
<button class="btn" onclick="getFibonacci();">Calc</button>
</div>
</fieldset>
</td>
<td>
<fieldset class="fieldsetStyle">
<legend>Temperature converter</legend>
<div class="div_style">
<label for="" class="lableStyle">Temperature celsius:</label>
<input type="range" id="temperatureValue" min="0" max="100" step="1" />
<label for="" class="lableStyle" id="tValue">0</label>
<br />
<label for="" class="lableStyle">Fahrenheit:</label>
<label for="" class="lableStyle" id="fahrenheitVal">?</label>
</div>
</fieldset>
</td>
</tr>
</table>
👉 Check it in action on Codepen
I added valign="top" to some <td>
function clickSolve() {
let temp = document.getElementsByName("op");
let op = getOp(temp);
let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);
let num3 = myOperation(num1, num2, op);
document.getElementById("result").innerText = num3;
}
function getOp(oparr) { // Get wich radio button is checked
for (let i = 0; i < oparr.length; i++) {
if (oparr[i].checked) {
return oparr[i].value;
}
}
}
function myOperation(num1, num2, op) {
switch (op) {
case "+":
return num1 + num2;
case "-":
return num1 - num2;
case "*":
return num1 * num2;
case "/":
return num1 / num2;
}
}
function getFactirial() {
let num = document.getElementById("factNumber").value;
document.getElementById("factResult").innerText = factorial(num);
}
function getFibonacci() {
let num = document.getElementById("fibonacciNumber").value;
document.getElementById("fibResult").innerText = fibonacci(num);
}
function factorial(x) {
// find the factorial of a number
// if number is 0
if (x == 0) {
return 1;
}
// if number is positive
else {
return x * factorial(x - 1);
}
}
function fibonacci(x) {
// find the fibonacci of a number
if (x <= 1) {
return x;
} else {
return fibonacci(x - 1) + fibonacci(x - 2);
}
}
let slider = document.getElementById("temperatureValue");
let output = document.getElementById("tValue");
let fahrenheitVar = 0;
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
fahrenheitVar = ((this.value / 5) * 9) + 32;
document.getElementById("fahrenheitVal").innerText = parseInt(fahrenheitVar);
}
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
body {
background-color: #1E0555;
font-family: cursive;
}
.div_style {
background-color: #F0DB4F;
font-size: large;
padding: 10px;
border-radius: 5px;
}
.tableStyle {
width: fit-content;
}
.fieldsetStyle {
color: #F0DB4F;
border: 2px solid #F0DB4F;
}
.textbox1 {
width: 25%;
margin-left: 20px;
border: 1px solid black;
margin-bottom: 5px;
}
.textbox2 {
width: 25%;
border: 1px solid black;
}
.btn {
border: 1px solid black;
border-radius: 4px;
font-size: 16px;
font-family: cursive;
margin-left: 25%;
cursor: pointer;
padding: 5px;
}
.liststyle {
list-style: none;
color: black;
}
.lableStyle {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>English site</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table class="tableStyle">
<tr>
<td>
<fieldset class="fieldsetStyle">
<legend>Basic math Operations</legend>
<table class="div_style">
<tr>
<td>
<label class="lableStyle" for="num1">First Number:</label>
<input class="textbox1" type="text" id="num1" /><br />
<label class="lableStyle" for="num2">Second Number:</label>
<input class="textbox2" type="text" id="num2" /><br />
<label class="lableStyle" for="">Result: </label>
<label class="lableStyle" for="" id="result"></label>
<br /><br />
<button class="btn" onclick="clickSolve();">Calc</button>
</td>
<td valign="top">
<label class="lableStyle" for="">Operation : </label>
<li class="liststyle">
<input type="radio" name="op" value="+" checked /> +
</li>
<li class="liststyle">
<input type="radio" name="op" value="-" /> -
</li>
<li class="liststyle">
<input type="radio" name="op" value="*" /> *
</li>
<li class="liststyle">
<input type="radio" name="op" value="/" /> /
</li>
</fieldset>
</td>
</tr>
</table>
</td>
<td valign="top">
<fieldset class="fieldsetStyle">
<legend>Find factorial</legend>
<div class="div_style">
<label class="lableStyle" for="">Number:</label>
<input type="number" id="factNumber" min="0" max="7" />
<br />
<label class="lableStyle" for="">Factorial is:</label>
<label class="lableStyle" id="factResult" for="">?</label><br />
<button class="btn" onclick="getFactirial();">Calc</button>
</div>
</fieldset>
</td>
<td valign="top">
<fieldset class="fieldsetStyle">
<legend>Find fibonacci</legend>
<div class="div_style">
<label for="" class="lableStyle">Number:</label>
<input type="number" id="fibonacciNumber" min="0" max="9" /><br />
<label for="" class="lableStyle">Fibonacci is:</label>
<label for="" class="lableStyle" id="fibResult">?</label><br />
<button class="btn" onclick="getFibonacci();">Calc</button>
</div>
</fieldset>
</td>
<td valign="top">
<fieldset class="fieldsetStyle">
<legend>Temperature converter</legend>
<div class="div_style">
<label for="" class="lableStyle">Temperature celsius:</label>
<input type="range" id="temperatureValue" min="0" max="100" step="1" />
<label for="" class="lableStyle" id="tValue">0</label><br />
<label for="" class="lableStyle">Fahrenheit:</label>
<label for="" class="lableStyle" id="fahrenheitVal">?</label>
</div>
</fieldset>
</td>
</tr>
</table>
<script src="jsfuctions.js"></script>
</body>
</html>
I've made some changes in your HTML, you don't need a table do that. See if it's what you're looking for.
<body>
<div class="row">
<fieldset class="fieldsetStyle">
<legend>Basic math Operations</legend>
<div class="basics div_style">
<div id="div_back">
<label class="lableStyle" for="num1">First Number:</label>
<input class="textbox1" type="text" id="num1" /><br />
<label class="lableStyle" for="num2">Second Number:</label>
<input class="textbox2" type="text" id="num2" /><br />
<label class="lableStyle" for="">Result: </label>
<label class="lableStyle" for="" id="result"></label>
<br /><br />
<button class="btn" onclick="clickSolve();">Calc</button>
</div>
<fieldset class="fieldsetStyle fieldsetStyle--blue">
<legend>Operations</legend>
<div class="div_style">
<li class="liststyle">
<input type="radio" name="op" value="+" checked /> +
</li>
<li class="liststyle">
<input type="radio" name="op" value="-" /> -
</li>
<li class="liststyle">
<input type="radio" name="op" value="*" /> *
</li>
<li class="liststyle">
<input type="radio" name="op" value="/" /> /
</li>
</div>
</fieldset>
</div>
</fieldset>
<fieldset class="fieldsetStyle">
<legend>Find factorial</legend>
<div class="div_style">
<label class="lableStyle" for="">Number:</label>
<input type="number" id="factNumber" min="0" max="7" />
<br />
<label class="lableStyle" for="">Factorial is:</label>
<label class="lableStyle" id="factResult" for="">?</label><br />
<button class="btn" onclick="getFactirial();">Calc</button>
</div>
</fieldset>
<fieldset class="fieldsetStyle">
<legend>Find fibonacci</legend>
<div class="div_style">
<label for="" class="lableStyle">Number:</label>
<input type="number" id="fibonacciNumber" min="0" max="9" /><br />
<label for="" class="lableStyle">Fibonacci is:</label>
<label for="" class="lableStyle" id="fibResult">?</label><br />
<button class="btn" onclick="getFibonacci();">Calc</button>
</div>
</fieldset>
<fieldset class="fieldsetStyle">
<legend>Temperature converter</legend>
<div class="div_style">
<label for="" class="lableStyle">Temperature celsius:</label>
<input
type="range"
id="temperatureValue"
min="0"
max="100"
step="1"
/>
<label for="" class="lableStyle" id="tValue">0</label><br />
<label for="" class="lableStyle">Fahrenheit:</label>
<label for="" class="lableStyle" id="fahrenheitVal">?</label>
</div>
</fieldset>
</div>
</body>
And some changes to your CSS.
body {
background-color: #1e0555;
font-family: cursive;
}
.row {
display: flex;
gap: 8px;
align-items: flex-start;
}
.basics {
display: flex;
}
.div_style {
background-color: #f0db4f;
font-size: large;
padding: 10px;
border-radius: 5px;
}
.fieldsetStyle {
color: #f0db4f;
border: 2px solid #f0db4f;
}
.fieldsetStyle--blue {
color: #1e0555;
border: 2px solid #1e0555;
}
.textbox1 {
width: 25%;
margin-left: 20px;
border: 1px solid black;
margin-bottom: 5px;
}
.textbox2 {
width: 25%;
border: 1px solid black;
}
.btn {
border: 1px solid black;
border-radius: 4px;
font-size: 16px;
font-family: cursive;
margin-left: 25%;
cursor: pointer;
padding: 5px;
}
.liststyle {
list-style: none;
color: black;
}
.lableStyle {
color: black;
}
Related
How do I make the each block of this image act as a radio button?
<table class="table table-bordered">
<tbody>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">IT Solutions</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Household</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Design & Multimedia</label>
</td>
</tr>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Event & photography</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Sales & Marketing</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Engineering & Architecture</label>
</td>
</tr>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Writing & Translation</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Finance & Accounting</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Legal</label>
</td>
</tr>
</tbody>
</table>
I've tried this but it only alows to select one table row as a radio button.
.category-item input{
display: none;
}
.category-item label{
cursor: pointer;
padding: 30px;
}
How to make each td act as a radio button the tr tag separates the block so all the elements are not radio button.
you must use unique id for inputs or dont use id and set input in label like this
<label><input type="radio" name="list" value="" /> Label Title</label>
Here is a CodePen, hope this helps.
The mistake you did that you are using the same id for all inputs and this is totally wrong, because ids are always unique which means that no more than one element will take the same id.
then how you are going to determine which radio is checked right now since you are hiding the radio?
For this you could use Pseudo Element :checked to style the checked radio, e.g. you could change the background color for the checked radio.
Here is a JSfiddle, hope this helps.
Say thanks to : zer00ne on My Post
/* Radio Buttons & Labels */
/* :checked & for='ID OF RADIO' */
.rad {
display: none
}
.lab {
border-radius: 9px;
border: 2px inset grey;
padding: 3px 5px;
font-size: 24px;
cursor: pointer;
margin: 20px 10px;
}
.lab::before {
content: 'WHITE';
}
.rad:checked+.lab {
background: red;
color: white;
}
.rad:checked+.lab::before {
content: '\a0\a0RED\a0\a0';
}
/* Anchor & Any Element */
/* href='#ID OF ELEMENT' & #ANY:target */
a {
display: inline-block;
margin: 0 5px;
color: yellow;
background: #000;
padding: 2px 4px;
}
a:first-of-type {
color: #ff4c4c
}
a:nth-of-type {
color: yellow
}
a:last-of-type {
color: lime
}
b {
display: block;
height: 48px;
width: 48px;
border-radius: 50%;
margin: 5px auto;
border: 3px outset grey;
background: rgba(0, 0, 0, .2)
}
#T1:target {
background: red;
}
#T2:target {
background: yellow
}
#T3:target {
background: green
}
<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>
<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>
<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>
<hr>
<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>
<b id='T1'> </b>
<b id='T2'> </b>
<b id='T3'> </b>
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
I am trying to display fa-icon before my input.
My html code is as follows:
<table width="788" border="0">
<tr> <td> <input type="hidden" name="c_id" id="c_id" value="<?php echo $id; ?>"> </td> </tr>
<tr>
<td width="150"><p>
<label for="firstname">Customer First Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="<?php echo $firstname1; ?>" >
</label>
</p></td>
<td width="243"><p>
<label for="middlename">Customer Middle Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="middlename" id="middlename" value="<?php echo $m_name2; ?>" placeholder="Middle Name"> </label>
</p></td>
<td width="250"><p>
<label for="lastname">Customer Last Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="lastname" id="lastname" placeholder="Last Name" value="<?php echo $lastname3; ?> " >
</label>
</p></td></tr>
</table>
CSS is as follows:
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
}
.myinput
{
width:100%;
float:left;
}
input
{
background-color: #3CBC8D;
color: white;
display: inline-block;
padding: 5px 10px;
float:left;
width:90%;
}
The fa icon appears above the input field. I want the icon to appear before the input field. Is there any solution for that? I tried display inline and inline block properties. What can be the solution to this?
Solved : Easy and best to implement by using below concept:
.input{position:relative}
.icon-wrapper{position:absolute; display:block; width:25px; height:25px; left:1px; top:1px;}
.myinput{padding-left:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<label class="input">
<span class="icon-wrapper"><i class="fa fa-user" aria-hidden="true"></i></span>
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="" >
</label>
Try this:
i.fa{
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
//float:left;
display: inline-block;
width:10%;
}
.myinput
{
//width:100%;
//float:left;
}
input
{
background-color: #3CBC8D;
color: white;
display: inline-block;
padding: 5px 10px;
//float:left;
width:90%;
}
try this
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
display: inline-block;
width: 10%;
}
and remove
.myinput
{
width:100%;
float:left;
}
use bootstrap classes to achieve this functionality like below
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
More Examples
I am trying to align this radio buttons on my form, but for some reason they are kinda big and the texts are way above.
Here is my html page:
<div id="sabores">
<form action="" method="post">
<input type="radio" name="txt_sabor" value="natural" class="radiobtn" /> Natural </br>
<input type="radio" name="txt_sabor" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola </br>
<input type="radio" name="txt_sabor" value="morango" class="radiobtn" /> Morango </br>
<input type="radio" name="txt_sabor" value="limao" class="radiobtn" /> Limão </br>
<input type="radio" name="txt_sabor" value="acai_com_guarana" class="radiobtn" /> Açaà com Guaraná</br>
<input type="radio" name="txt_sabor" value="uva" class="radiobtn" /> Uva </br>
<input type="radio" name="txt_sabor" value="abacaxi" class="radiobtn" /> Abacaxi </br>
</form>
</div>
and here is my CSS:
#sabores{
width: 370px;
height: 215px;
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores h2{
width: 364px;
color: #333;s
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
Your have mistype your br, instead of <br />. And to correct your problem and add a good accessibility practice at same time you can wrap your radio button with text in a label. You can use paragraphs <p> instead of <br /> too. And remove your clear: left; float:left you don't need to precise display:block if your element is floating.
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
margin-top: 10px;
}
<div id="sabores">
<form action="" method="post">
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label><br />
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label><br />
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label><br />
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label><br />
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaà com Guaraná </label><br />
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label><br />
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label><br />
</form>
</div>
Better solution is to use an unordered list ul with li for each couple label + input or paragraphs, and remove your fixed height from sabores div :
<div id="sabores">
<form action="" method="post">
<p>
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label></p>
<p>
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label></p>
<p>
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label></p>
<p>
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label></p>
<p>
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaà com Guaraná </label></p>
<p>
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label></p>
<p>
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label></p>
</form>
</div>
With style :
/*previous style*/
#sabores{
width: 370px;
/*height: 215px; don't need*/
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
}
#sabores p {
margin-bottom: 10px;
margin-top: 0;
}
Make the following changes to this class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
margin-top: 10px;
vertical-align:bottom;
/*
Remove following css properties
display: block;
clear: left;
float: left;
*/
}
fiddle
Please pay more attention the follow class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
as you see, you use these attributes:
display:block; clear: left; float: left;
It makes your input Element out of page flow, so you can remove these attribute and everything will be ok!
I advise you can read it about Visual formatting model.(click here)
I am trying to create a fairly basic form with in my maincontent. I am sure I am coding things incorrectly and it is driving me crazy. Note my code. I get extremely wide vertical spacing in IE 7 and the bacground color between the field sets does not work correctly. All is good in FF.
My CSS is:
fieldset {
margin: 1.5em 0 0 0;
padding: 0;
border-style: none;
border-top: 1px solid #BFBAB0;
background-color: #FFFFFF;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
}
{
var w = document.myform.mylist.selectedIndex;
var selected_text = document.myform.mylist.options[w].text;
alert(selected_text);
}
label em {
display: block;
color: #900;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}
This is my html code.
<div id="mainContent1">
<form name="myform">
<label for="mylist"><strong>Select an Account Type:</strong></label>
<select name="mylist"><option value="traditional">Traditional Account</option>
<option value="paperless">Paperless Account</option>
</select>
</form>
<br /><a> </a>
<form action="example.php">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="name">Name:</label>
<input id="name" name="name" class="text" type="text" />
<label for="name">
<em>required</em>
</label>
</li>
<li>
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
<label for="name">
<em>required</em>
</li>
<li>
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
<label for="name">
<em>required</em>
<ol>
<li>
<input id="option1" name="option1"
class="checkbox" type="checkbox" value="1" />
<label for="option1">Savings</label>
</li>
<li>
<input id="option2" name="option2"
class="checkbox" type="checkbox" value="1" />
<label for="option2">Checkings</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Delivery Address</legend>
<ol>
<li>
<label for="address1">Address 1:</label>
<input id="address1" name="address1" class="text"
type="text" />
</li>
<li>
<label for="city">City:</label>
<input id="city" name="city" class="text" type="text" />
</li>
<li>
<label for="postcode">Zip Code:</label>
<input id="postcode" name="postcode"
class="text textSmall" type="text" />
</li>
<li>
<label for="country">Country:</label>
<input id="country" name="country" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset class="submit">
<input class="submit" type="submit" value="Submit" />
</fieldset>
<fieldset class="clear">
<input class="clear" type="clear"
value="Submit" />
</fieldset>
</form>
First, get rid of the script in your CSS file...
Firefox/compliant browsers and IE treat legends and fieldsets very differently, unfortunately... that may be the problem you're seeing:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
make sure there is a "#" before your id's and a "." before your classes in your css file. not doing so causes confusion.