I have a div ,and inside div there is radio buttons, what is the easiest way to align radio button according to text vertically in same line inside div
echo"<div id=\"div{$id}\" ";?>
echo"</br>
<input type= radio name=\"{$id}\" value=\"{$option1}\" >
$option1
</br>
<input type= radio name=\"{$id}\" value=\"{$option2}\">
$option2
</br>
<input type= radio name=\"{$id}\" value=\"{$option3}\">
$option3
</br>
<input type= radio name=\"{$id}\" value=\"{$option4}\">
$option4
</br></br>";
echo"</div>";
in above code values are taken from db, I want to know how to align radiobuttons inside div vertically in same line.
Style radio buttons like this:
input[type="radio"] {
margin-top: 0;
vertical-align: middle;
}
You could try it with a table:
echo"<div id=\"div{$id}\" ";?>
echo"<br />
<table>
<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option1}\" >
</td>
<td>
$option1
</td>
</tr>
<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option2}\" >
</td>
<td>
$option2
</td>
</tr>
<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option3}\" >
</td>
<td>
$option3
</td>
</tr>
<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option4}\" >
</td>
<td>
$option4
</td>
</tr>
</table>
</br></br>";
echo"</div>";
you will have to put them in the table for proper alignment...
echo"<div id=\"div{$id}\" ";?>
echo"</br>
<table><tr>
<td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option1}\" ></td><td align=center valign=middle>
$option1</td></tr>
<td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option2}\"></td></td><td align=center valign=middle>
$option2</td></tr>
</br>
<td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option3}\"></td><td align=center valign=middle>
$option3</td></tr>
</br>
<td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option4}\"></td><td align=center valign=middle>
$option4</td></tr>
";
echo"";
Related
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;
}
I'm wondering if possible to arrange two checkbox input fields vertically in same td cell? Below is example, there both of input fields are next to each other.
<table>
<tr>
<td>
<input type="number" />
<input type="checkbox" name="ck1" id="ck1">A
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
How about using a simple <br> with using text-align:right on the <td>?
<table>
<tr>
<td style='text-align:right'>
<input type="number">
<input type="checkbox" name="ck1" id="ck1">A<br>
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
I have a simple login form and it is centered in internet explorer but in Chrome and Firefox it is aligned to the left of the page. What do I need to do to have the form centered in the other 2 browsers.
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
Try to change the form width to 100%. This the example
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">
You should avoid using HTML tables to define the layout of your page. Here's a good overview on why tables should not be used for layout.
You should rely on HTML tag for semantic and CSS to tell the browser how he should display the stuff in the page.
Now consider the following:
<style>
form {
width: 200px;
margin: 0 auto;
}
input {
display: block;
margin: 5px 0;
}
</style>
<form name="form1" method="POST" action="/">
<h1>Client Login</h1>
<input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24">
<input name="mypassword" type="password" id="mypassword" placeholder="password" size="25">
<input name="Submit" type="submit" class="submit_button" value="Login">
</form>
The HTML is stripped down to the bare essential: your title then your form elements. The form here is the main container. With CSS we tell the form to have 200px width and we use the margin property to center it.
We also tell the input element to display like a block element to fill it'S container, this way they each occupy 1 line.
Learning CSS is useful to separate appearance from meaning, here's a great demonstration of the relation between content, container and design.
Would you mind to try this maybe :)
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
I would like to show a form with submit button, to post the texts fields back to server with:
a text input called title, with border
text called chapter and section no border, and their should be assigned in JavaScript
I want chapter/section not modifiable and short. But Title is a normal input and should be very close to the word Title, like:
Chapter 3 Section 4
_____________
Title |_____________|
I wrote CSS like "input[type="notext"]{border: none} then either both text inputs have border, or none has border. I basically want the two inputs to have different style, or some other kind of field for chapter/section for me to set value is fine too. So how to achieve this? Don't need to be compatible for IE8 and before.
input[type="text"]{
border: none;
font-size: 16px;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
<td>Section <input type="text" value="4" name="sec" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" name="title" id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>
You can define a CSS class for your inputs and just use them.
For inputs with class example:
input.example {
border: none;
font-size: 16px;
}
Use it like this:
<input class="example" type="text" value="3" name="cha_n" readonly/>
Example: http://jsfiddle.net/x762v24a/
A less generic way to achieve this is to use CSS attribute selector:
input[name="cha_n"] {
border: none;
}
To remove the borders on the chapter and section inputs, use:
input[readonly] {
border:none;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
<td>Section <input type="text" value="4" name="sec" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" name="title" id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>
Try to give inputs having the same style an 'class' attribute,then :
.style1
{
border = 0px solid #FFFFFF;
}
.style2
{
margin = 0px;
padding = 0px;
border = 1px;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" class="style1" readonly/></td>
<td>Section <input type="text" value="4" name="sec" class="style1" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" class="style2" name="title"id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" /></td>
<td>Section <input type="text" value="4" name="sec" /></td>
</tr>
<tr>
<td>Title</td>
<td><input type="text" style="border:none;font-size:14px;" name="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>
This is short part of my code which display radio buttons.
<table width="100%">
<tr>
<td style="text-align:center">
<input type="radio" name="ah" value="" id="ah" align="left" checked="checked" />AH
</td>
<td style="text-align:center">
<input type="radio" name="esp" value="none" id="esp" align="right"/>ESP
</td>
</tr>
</table>
The problem is that the one radio button (AH) is by default checked as mentioned here and when i click on other radio button it also gets checked
but now both are checked how would I disable them.
I think it should happen automatically when I click on one radio button other button should be disabled automatically.
please correct me where am I wrong???
To group radio buttons together, they should share the same name:
<table width="100%">
<tr>
<td style="text-align:center">
<input type="radio" name="someName" value="AH" id="ah" align="left" checked="checked" />AH
</td>
<td style="text-align:center">
<input type="radio" name="someName" value="ESP" id="esp" align="right"/>ESP
</td>
</tr>
</table>
You need to give both radio buttons the same name attribute so the browser can recognize them as being in the same group.
They need to have the same name attribute.
try this it will help.... you have to give the same name to both radio button
<table width="100%">
<tr>
<td style="text-align:center">
<input type="radio" name="esp" value="" id="ah" align="left" checked="checked" />AH
</td>
<td style="text-align:center">
<input type="radio" name="esp" value="none" id="esp" align="right"/>ESP
</td>
</tr>
</table>