List radio buttons beneath eachother inside a Table - html

I'm trying to get a list of radio buttons listed below eachother inside a
table data. Is this possible? Here is my current code
<table>
<tr>
<td> Voornaam </td>
<td> <input type="text" class="profiel_inp"> </td>
<td> Studentennr </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Achternaam </td>
<td> <input type="text" class="profiel_inp"> </td>
<td> Klas </td>
<td> <select class="selectinp">
<option value="volvo">V1L</option>
<option value="saab">V1C</option>
<option value="mercedes">V1E</option>
<option value="audi">V1F</option>
</select>
</td>
</tr>
<tr>
<td> Adres </td>
<td > <input type="text" class="profiel_inp size2"> </td>
<td> Studierichting </td>
<td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > BIM <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > SIE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
</tr>
<tr>
<td> E-mail </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Telefoonnr </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Geslacht </td>
<td> Man<input type="radio" name="geslacht" class="profiel_inp">
Vrouw<input type="radio" name="geslacht" class="profiel_inp"> </td>
</tr>
<tr>
<td> Geboortedatum </td>
<td> <input type="date" class="profiel_inp"> </td>
</tr>
</table>
with the CSS :
table {
width:100%;
margin-top:25px;
margin-bottom:25px;
}
input[type="text"], input[type="date"], .selectinp {
min-height:30px;
border:1px solid black;
padding:5px;
width:75%;
}
table tr {
padding-bottom:5px;
}
.size2 {
min-height:60px!important;
}
So ive got a table with a left and right side. Now on the left side is pretty basic but the right side has to contain a list of 4 radio buttons listed beneath eachother!

You could add them to a fieldset and wrap them in labels. Then in css set label display to block.
html
<td name="Studierichting">
<fieldset>
<label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">BIM</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">SIE</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
</fieldset>
css
label {
display:block;
}

Related

<output> is going to 12 decimal places instead of 2

I'm trying to get the below outputs of this form to limit the outcome to 2 decimal place as it's a currency.
I've tried another suggestion by adding an onchange event but it's not working. Any suggestions?
<form oninput="retVal.value = pavVal.value - (pavVal.value * pavCAT.value),salvage.value=pavVal.value * pavCAT.value, retPrevVal.value = ((pavVal.value *0.8) * (1 - pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
</td>
<td>
<input type="radio" name="pavCAT" value="0.28" >
<label for="0.28" style="padding-right:30px; width:50%;" >Category N (28%)</label>
<input type="radio" name="pavCAT" value="0.2" >
<label for="0.2" style="padding-right:30px; width:50%;">Category S (20%)</label>
<input type="radio" name="pavCAT" value="0.05" >
<label for="0.05" style="padding-right:30px; width:50%;">Category B (5%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT" onchange="setTwoNumberDecimal()"></output>
</td>
</tr>
<tr>
<td>
<label for="retPrevVal"><b>Salvage Value:</b></label>
</td>
<td>
<output name="salvage" for="pavVal pavCAT" onchange="setTwoNumberDecimal()" ></output>
</td>
</tr>
<tr>
<td>
<label for="retPrevVal"><b>If Previous TL:</b></label>
</td>
<td>
<output name="retPrevVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>

Cannot fix table td width

I want to fix my TD width, I used the width="50%" but it isn't fixing, it is changing all table width, and I don't want to use css. I want to make it like this width on line 2 and 3 for city and gender ; any idea to fix only this line without changing all width table?
<html>
<head>
<title> Table New </title>
</head>
<body>
<table align="center" border="1">
<tr>
<td> <img src="1.jpg" width="100" > </td>
<td colspan="2"> Welcome To <br> My Website </td>
</tr>
<tr>
<td> City : </td>
<td> <input type="radio" name="v1" checked> Beirut </td>
<td> <input type="radio" name="v1"> Paris </td>
</tr>
<tr>
<td> Gender : </td>
<td> <input type="radio" name="v2" checked> Male </td>
<td> <input type="radio" name="v2"> Female </td>
</tr>
<tr>
<td> Name </td>
<td> First Name : <input type="text" name="v3"> </td>
<td> Last Name : <input type="text" name="v3"> </td>
</tr>
<tr>
<td> Photos </td>
<td> <input type="file" name="v4"> <br> <input type="file" name="v4"> <br> <input type="file" name="v4"> </td>
<td> <input type="submit" name="v5" value="send" style="float:right;" > </td>
</tr>
</table>
</body>
</html>
It's not possible by only changing those two tr. Here's one possible solution, adding another pseudo column on the left:
<table align="center" border="1">
<tr>
<td> <img src="1.jpg" width="100" > </td>
<td colspan="3"> Welcome To <br> My Website </td>
</tr>
<tr>
<td> City : </td>
<td width="100px"> <input type="radio" name="v1" checked> Beirut </td>
<td colspan="2"> <input type="radio" name="v1"> Paris </td>
</tr>
<tr>
<td> Gender : </td>
<td> <input type="radio" name="v2" checked> Male </td>
<td colspan="2"> <input type="radio" name="v2"> Female </td>
</tr>
<tr>
<td> Name </td>
<td colspan="2"> First Name : <input type="text" name="v3"> </td>
<td> Last Name : <input type="text" name="v3"> </td>
</tr>
<tr>
<td> Photos </td>
<td colspan="2"> <input type="file" name="v4"> <br> <input type="file" name="v4"> <br> <input type="file" name="v4"> </td>
<td> <input type="submit" name="v5" value="send" style="float:right;" > </td>
</tr>
</table>
However, this is a good example why it's not considered good practice to use html table and colspan - it quite soon gets rather complicated. But in this case, unless you add a lot of new rows or change the layout a lot, it probably works just fine.

How to style a option

I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..

How to display second checkbox name aligned

<html>
<table width="45%"><tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
<tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
</table></html>
I want second check box name is to large, it should align properly below the name .
It should start from the name not form checkbox
you can use additional element - label, like this:
HTML:
<table width="45%">
<tr>
<td>
<input type="checkbox" name="mahesh1" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh1" name="mahesh1" value="mahesh"/>
<label for="maesh1"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mahesh2" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh2" name="mahesh2" value="mahesh"/>
<label for="maesh2"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
css:
label {
display: block;
white-space: nowrap;
}
fiddle:
http://jsfiddle.net/ywg632c3/2/

Cannot align checkbox in table to the left

I have a checkbox in a table and I cannot align them to the left.
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked" /> this is a checkbox
</td>
</tr>
table.all td.cb{
color: #424242;
border:1px solid black;
margin:0 auto;
text-align:left;
}
I have tried many things, but the result is this:
I applied a border for demonstration purposes.
If I add float:left, I get this:
I used the same code in another webpage where it was working fine (there the table had 2 columns only).
Solution:
I already had this in my .css file which strangely caused the problem in spite of the colspan="3"
table.all td input{
width:90%;
float:left;
}
I changed it to
table.all td input.i{
width:90%;
float:left;
}
and added a class="i" to all the other input types and now it's working fine.
The whole form if necessary:
<div id="container_center">
<form>
<table class="minden">
<tr>
<td colspan="3">
<p class="title">Create new account</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="title2">Enter account holder information</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>First name: *</p>
</td>
<td colspan="2">
<p>Last name: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" size="45">
</td>
<td colspan="2">
<input type="text" name="lastname" size="45">
</td>
</tr>
<tr>
<td>
<p>Email: *</p>
</td>
<td colspan="2">
<p>Email again: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email" size="45">
</td>
<td colspan="2">
<input type="text" name="email2" size="45">
</td>
</tr>
<tr>
<td>
<p>Address 1: *</p>
</td>
<td colspan="2">
<p>Address 2:</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="address1" size="45">
</td>
<td colspan="2">
<input type="text" name="address2" size="45">
</td>
</tr>
<tr>
<td>
<p>Country: *</p>
</td>
</tr>
<tr>
<td>
<select name="country" class="sel_country">
<option value="">[Please Select]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
</select>
</td>
</tr>
<tr>
<td>
<p>City: *</p>
</td>
<td>
<p>State/Province: *</p>
</td>
<td>
<p>Zip code: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="city" size="45">
</td>
<td>
<input type="text" name="state" size="30">
</td>
<td>
<input type="text" name="zip" size="10" class="zip">
</td>
</tr>
<tr>
<td>
<p>Phone number: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Create your login</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>Username: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" size="45">
</td>
</tr>
<tr>
<td>
<p>Password: *</p>
</td>
<td>
<p>Confirm password: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="password" size="45">
</td>
<td colspan="2">
<input type="text" name="password2" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Accept terms</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked"/>this is a checkbox
</td>
</tr>
<tr>
<td>
<ul>
<li>Terms of service</li>
<li>Privacy policy</li>
</ul>
</td>
</tr>
<tr>
<td class="submit" colspan="3">
<input type="submit" name="purchase" value="Purchase" id="submitbutton">
</td>
</tr>
</table>
</form>
</div>
You could also accomplish this by excluding the checkbox from your input style. For example, I was encountering a similar problem with this CSS:
input {
width: 300;
}
And fixed by changing to this:
input:not([type="checkbox"]) {
width: 300;
}